素晴らしいコミュニティモジュール

EJS

埋め込まれたJavaScriptテンプレート

ビルドステータス 依存関係の開発 既知の脆弱性

インストール

1
$ npm install ejs

特徴

  • 制御フロー <% %>
  • <%= %>(エスケープ機能を構成可能)でエスケープされた出力
  • エスケープされていない生の出力 <%- %>
  • -%>終了タグ付きの改行トリムモード(「改行の丸呑み」)
  • ホワイトスペース-制御フローのトリムモード(すべてのホワイトスペースをスラップ) <%_ _%>
  • カスタム区切り文字(例:の<? ?>代わりに使用<% %>
  • 含まれています
  • クライアント側のサポート
  • 中間JavaScriptの静的キャッシュ
  • テンプレートの静的キャッシュ
  • Expressビューシステムに準拠

1 2 3
<% if (user) { %> <h2><%= user.name %></h2> <% } %>

https://ionicabizau.github.io/ejs-playground/でEJSをオンラインでお試しください

使用法

1 2 3 4 5 6 7 8 9 10
let template = ejs.compile(str, options); template(data); // => Rendered HTML string ejs.render(str, data, options); // => Rendered HTML string ejs.renderFile(filename, data, options, function(err, str){ // str => Rendered HTML string });

ejs.render(dataAndOptions);1つのオブジェクトですべてを渡す場所を使用することもできます。その場合、渡されたすべてのオプションのローカル変数になります。ただし、同じオプションを追加すると、コードが破損する可能性があることに注意してください。名前をデータオブジェクトのプロパティの1つとして使用するため、このショートカットの使用はお勧めしません。

オプション

  • cache コンパイルされた関数はキャッシュされ、必要です filename
  • filename レンダリングされるファイルの名前renderFile()。使用しcacheいる場合は不要ですキーキャッシュおよびインクルードに使用されます。
  • root インクルードのプロジェクトルートを絶対パス(/file.ejs)で設定します。
  • context 関数実行コンテキスト
  • compileDebugfalseデバッグインストルメンテーションがコンパイルされていない 場合
  • client の場合true、EJSランタイム(ejs.min.jsをロードせずにブラウザーでレンダリングできる関数をコンパイルします
  • delimiter 開閉用の山かっこで使用する文字
  • debug 生成された関数本体を出力します
  • strict に設定するとtrue、生成された関数は厳密モードになります
  • _withwith() {}コンストラクト を使用するかどうか使用する場合false、ローカルはlocalsオブジェクトに格納されます。false厳密モードに設定します。
  • localsNamewithデフォルトを 使用しない場合にローカル変数を格納するオブジェクトに使用する名前locals
  • rmWhitespace 先頭と末尾の空白を含む、削除しても安全な空白をすべて削除します。また-%>、すべてのスクリプトレットタグに対して、より安全なバージョンの行の丸呑みを有効にします(行の途中でタグの新しい行を削除しません)。
  • escape<%=構築で 使用されるエスケープ関数。レンダリングで使用され.toString()、クライアント関数の生成で編集されます(デフォルトではXMLをエスケープします)。
  • outputFunctionName スクリプトレットタグ内に出力を出力する関数の文字列(「echo」や「print」など)に設定します。

このプロジェクトはJSDocを使用します。完全なパブリックAPIドキュメントについては、リポジトリのクローンを作成して実行しnpm run docます。これにより、適切なオプションを指定してJSDocが実行され、ドキュメントがに出力されout/ます。パブリックAPIドキュメントとプライベートAPIドキュメントの両方が必要な場合は、npm run devdoc代わりに実行してください。

タグ

  • <% 'Scriptlet'タグ、制御フロー用、出力なし
  • <%_ 'Whitespace Slurping' Scriptletタグ、その前のすべての空白を削除します
  • <%= 値をテンプレートに出力します(エスケープ)
  • <%- エスケープされていない値をテンプレートに出力します
  • <%# コメントタグ、実行なし、出力なし
  • <%% リテラル「<%」を出力します
  • %%> リテラル '%>'を出力します
  • %> プレーンな終了タグ
  • -%> トリムモード( 'newline slurp')タグ、改行に続いてトリム
  • _%> 'Whitespace Slurping'終了タグ、その後のすべての空白を削除します

完全な構文ドキュメントについては、を参照してください。 docs/syntax.md

含まれています

インクルードは絶対パスである必要があります。そうでない場合は、include呼び出しのテンプレートからの相対パスと見なされます。たとえば、./views/user/show.ejsfrom./views/users.ejsをインクルードする場合は、を使用します<%- include('user/show') %>

を使用していない限りfilenameinclude呼び出しでテンプレートオプションを指定する必要がありますrenderFile()

<%-HTML出力を二重にエスケープしないように、インクルードで生の出力タグ(を使用することをお勧めします。

1 2 3 4 5
<ul> <% users.forEach(function(user){ %> <%- include('user/show', {user: user}) %> <% }); %> </ul>

インクルードは実行時に挿入されるため、include呼び出しのパスに変数を使用できます (たとえば<%- include(somePath) %>)。最上位のデータオブジェクトの変数はすべてのインクルードで使用できますが、ローカル変数を渡す必要があります。

注:インクルードプリプロセッサディレクティブ(<% include user/show %>)は引き続きサポートされます。

カスタム区切り文字

カスタム区切り文字は、テンプレートごとに、またはグローバルに適用できます。

1 2 3 4 5 6 7 8 9 10 11
let ejs = require('ejs'), users = ['geddy', 'neil', 'alex']; // Just one template ejs.render('<?= users.join(" | "); ?>', {users: users}, {delimiter: '?'}); // => 'geddy | neil | alex' // Or globally ejs.delimiter = '$'; ejs.render('<$= users.join(" | "); $>', {users: users}); // => 'geddy | neil | alex'

キャッシング

EJSには、テンプレートのレンダリングに使用される中間JavaScript関数をキャッシュするための基本的なインプロセスキャッシュが付属しています。ノードのlru-cacheライブラリを使用して、LRUキャッシュを簡単にプラグインできます。

1 2 3
let ejs = require('ejs'), LRU = require('lru-cache'); ejs.cache = LRU(100); // LRU cache with 100-item limit

EJSキャッシュをクリアする場合は、を呼び出しejs.clearCacheます。LRUキャッシュを使用していて、別の制限が必要ejs.cacheな場合は、LRUの新しいインスタンスにリセットするだけです。

カスタムファイルローダー

デフォルトのファイルローダーはですfs.readFileSync。カスタマイズする場合、ejs.fileLoaderを設定できます。

1 2 3 4 5 6
let ejs = require('ejs'); let myFileLoad = function (filePath) { return 'myFileLoad: ' + fs.readFileSync(filePath); }; ejs.fileLoader = myFileLoad;

この機能を使用すると、テンプレートを読み取る前にテンプレートを前処理できます。

レイアウト

EJSは特にブロックをサポートしていませんが、次のようにヘッダーとフッターを含めることでレイアウトを実装できます。

1 2 3 4 5 6 7 8
<%- include('header') -%> <h1> Title </h1> <p> My page </p> <%- include('footer') -%>

クライアント側のサポート

最新リリースに移動し、ダウンロードする./ejs.jsまたはダウンロードします ./ejs.min.js。または、リポジトリのクローンを作成して実行することによりjake build(または$(npm bin)/jake build、jakeがグローバルにインストールされていない場合)、自分でコンパイルすることもできます

これらのファイルの1つをページに含め、ejsグローバルに利用できるようにする必要があります。

Example

1 2 3 4 5 6 7 8 9 10
<div id="output"></div> <script src="ejs.min.js"></script> <script> let people = ['geddy', 'neil', 'alex'], html = ejs.render('<%= people.join(", "); %>', {people: people}); // With jQuery: $('#output').html(html); // Vanilla JS: document.getElementById('output').innerHTML = html; </script>

Caveats

EJSのほとんどは期待どおりに機能しますが、注意すべき点がいくつかあります。

  1. Obviously、ファイルシステムにアクセスできないため、機能しejs.renderFile()ません。
  2. 同じ理由で、includeを使用しない限りsは機能しませんinclude callback。例を次に示します。

    1 2 3 4 5 6 7 8 9
    let str = "Hello <%= include('file', {person: 'John'}); %>", fn = ejs.compile(str, {client: true}); fn(data, null, function(path, d){ // include callback // path -> 'file' // d -> {person: 'John'} // Put your code here // Return the contents of file as a string }); // returns rendered string

IDE Integration with Syntax Highlighting

VSCode:DigitalBrainstemによるJavascript EJS

EJSにはいくつかの実装があります。

ライセンス

Apacheライセンス、バージョン2.0(http://www.apache.org/licenses/LICENSE-2.0)の下でライセンス供与


EJSは、JavaScriptのテンプレートの著作権2112組み込み mde@fleegix.orgを