ホームページ > 記事 > ウェブフロントエンド > NodeJSフレームワークExpressのテンプレートビュー機構の解析

NodeJSフレームワークExpressのテンプレートビュー機構の解析

不言オリジナル: 2018-06-30 10:15:461478ブラウズ

この記事では主に NodeJS フレームワーク Express のテンプレートビューメカニズムの分析を紹介します。これを必要とする友人に共有します。

MVC モデルについても説明します。この記事では、Express フレームワークのテンプレートとビュー (V) に関連する機能を紹介します。

テンプレートエンジン

Express は多くのテンプレートエンジンをサポートしており、一般的に使用されるものは次のとおりです:

haml 実装 Haml
haml.js の後継、および ExpressJade のデフォルトのテンプレートエンジン
Coffeeup

Nodejs バージョン JQUERY テンプレートエンジンレンダリング (ビューレンダリング) ファイル名は、「8a11bc632ea32a57b3e3693c7987c420」の形式に従う必要があります。 .4ac516df2bd3b3f39951bf63aa54a6de" (デフォルトでは、はロードされるモジュールの名前です)。たとえば、ビューlayout.ejsはビューシステムにrequire('ejs')を指示し、ロードされたモジュールはexports.compile(str, options)メソッドを出力し、Expressのテンプレートインターフェイス規約に準拠する関数を返す必要があります。また、app.register() を使用してテンプレートエンジンを他のファイル拡張子にマップして、より柔軟なテンプレートエンジンの動作を実現し、「csser.html」を ejs エンジンでレンダリングできるようにすることもできます。

次に、Jade エンジンを使用して、index.html をレンダリングします。layout:false を設定していないため、index.jade のレンダリングされたコンテンツは、body ローカル変数としてlayout.jade に渡されます。

<SPAN style="FONT-SIZE: 13px">app.get(&#39;/&#39;, function(req, res){ 
res.render(&#39;index.jade&#39;, { title: &#39;CSSer, 关注Web前端技术！&#39; }); 
}); 
</SPAN>

新しい「ビューエンジン」設定では、デフォルトのテンプレートエンジンを指定できます。jade を使用したい場合は、次のように設定できます:

<SPAN style="FONT-SIZE: 13px">app.set(&#39;view engine&#39;, &#39;jade&#39;); 
</SPAN>

そのため、次のメソッドの代わりに

<SPAN style="FONT-SIZE: 13px">res.render(&#39;index&#39;); 
</SPAN>

を使用できます。メソッド:

<SPAN style="FONT-SIZE: 13px">res.render(&#39;index.jade&#39;); 
</SPAN>

When 「ビューエンジン」を設定すると、テンプレート拡張機能がオプションになり、複数のテンプレートエンジンを組み合わせて一致させることもできます:

<SPAN style="FONT-SIZE: 13px">res.render(&#39;another-page.ejs&#39;); 
</SPAN>

Express は、各ビューのレンダリング後に適用されるビューオプション設定も提供します。レイアウトを頻繁に使用しない場合は、次のように設定できます:

<SPAN style="FONT-SIZE: 13px">app.set(&#39;view options&#39;, { 
layout: false 
}); 
</SPAN>

必要に応じて、これらの設定は後続の res.render() 呼び出しでオーバーライドできます:

<SPAN style="FONT-SIZE: 13px">res.render(&#39;csser-view.ejs&#39;, { layout: true }); 
</SPAN>

path システムのデフォルトを置き換えるには、たとえば、「ビューエンジン」を jade に設定し、「./views/mylayout.jade」という名前のレイアウトをカスタマイズする場合、次のように使用できます:

<SPAN style="FONT-SIZE: 13px">res.render(&#39;page&#39;, { layout: &#39;mylayout&#39; }); 
</SPAN>

それ以外の場合、拡張子は次のようにする必要があります。指定:

<SPAN style="FONT-SIZE: 13px">res.render(&#39;page&#39;, { layout: &#39;mylayout.jade&#39; }); 
</SPAN>

これらのパスは絶対パスにすることもできます:

<SPAN style="FONT-SIZE: 13px">res.render(&#39;page&#39;, { layout: __dirname + &#39;///www.jb51.net/mylayout.jade&#39; }); 
</SPAN>

これのより良い例は、カスタム ejs テンプレートの開始タグと終了タグです:

<SPAN style="FONT-SIZE: 13px">app.set(&#39;view options&#39;, { 
open: &#39;{{&#39;, 
close: &#39;}}&#39; 
}); 
</SPAN>

部分ビュー

Express ビューシステムは、部分ビューとコレクションビューをネイティブにサポートします。ミニビューは、主にドキュメントのフラグメントをレンダリングするために使用されます。たとえば、ビュー内のコメントをループする代わりに、部分コレクションを使用します。

<SPAN style="FONT-SIZE: 13px">partial(&#39;comment&#39;, { collection: comments }); 
</SPAN>

他のオプションやローカル変数が必要ない場合は、オブジェクトを省略して、単純にコメント配列を渡すことができます。これは同じです。上記の例のように:

<SPAN style="FONT-SIZE: 13px">partial(&#39;comment&#39;, comments); 
</SPAN>

ローカルコレクションを使用する場合、いくつかの「マジック」ローカル変数がサポートされます:

渡された (または生成された) ローカル変数が優先されますが、親ビューに渡されたローカル変数は子ビューでも引き続き有効です。したがって、partial('blog/post', post) を使用してブログログをレンダリングすると、post のローカル変数が生成されますが、この関数を呼び出すビューにはローカルユーザーが存在し、ブログ内では引き続き有効です。 /ポストビュー。 (最初の注: この翻訳には何か問題があります。アドバイスをお願いします。)

パフォーマンスのヒント: 部分コレクションを使用して長さ 100 の配列をレンダリングする場合、単純なコレクションの場合は、部分コレクションを使用する代わりにループをインライン化することができ、システムを削減できます。オーバーヘッド。

ビューのルックアップ

ビューのルックアップは、「views/user/list.jade」という名前のページビューがあるとします ('edit')。 )、ビューシステムは「views/user/edit.jade」を検索してロードしようとしますが、partial('.. /messages') は「views/messages.jade」をロードします。

ビューシステムはインデックステンプレートもサポートしているため、同じ名前のディレクトリを使用できます。たとえば、ルート内で res.render('users') を実行します。これは、「views/users.jade」または「views/users/index.jade」を指します。

上記のインデックスビューを使用する場合、partial('users') を通じて同じ名前のディレクトリから "views/users/index.jade" を参照でき、ビューシステムは "../users/" を試行します。これにより、partial('index') を呼び出す必要性が減ります。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

NodeJSフレームワークExpressのテンプレートビュー機構の解析

テンプレート エンジン

ビューのルックアップ

関連記事

テンプレートエンジン