Nodejsテンプレートエンジンとは

nodejs テンプレート エンジンは、レンダリング テンプレートを指します。テンプレート ファイルを使用して、HTML ファイルを動的に生成できます。生成中に、特定のルールに従ってアプリケーションのデータを HTML ファイルに統合できます。一般的なノード テンプレート エンジンには、Mustache、Dust.js、doT、Jade、EJS、swig などがあります。

#このチュートリアルの動作環境: Windows7 システム、nodejs バージョン 12.19.0、DELL G3 コンピューター。

テンプレート エンジンの概要

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) マニュアル:

Mustache (5) マニュアル:

Mustache (1) は ctemplate からインスピレーションを得たもので、最初のバージョンは 2009 年末にリリースされました。テンプレート エンジンの最初のバージョンは Ruby で実装され、YAML テンプレート テキストを実行しました。採用されている主な原則は、第 1 に、「ロジックがない」ことを強調し、明示的な制御フロー ステートメントがなく、すべての制御がデータによって駆動されること、第 2 に、「ロジックとプレゼンテーションの分離」を強調し、アプリケーション ロジックをテンプレートに埋め込むことができないことです。

Handlebars

公式 Web サイト:

Handlebars.js は、によって作成された Mustache テンプレート言語です。クリス・ワンストラスの拡張機能。 Handlebars.js と Mustache はどちらも、ビューとコードを分離したロジックフリーのテンプレート言語です。

一般的に、Handlebars.js テンプレートの構文は Mustache テンプレートのスーパーセットです。

基本的な構文については、Mustache のヘルプ ページを参照してください:

ハンドルバーを使用すると、テンプレートをプリコンパイルし、 JavaScript コードに組み込まれているため、起動時間が短縮されます。

Handlebars が Mustache と互換性がない理由のいくつか:

* Handlebars は、コンパイル時にこの機能を有効にするために compat フラグを設定する必要がない限り、デフォルトでは再帰的検索を実行しません。ユーザーは、このフラグを有効にするとパフォーマンスにコストがかかることに注意する必要があります。

* オプションの Mustache スタイルのラムダ式はサポートされていません。

* 代替区切り文字はサポートされていません

Dust.js

公式 Web サイト:

Dust は、ctemplate 言語スタイルを継承する Javascript テンプレート エンジンで、サーバーとブラウザ上で非同期に実行されるように設計されています。

他のテンプレート エンジンと比較すると、Dust は非論理的ではなく、ロジックが少ないだけです。

##Dust テンプレートに任意の Javascript を記述することはできません。ただし、比較、より小さい/より大きい、存在/不在などの基本的な論理演算子はまだあります。これにより、テンプレートの読みやすさとデータ制御のバランスが取れます。

## Dust は、ロジックをデータ モデルに移行することを奨励します。モデル内で関数を作成し、テンプレートから呼び出すことができるため、ロジックを煩雑にすることなく、テンプレートのレンダリング方法を完全に制御できます。

#*非同期テンプレートの読み込み、レンダリング、ストリーミング。したがって、テンプレートを事前にロードする必要はありません。

##結合可能なテンプレートは、部分インクルージョンと動的テンプレート ブロックをサポートし、テンプレートを結合して手動でレイアウトを構築します。

## HTML は安全であり、形式に依存しません。 Dust はデータを安全にエスケープすることで、クロスサイト スクリプティング攻撃を防ぎます。

＃＃＃*ハイパフォーマンス。パフォーマンスと機能性のバランスを保ちます。 Mustache ほど高速ではありませんが、非同期であるため、大きなテンプレートをより高速にレンダリングできます。

## Dust は JavaScript で動作します。

Underscore.js

公式 Web サイト:

Underscore は、組み込みオブジェクトを拡張しない、便利な関数型プログラミング ヘルパーのコレクション。

Underscore は 100 を超える関数を提供し、マップ、フィルター、呼び出しなどの機能に加え、関数バインディング、JavaScript テンプレート、高速インデックス作成、詳細な等価性テストなどをサポートします。

doT

公式 Web サイト:

doT は最も簡単なテンプレートではありません

* テンプレート エンジンをクライアント側とサーバー側の両方で使用する必要がある場合

* テンプレートに巨大なロジックが必要で、アプリケーションをすばやく実行する クイック

## プリコンパイルされたテンプレートが必要な場合

#Jade

公式 Web サイト:

このテンプレート エンジンを使用すると、記述するコードが減り、開発が容易になります。ただし、Node.js 環境で使用する場合は、ファイルをまず HTML に変換してから Jade に変換する必要があるため、時間がかかります。

EJS

公式 Web サイト:

EJS は、デフォルトのテンプレート言語です。 CanJS: Observe によるリアルタイム バインディングの使用を提供します。 EJS は非常に使いやすく、テンプレートに必要な HTML と、動的な動作を表すいくつかのマジック タグを記述するだけです。 JES はブロック機能をサポートしていません。

swig

Swig には抽象 HTML 構文はありませんが、Swig を使用して Angular.js の構文を入力し、ブロック関数をサポートできます。

ノード関連の知識の詳細については、

nodejs チュートリアル

を参照してください。 ！

以上がNodejsテンプレートエンジンとはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。