ホームページ >ウェブフロントエンド >フロントエンドQ&A >Nodejsテンプレートエンジンとは
Nodejsテンプレートエンジンとは
- 青灯夜游オリジナル
- 2021-11-23 14:20:483610ブラウズ
nodejs テンプレート エンジンは、レンダリング テンプレートを指します。テンプレート ファイルを使用して、HTML ファイルを動的に生成できます。生成中に、特定のルールに従ってアプリケーションのデータを HTML ファイルに統合できます。一般的なノード テンプレート エンジンには、Mustache、Dust.js、doT、Jade、EJS、swig などがあります。
テンプレート エンジンの概要
Web アプリケーションで、サーバー側のコードのみを使用してクライアント側の HTML コードを記述する場合、フロントエンドとバック-end が分離されていないと、多くの作業が発生し、書かれたコードは読みにくく、保守しにくくなります。クライアントの静的 HTML ファイルのみを使用する場合、バックエンド ロジックをクライアントの HTML コードに統合することがより困難になります。 メンテナンスを容易にし、バックエンド ロジックをフロントエンド HTML コードに統合してメンテナンスを容易にするために、多くのサードパーティ開発者がさまざまな Nodejs テンプレート エンジンを開発しました。 テンプレート エンジンとは何なのか、個別に理解することができます。 テンプレート: モデル (構造)。データを設定し、さまざまなデータに基づいてさまざまなロジックを実装できます。エンジン: プロセッサー (コンパイル、実行)、そして最後に HTML コードをレンダリングしますそれでは、テンプレート エンジンについて一緒に理解しましょう。テンプレート ファイルを使用して HTML ファイルを動的に生成します。生成中に、特定のルールに従ってアプリケーションのデータを HTML ファイルに統合できます。バックグラウンドの JSP 言語に似ています。 簡単に言うと、テンプレート エンジンはテンプレートをレンダリングするものです。nodejs テンプレート エンジンの概要と比較
Mustache
公式 Web サイトを参照してください: http://mustache.github。 io/ Mustache は非常にシンプルで使いやすいテンプレート エンジンで、ロジックフリーのテンプレート エンジンとして知られており、HTML、構成ファイル、ソース コード、その他のシナリオで使用できます。 ロジックのないテンプレート エンジンと呼ばれる理由は、if ステートメント、else 条件、for ループなどの構造がないためです。タグを付けるだけで、タグを値に置き換えます。値はハッシュでもオブジェクトでもよく、とても簡単です。 Mustache テンプレートには、Mustache (1) と Mustache (5) の 2 つの定義があります。 Mustache は、Ruby、JavaScript、Python、Erlang、node.js、PHP、Perl などの主流のプログラミング言語をサポートします。 、Perl6、Objective-C、Java、Android、C、Go、Lua など。 Mustache は、TextMate、Vim、Emacs、Coda、Atom などのエディターとうまく統合することもできます。 Mustache (1) マニュアル: < http://mustache.github.io/mustache.5.html> Mustache (5) マニュアル: < http://mustache.github.io /mustache.1.html>
Handlebars
公式 Web サイト: < http://handlebarsjs.com/>Handlebars.js は、によって作成された Mustache テンプレート言語です。クリス・ワンストラスの拡張機能。 Handlebars.js と Mustache はどちらも、ビューとコードを分離したロジックフリーのテンプレート言語です。 一般的に、Handlebars.js テンプレートの構文は Mustache テンプレートのスーパーセットです。 基本的な構文については、Mustache のヘルプ ページを参照してください: < http://mustache.github.com/mustache.5.html>ハンドルバーを使用すると、テンプレートをプリコンパイルし、 JavaScript コードに組み込まれているため、起動時間が短縮されます。 Handlebars が Mustache と互換性がない理由のいくつか: * Handlebars は、コンパイル時にこの機能を有効にするために compat フラグを設定する必要がない限り、デフォルトでは再帰的検索を実行しません。ユーザーは、このフラグを有効にするとパフォーマンスにコストがかかることに注意する必要があります。 * オプションの Mustache スタイルのラムダ式はサポートされていません。 * 代替区切り文字はサポートされていませんDust.js
公式 Web サイト: < http://www.dustjs.com/> Dust は、ctemplate 言語スタイルを継承する Javascript テンプレート エンジンで、サーバーとブラウザ上で非同期に実行されるように設計されています。 他のテンプレート エンジンと比較すると、Dust は非論理的ではなく、ロジックが少ないだけです。##Dust テンプレートに任意の Javascript を記述することはできません。ただし、比較、より小さい/より大きい、存在/不在などの基本的な論理演算子はまだあります。これにより、テンプレートの読みやすさとデータ制御のバランスが取れます。
## Dust は、ロジックをデータ モデルに移行することを奨励します。モデル内で関数を作成し、テンプレートから呼び出すことができるため、ロジックを煩雑にすることなく、テンプレートのレンダリング方法を完全に制御できます。#*非同期テンプレートの読み込み、レンダリング、ストリーミング。したがって、テンプレートを事前にロードする必要はありません。
##結合可能なテンプレートは、部分インクルージョンと動的テンプレート ブロックをサポートし、テンプレートを結合して手動でレイアウトを構築します。## HTML は安全であり、形式に依存しません。 Dust はデータを安全にエスケープすることで、クロスサイト スクリプティング攻撃を防ぎます。
＃＃＃*ハイパフォーマンス。パフォーマンスと機能性のバランスを保ちます。 Mustache ほど高速ではありませんが、非同期であるため、大きなテンプレートをより高速にレンダリングできます。## Dust は JavaScript で動作します。
Underscore.js公式 Web サイト: < http://underscorejs.org/>
Underscore は、組み込みオブジェクトを拡張しない、便利な関数型プログラミング ヘルパーのコレクション。
Underscore は 100 を超える関数を提供し、マップ、フィルター、呼び出しなどの機能に加え、関数バインディング、JavaScript テンプレート、高速インデックス作成、詳細な等価性テストなどをサポートします。
doT公式 Web サイト: < http://olado.github.io/doT/>
doT は最も簡単なテンプレートではありません
* テンプレート エンジンをクライアント側とサーバー側の両方で使用する必要がある場合
* テンプレートに巨大なロジックが必要で、アプリケーションをすばやく実行する クイック
## プリコンパイルされたテンプレートが必要な場合#Jade
公式 Web サイト: < http://jade-lang.com />
このテンプレート エンジンを使用すると、記述するコードが減り、開発が容易になります。ただし、Node.js 環境で使用する場合は、ファイルをまず HTML に変換してから Jade に変換する必要があるため、時間がかかります。
EJS
公式 Web サイト: < http://ejs.co/>
EJS は、デフォルトのテンプレート言語です。 CanJS: Observe によるリアルタイム バインディングの使用を提供します。 EJS は非常に使いやすく、テンプレートに必要な HTML と、動的な動作を表すいくつかのマジック タグを記述するだけです。 JES はブロック機能をサポートしていません。swig
Swig には抽象 HTML 構文はありませんが、Swig を使用して Angular.js の構文を入力し、ブロック関数をサポートできます。
ノード関連の知識の詳細については、nodejs チュートリアル
を参照してください。 ！以上がNodejsテンプレートエンジンとはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。