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

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

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

テンプレート エンジン

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

• haml 実装 Haml

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

• Coffeeup

Nodejs バージョン JQUERY テンプレート エンジンレンダリング (ビュー レンダリング) ファイル名は、「」の形式に従う必要があります。 ." (デフォルトでは、 はロードされるモジュールの名前です)。たとえば、ビュー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>

<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>

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

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

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

<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>

<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>

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

firstInCollection 最初のオブジェクトの場合、値は true です
indexInCollectionコレクション内のオブジェクト インデックス値
lastInCollection が最後のオブジェクトの場合は true
collectionLength コレクションの長さ
渡された (または生成された) ローカル変数が優先されます。ただし、親ビューに渡されたローカルは子ビューでも利用できるため、たとえば、partial('blog/post', post) でブログ投稿をレンダリングすると、ローカルの投稿が生成されますが、ビューはこれを呼び出します。この関数にはローカル ユーザーが含まれており、ブログ/投稿ビューでも使用できます。

渡された (または生成された) ローカル変数が優先されますが、親ビューに渡されたローカル変数は子ビューでも引き続き有効です。したがって、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 サイトをご覧ください。

関連する推奨事項:

Node.jsのパス処理モジュールパスの紹介

SpringBootとVue.jsでフロントエンドとバックエンド分離のファイルアップロード機能を実現

以上がNodeJSフレームワークExpressのテンプレートビュー機構の解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。