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

EJS

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

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

インストール

1
$ npm install ejs

特徴

  • で制御フロー <% %>
  • エスケープ出力<%= %>(エスケープ機能設定可能)
  • エスケープされていない生の出力 <%- %>
  • -%>終了タグ付きの改行トリミングモード ('newline slurping')
  • による制御フローの空白削除モード (すべての空白を丸める) <%_ _%>
  • カスタム区切り文字 (例: の<? ?>代わりに使用<% %>)
  • 含む
  • クライアント側のサポート
  • 中間 JavaScript の静的キャッシュ
  • テンプレートの静的キャッシュ
  • 準拠エクスプレスビューシステム

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

オプション

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

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

タグ

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

完全な構文ドキュメントについては、 docs/syntax.md.

含む

どちらか絶対パスでなければならない、または、そうでない場合は、とテンプレートへの相対として想定している含んでincludeコール。たとえば、あなたが含めている場合./views/user/show.ejsから./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ジェイクは、グローバルにインストールされていない場合)。

これらのファイルの 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です。