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

EJS

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

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

インストール

1
$ npm install ejs

特徴

  • <% %>フローを制御
  • <%= %>エスケープされた出力(エスケープ機能は構成可能)
  • <%- %>エスケープされていない生の出力
  • Newline-トリムモード(「newlineslurping」) -%>終了タグ
  • ホワイトスペース- <%_ _%>を使用した制御フローのトリムモード(すべてのホワイトスペースをスラップ)
  • Custom delimiters (eg<? ?>代わりに<% %> <? ?>使用し<? ?>
  • 含まれています
  • クライアント側のサポート
  • 中間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レンダリングされるfilenameの名前renderFile()を使用している場合は不要です。 cacheによってキーキャッシュに使用され、 renderFile()使用されます。
  • rootインクルードのプロジェクトルートを絶対パス(/file.ejs)で設定します。
  • context関数実行コンテキスト
  • compileDebug falseの場合、デバッグインストルメンテーションはコンパイルされません
  • client true場合、EJSランタイム( ejs.min.js )をロードせずにブラウザーでレンダリングできる関数をコンパイルします。
  • 開閉用アングルブラケットで使用するdelimiter文字
  • debug出力生成された関数本体
  • strict trueに設定すると、生成された関数はstrictモードになります
  • _with使用するか否かwith() {}構築物。場合falseその後、地元の中に格納されるlocalsオブジェクトセットにfalse厳密モードで。
  • localsName使用していないときの名前は、ローカル変数を格納したオブジェクトに使用するwithデフォルトはlocals
  • rmWhitespace先頭と末尾の空白を含む、削除しても安全な空白をすべて削除します。また、すべてのスクリプトレットタグに対してより安全なバージョンの-%>行の丸呑みを有効にします(行の途中でタグの新しい行を削除しません)。
  • escape <%=コンストラクトで使用されるエスケープ関数。レンダリングで使用され、クライアント関数の生成で.toString()れます(デフォルトではXMLをエスケープします)。
  • outputFunctionNameスクリプトレットタグ内に出力を出力する関数の文字列(「echo」 outputFunctionNameoutputFunctionName 」など)に設定します。

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

タグ

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

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

含まれています

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

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

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

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

include実行時に挿入されるため、 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です。カスタマイズする場合は、 fs.readFileSyncを設定できます。

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 (または、jakeがない場合は$(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 callbackを使用しない限り、 includeしません。例を次に示し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を