HTML5+CSS3 ヘッダー作成例と更新

前回、私たちは 2 つのヘッダーレイアウト (フレックスボックス 1 つとフロート 1 つ) を考え出しました。最終的には、再構築を行っている同僚とコミュニケーションをとった結果、フロートレイアウトを選択しました。

実際、レイアウトの選択には私の注意は必要ありません。私の参加やいくつかの意見は主に自己改善ですが、HTML 構造が CSS によって完全に制御されるとは限りません。

ヘッダーコンポーネントのコーディングプロセスでは、いくつかの問題についてリファクタリングの同僚と議論や論争を繰り返しました。今日は、ヘッダーコンポーネントのレイアウトと機能の実装、および js と css の連携についてお話しします。

ヘッダーコンポーネント自体は古いコンポーネントです。このような古いコンポーネントを改修する方法について説明します。

初期構造

最初にリファクタリングした同僚が、既製のページを提供してくれました。

私たちはこれらの小さな経験のいくつかについて話し合い、デザインチームに伝えました。彼らは変更を加え、作業はスムーズに進みました。その後、私は楽しくコーディングを始めました。これは HTML ブロックの 1 つの構造です。

 <header class="cm-header" style="top: 50px;">
   <span class="fl cm-header-icon icon-back"></span>
   <span class="fr cm-header-btn">確認</span>
   <span class="fr cm-header-icon"><i class="icon-home"></i></span>
   <span class="fr cm-header-icon"><i class="icond-list"></i></span>
   <h1 class="cm-page-title">
     ページタイトル</h1>
 </ヘッダー>

h1 タグ内のテキストは非常に複雑になる可能性があるため、これについては後で説明します。ボタンには次の機能があります。

① 2段目：戻るボタン
② 3行目：確認

PS: 左側はフロートレイアウトを使用しているため、最初の要素は右端にあります

③ 4行目：ホームタグ
④ 5行目: 3つの点、クリックするとサイドバーが表示されます

上記は HTML の実装ですが、プログラマーにとってはヘッダーにはボタン (btn) の他にアイコンしかないため、上記の構造は一般に JS では受け入れられません。

Jserに必要な構造

リファクタリングの同僚と話し合った結果、理由は次のようになりました。

①フォールバックが特殊なので追加スタイルがあるのですが、それが何なのか覚えていません。
② iconは背景画像を表し、icondはCSS3描画を表します。CSS3描画は色の変更など、高い拡張性を持っています。
③……

当時、両者の間で議論はかなり激しかったのですが、リファクタリングの同僚がすべての icond を icon に変更することに反対したため、計画は中止されました。議論を重ねた結果、構造は次のようになりました。

<header class="cm-header" style="top: 50px;">
   <span class="fl cm-header-icon"><i class="icon-back"></i></span>
   <span class="fr cm-header-btn">確認</span>
   <span class="fr cm-header-icon"><i class="icon-home"></i></span>
   <span class="fr cm-header-icon"><i class="icond-list"></i></span>
   <h1 class="cm-page-title">
     ページタイトル</h1>
 </ヘッダー>

戻るボタンの構造を他のアイコン型ボタンと統一するために少し変更を加え、楽しくコーディングを始めました。

PS: icond タグと icon type タグはヘッダーにさまざまな程度で表示され、制御できないことに注意してください。

構造上の問題

会社のヘッダーは常に存在していたため、プロセス中に 2 つの側面を考慮する必要がありました。

①拡張性は高いがインターフェースの互換性が必要
②各タグのタグ名を介してHybridとの共同デバッグを行う必要がある

つまり、各タグの名前は固定されており、一部のタグのコールバックも制限されています。私のデータ構造は次のとおりです。

 {
 左： []、
 中心： []、
 右： [
   {
     'タグ名': 'ホーム'、コールバック: 関数 () {
       コンソールにログ出力します。
     }
   },
   { 'タグ名': '検索' },
   {
     'タグ名': 'リスト'、コールバック: 関数 (e) {
        //.......
     }
   },
   { 'タグ名': '電話番号', '番号': '56973144' },
   {
     'タグ名': 'コミット'、'値': 'ログイン'、コールバック: 関数 () {
       console.log('ログイン');
     }
   },
   {
     'タグ名': 'カスタム', '値': 'カスタマイズ',
     アイテム関数: 関数() {
       '<span class="cm-header-btn fr js_custom">カスタマイズ</span>' を返します。
     },
     コールバック: 関数 () {
       console.log('カスタマイズ');
     }
   }

ご覧のとおり、タグ名ごとにボタンが1つありますが、ここで問題が発生します。タグ名がアイコンであるべきなのか、それともアイコンであるべきなのかがわかりません。

ただし、値フィールドが存在するかどうかに基づいて、i サブタグが必要かどうかを判断できます。この問題をどのように解決すればよいでしょうか?

タグ名とクラス名の間にマッピング関係を確立します。例:

 varマップ = {
   'ホーム': 'アイコン',
   'リスト': 'アイコン'
 }

もちろん、このアプローチは当然非常に不快です。小さなアイコンをアイコンとして統一すれば、テンプレート内のコードを次のように統一できます。

 <span class="cm-header-icon <%=dir %> js_<%=item.tagname %>" >
   <% if(item.value) { %>
     <%=アイテム値 %>
   <% } それ以外の場合は { %>
     <i class="icon-<%=item.tagname %>"></i>
   <% } %>
 </span>

しかし、マッピング関係を追加したため、コードが醜くなり、ビジネスロジックが複雑になりました。そこで、これらの点を考慮して、再度リファクタリングの同僚を探しました。リファクタリングの同僚も非常に賢明で、すぐに変更に同意しました。

 <header class="cm-header" style="top: 50px;">
   <span class="fl cm-header-icon"><i class="icon-back"></i></span>
   <span class="fr cm-header-btn">確認</span>
   <span class="fr cm-header-icon"><i class="icon-home"></i></span>
   <span class="fr cm-header-icon"><i class="icon-list"></i></span>
   <h1 class="cm-page-title">
     ページタイトル</h1>
 </ヘッダー>

h1 のスタイルを考慮せずに、上記のコードを取得するのは非常に簡単です。！！

 <ヘッダークラス="cm-header">
 <%
 var i = 0、len = 0、j = 0、keyagain = 0;
 var 左 = 左;
 var right = right.reverse();
 var アイテム = null;
 var ディレクトリ;
 var btnObj = null;
 %>
 <%for(キー再入力=0; キー再入力 < 2; キー再入力++) { %>
   <% 
     if(keyagain == 0) { dir = 'fl'; btnObj = left; } else { dir = 'fr'; btnObj = right; }
   %>
   <% for(i = 0, len = btnObj.length; i < len; i++) { %>
     <% item = btnObj[i]; %>
     <%if(typeof item.itemFn == '関数') { %>
       <%=item.itemFn() %>
     <%} それ以外の場合は { %>
       <span class="cm-header-icon <%=dir %> js_<%=item.tagname %>" >
         <% if(item.value) { %>
           <%=アイテム値 %>
         <% } それ以外の場合は { %>
           <i class="icon-<%=item.tagname %>"></i>
         <% } %>
       </span>
     <%} %>
   <%} %>
 <%} %>
 </ヘッダー>

PS: コードの色分けから、js で使用されている left と right は処理する必要があるキーワードです...

カスタマイズされた要件

ご覧のとおり、1 つのループで左側と右側のボタンを簡単に生成できますが、すぐに問題が発生します。拡張する必要がある場合はどうなるでしょうか。次のような問題が発生します。

① デフォルトのtelタグはaタグですが、ここではspanタグです

<a href="tel:56973144" class="cm-header-btn fr js_tel "><i class="icon-tel"></i></a>

② 戻るボタンは通常、ハイブリッドのJavaScriptエラーによる誤死の問題を解決するためにaタグにされます

率直に言えば、ラベルボタンは統一された構造を持つ必要がありますが、カスタマイズできる機能も保持する必要があります。
ここでのカスタマイズ作業は、各タグの itemFn 関数に割り当てられます。特定のルールに従って文字列を返します。以下はコードスニペットです。

 handleSpecialParam: 関数 (データ) {
   var k、i、len、item;
   (データ内のk)の場合{
     _.isArray(data[k]) の場合 {
       (i = 0, len = data[k].length; i < len; i++) {
         項目 = データ[k][i];
         if (this['customtHandle_' + item.tagname]) {
           this['customtHandle_' + item.tagname](data[k][i], k);
         } //もし
       } //のために
     } //もし
   } //のために
 },
 
 _getDir: 関数 (dir) {
   var kv = { 左: 'fl'、右: 'fr' };
   kv[dir]を返します。
 },
 
 //戻るボタンのロジックを処理する customtHandle_back: function (item, dir) {
   dir = this._getDir(dir);
   アイテム.itemFn = 関数 () {
     var str = '<a href="http://m.ctrip.com/html5/" class="cm-header-btn ' + dir + ' js_' + item.tagname + ' " >';
     if (item.value) {
       str += 項目.値 + '</a>';
     } それ以外 {
       str += '<i class="icon-' + item.tagname + '"></i></a>';
     }
     str を返します。
   };
 },

ボタンがニーズを満たしていない、またはカスタマイズされた要件がある場合、そのボタンの itemFn を設定する方法を見つけることができます。この時点で、このコードは初期化された json 文字列に直接書き込むことができます。

さまざまなタイトル

タイトルに関しては、そのパフォーマンスがさまざまであることがわかります。現時点では、さまざまなタイプに応じてさまざまな HTML 構造が生成されます。フレームワークにはいくつかのデフォルトオプションが用意されています。サポートされていない場合は、itemFn を自分でカスタマイズできます。

 <% アイテム = 中央; %>
 <%if(typeof item.itemFn == '関数') { %>
   <%=item.itemFn() %>
 <%} そうでない場合、item.tagname=='タイトル' || item.tagname=='サブタイトル') { %>
   <h1 class="cm-page-title js_<%=item.tagname %>" >
     <%if(typeof(item.value) == 'object' && item.title.value == 2) { %>
       <span class="cm-title-l"><%=item.value[0]%></span>
       <span class="cm-title-s"><%=item.value[1]%></span>
     <%} それ以外の場合は { %>
       <%=アイテム値 %>
     <%} %>
   </h1>
 <%} そうでない場合、item.tagname=='select'){ %>
   <h1 class="cm-page-select-title js_<%=item.tagname %>" >
     <%=アイテム値 %>
   </h1>
 <%} そうでない場合、item.tagname=='tabs') { %>
   <h1 class="cm-page-tabs-title js_<%=item.tagname %>" >
     <%for(j = 0; j < item.data.items.length; j ++) { %>
       <span data-key="<%=item.data.items[j].id %>" class="<%if(item.data.index===j){ %>アクティブ<%} %>" ><%=item.data.items[j].name %></span>
     <% } %>
   </h1>
 <% } それ以外の場合{ %>
 
 <%} %>

イベントバインディングの実装

ヘッダーコンポーネント自体はAbstract.Viewクラスを継承しているので、

this.events = {}

イベントはイベントプロキシとしてルート要素にバインドすることができ、ヘッダーのイベントは通常クリックイベントです。

 setEventsParam: 関数() {
   var item, data = this.datamodel.left.concat(this.datamodel.right).concat(this.datamodel.center);
 
   (var i = 0, len = data.length; i < len; i++) {
     項目 = データ[i];
     if (_.isFunction(item.callback)) {
       this.events['click .js_' + item.tagname] = $.proxy(item.callback, this.viewScope);
     }
   }
 },

ここで注意すべき点は、イベントバインディングフックが一意のタグ名であることです。イベントバインディングを容易にするために、タグごとに「.js_tagname」クラスを動的に生成します。

古いインターフェースとの互換性

前述の通り、このコンポーネントは古いコンポーネントを改修したものなので、すでにさまざまなビジネスチームで使用されています。たとえば、元々は次のように呼ばれていました。

 this.header.set({
   タイトル: 「基本的なヘッダーの使用法」
   サブタイトル:「中間サブタイトル」、
   戻る: 真、
   バックテキスト: 'キャンセル'、
   電話: { 番号: 1111 },
   ホーム: 本当、
   検索: 真、
   btn: { title: "ログイン"、id: 'confirmBtn'、classname: 'header_r' },
   イベント: {
     戻りハンドラ: 関数 () {
       コンソールにログを出力します。
     },
     ホームハンドラ: 関数(e) {
     }
   }
 });

ここで、呼び出しメソッドは次のようになると予想されます。

this.header.set({
  左： []、
  中心： {}、
  右： [
    { タグ名: 'home'、コールバック: function () { } }、
    { タグ名: 'タグ名'、値: '値'、データ: {}、itemFn: function(){}、コールバック: function () { } }
  ]
});

こういう時、私たちは何をすべきでしょうか？もちろん、破壊なしには建設はありません。最初に破壊があり、次に建設があり、もちろんビジネスチームが変更を加える必要があります。！！すると容赦なく批判されたので、インターフェースを互換性のあるものにした
古いコンポーネントを改修する場合、インターフェースの互換性は必須です。基盤となるメカニズムが中断され、その中断によって破壊的な結果が生じる可能性がない限り、インターフェースを変更することはお勧めしません。
ここでは、新しいインターフェースが上で呼び出され、古いインターフェースが下で呼び出されます。効果は次のようになります。

HTML5+CSS3 ヘッダー作成例とアップデートに関するこの記事はこれで終わりです。より関連性の高いヘッダー例コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: dockerを使用してGrafana+Prometheus構成をデプロイする

>>: Webフロントエンド開発エンジニアが習得すべきコアスキル