ホームページ > 記事 > ウェブフロントエンド > ハンドルバーを使用してバックエンドのコンポーネント化を実装する_html/css_WEB-ITnose
ハンドルバーを使用してバックエンドのコンポーネント化を実装する_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:50:191132ブラウズ
バックエンドのコンポーネント化の極意をマスターしたようです^_^
基本的な説明 (Exres とハンドルバーを使用したことのある人は読み飛ばしてください): ハンドルバー エンジンExpress では次のようにページが生成されます:
/* layout.hbs * 主模板，所有的的页面都将替换"{{{body}}}"，"{{}}"相当于占位符，由数据进行替换 */<!DOCTYPE html><html> <head> <title>{{title}}</title> </head> <body> {{{body}}} </body></html>/* index.hbs * 单个页面模板，这里以首页为例。"{{>}}"表示引用其他模板来替换，这里引用名为"partial"的模板 */<div>index</div>{{>partial}}/* partial.hbs * 一个分页文件，被其他模板引用，分页之间也可以互相引用。 */<div>123</div>/* index.html * 当浏览器请求index.html时，经过handlebars模板引擎处理后生成的页面 */ <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div>index</div> <div>123</div> </body> </html> 実装ステップ 1: テンプレート
React の人気は「コンポーネント化」の概念が生まれ、その勢いはますます高まっていますが、コンポーネント化は開発中に再利用性の高いコードを提供し、作業負荷とバグを大幅に軽減するため、確かに推進する価値があります。例を挙げてみましょう。
<ul class="titles border" id="navigator"> <li class="title">标题1</li> <li class="title">标题2</li> <li class="title">标题3</li></ul>
この HTML コードは、ctrl-c、ctrl-v を使用して複数のページで使用されます。使いたいページを選択します。 2 つの問題が発生します。 1. コードの重複の増加 (プログラマにとって Ctrl-C と Ctrl-V はタブーであるべきです) もちろん、これが最も重要なことではありません。つまり、保守性が低いことです。ここで「タイトル 1」を「タイトル 0」に変更したい場合、完全な検索と置換を実行することしかできません。これは面倒なだけでなく、エラーも発生しやすくなります。
テンプレート テクノロジを使用すると、この問題はハンドルバーに記述してページングにし、このコードを必要とするページがこのページングを参照するようにすれば簡単に解決できます。変更したい場合は、ページングを直接変更します。ハンドルバーを例に挙げます。
//navigator.hbs<ul class="titles border" id="navigator"> <li class="title">标题1</li> <li class="title">标题2</li> <li class="title">标题3</li></ul>//在index.hbs中引用{{>navigator}}
なぜハンドルバーなのか?この記事で使用されているバックエンド テンプレート エンジンはすべて、例としてハンドルバーを使用しています。その理由は、前回 Qunar フロントエンド チームの node.js に関する技術的な共有を聞いたときに、彼らがハンドルバーに基づいて実装した小さな機能を披露していたからです。ページングで参照するcssファイルをすべてheadに入れることができます。私はこの小さな機能にずっと憧れていましたが、最近まで「コンポーネント化」という概念と合わせて考えていたところ、この機能がバックエンドのコンポーネント化を実現するのに非常に役立つことがわかりました。ハンドルバーについても少し調べたことがあったので、ハンドルバーを使って「部品化」を図ってみました。
実装ステップ 2: パッケージング
これは完璧ですか?いや～いや～いや～ 上記のHTMLコードにはスタイルがありますが、w3cの仕様ではそのスタイルをcssファイルに記述する必要があります。当然、次の 2 つの解決策が思い浮かびます。
- ページングにリンク タグを追加して、必要なスタイルを導入する HTML コードのあらゆる場所にリンク タグを散在させるとどのような感じになるかを考えてください。生成されたページは維持するのが難しく、ブラウザのレンダリング速度にも影響します。
- ページングに必要なスタイルをパブリック スタイル ファイルに配置することは、現在私たちのプロジェクトでよく行われている方法であり、多くのページが無駄なスタイルを参照していることが明らかです。この欠点は、特にプロジェクトが大規模になるとより顕著になります。 したがって、最良の解決策はオンデマンドでロードし、参照されるコンポーネントに必要なスタイルのみをロードすることです。もちろん、スタイル ファイルがページごとに細かく分割されている場合、リクエストの数は増加しますが、影響はそれほど大きくありません。最適化したい場合は、圧縮してマージすることもできます。これについては後ほど説明します。 handlerbas の一般的な拡張メソッドは、ヘルパーを作成することです。
//app.jshbs.registerHelper('css', function(str, option) { //在上下文中创建一个数组用来保存该页面需要用到的css文件 this.cssList = this.cssList || []; this.cssList.push(str);}); このヘルパーの機能は、登録することです。 「 css 」という名前のヘルパーは、ページングで使用される CSS ファイル アドレスを保存するのに役立ちます。次に、メイン テンプレート レイアウトの head タグ部分にある cssList 配列をループし、ロードします。
//layout.hbs<head> <title>{{title}}</title> {{#each cssList}} <link rel="stylesheet" href="{{this}}" media="screen" title="no title" charset="utf-8"> {{/each}}</head>... 同時に、元のページングが
//navigator.hbs{{css '/stylesheets/components/navigator.css'}}<ul class="titles border" id="navigator"> <li class="title">标题1</li> <li class="title">标题2</li> <li class="title">标题3</li></ul> に変更されます。 上に書いたように、これはロジックのない単純な静的コンポーネントです。一部のコンポーネントには、クリック イベントの処理や操作可能なインターフェイスの外部への公開など、インタラクティブな効果がある場合があります。その場合、それを実装するには JS ロジックが必要です。
実装ステップ 3: ロジック
実際、最初にヘルパーを登録し、それをメインのテンプレート レイアウトに追加します。オリジナルのページング。具体的なコードは次のとおりです。
//app.jshbs.registerHelper('js', function(str, option) { this.jsList = this.jsList || []; this.jsList.push(str);});
//layout.hbs...<body> {{{body}}} {{#each jsList}} <script src="{{this}}" charset="utf-8"></script> {{/each}}</body>
//navigator.hbs{{css '/stylesheets/components/navigator.css'}}{{js '/javascripts/components/navigator.js'}}<ul class="titles border" id="navigator"> <li class="title">标题1</li> <li class="title">标题2</li> <li class="title">标题3</li></ul> これで、css、js、html が独立したコンポーネントにカプセル化されましたが、まだ問題があります。コンポーネントaがpublic.cssファイルとa.cssファイルを参照し、コンポーネントbがpublic.cssファイルとb.cssファイルを参照している場合、上記の方法によれば、先頭に同じリンクタグが2つ書かれることになります。コンポーネントが依存するものは、より多くの重複タグが存在します。これは確かに私たちが見たいものではありません。
実装ステップ 4: 依存関係
この問題を解決するには、同じことを繰り返して、先ほどの 2 つのヘルパーを変更するだけです。
//app.jshbs.registerHelper('css', function(str, option) { var cssList = this.cssList || []; if(cssList.indexOf(str)<0) { cssList.push(str); } this.cssList = cssList.concat();});hbs.registerHelper('js', function(str, option) { var jsList = this.jsList || []; if(jsList.indexOf(str)<0) { jsList.push(str); } this.jsList = jsList.concat();});
最終的に生成されたページのスクリーンショット:
実装ステップ 5: マージ
最適化の最後のステップ。リクエストを減らすために、さまざまなコンポーネントに必要なリソース ファイルを結合できます。ここではプラグインローダーを推奨します。
サンプルコードのダウンロードアドレス
上記はバックエンドでのコンポーネント化をテンプレートを使って実装する検討についてですが、実装には問題ありませんが、現状新規プロジェクトがないので実際のプロジェクトで使えるかは分かりません。それは他の「穴」をもたらすでしょう。興味のある友達は、使用後に私とコミュニケーションをとることを歓迎します~
ブログ: http://yalishizhude.github.io
著者: Aris Zhude