この記事は主に EJS テンプレートのクイックスタート学習を紹介しています。編集者が非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう。Node オープンソース テンプレートには多くの選択肢がありますが、
Class
ic ASP/PHP/JSP の経験がある場合は、EJS を使用することをお勧めします。当然、EJS を使用できます。つまり、最も伝統的な方法である <%=output%> を使用して、JavaScript コードを <%...%> ブロック内に配置できます。追加 <%-output 変数は &) などの記号をエスケープしません。 Install EJS コマンドは次のとおりです:
JS call JS 呼び出す主なメソッドは 2 つあります:
ejs.compile(str, options);
// => Function
ejs.render(str, options);
// => str
ログイン後にコピー
実際、EJS は Express から独立して使用できます。たとえば、次のとおりです。
var ejs = require('')， str = require('fs').readFileSync(dirname + '/list.ejs', 'utf8');
var ret = ejs.render(str, {
names: ['foo', 'bar', 'baz']
});
console.log(ret);ログイン後にコピー
ejs.render を参照(), 最初のパラメータはテンプレートの
string
で、テンプレートは以下の通りです。
<% if (names.length) { %>
<ul>
<% names.forEach(function(name){ %>
<li foo='<%= name + "'" %>'><%= name %></li>
<% }) %>
</ul>
<% } %>ログイン後にコピー
オプションパラメータ
2 番目のパラメータはデータで、通常は
オブジェクト
です。このオブジェクトはオプションとみなすことができます。これは、データと選択内容が両方とも同じオブジェクト内にあることを意味します。
毎回ディスクを保存したくない場合は、
cache
template を使用して options.filename を設定できます。例:
var ejs = require('../')
, fs = require('fs')
, path = dirname + '/functions.ejs'
, str = fs.readFileSync(path, 'utf8');
var users = [];
users.push({ name: 'Tobi', age: 2, species: 'ferret' })
users.push({ name: 'Loki', age: 2, species: 'ferret' })
users.push({ name: 'Jane', age: 6, species: 'ferret' })
var ret = ejs.render(str, {
users: users,
filename: path
});
console.log(ret);ログイン後にコピー
cache- コンパイルされた関数はキャッシュされ、ファイル名が必要です
filename キャッシュされたキー名 - scope
function- 実行スコープ
デバッグ生成された関数の本体を出力します - compileDebug falseの場合、デバッグインストルメンテーションはコンパイルされません
- クライアント
Return- のスタンドアロンのコンパイル済み関数
inculdeコマンド
そして、必要に応じて
そうだね
通常、パブリック テンプレート、つまりインポートされたファイルを挿入するには、ファイル名オプションを設定してインクルード機能を有効にする必要があります。そうしないと、インクルードはディレクトリを認識できません。
テンプレート:
<ul>
<% users.forEach(function(user){ %>
<% include user/show %>
<% }) %>
</ul>ログイン後にコピー
EJS はコンパイルされたテンプレートをサポートします。テンプレートのコンパイル後は IO 操作がなくなり、非常に高速になり、ローカル変数を共有できます。次の例の user/show では、ejs 拡張子が無視されます。 >ロゴ、カスタマイズすることもできます。
<h1>Users</h1>
<% function user(user) { %>
<li><strong><%= user.name %></strong> is a <%= user.age %> year old <%= user.species %>.</li>
<% } %>
<ul>
<% users.map(user) %>
</ul>ログイン後にコピー
フォーマットされた出力
も利用可能です。
<ul>
<% users.forEach(function(user){ %>
<% include user/show %>
<% }) %>
</ul>ログイン後にコピー
var ejs = require('ejs');
ejs.open = '{{';
ejs.close = '}}';ログイン後にコピー
EJSはブラウザ環境にも対応しています。
ejs.filters.last = function(obj) {
return obj[obj.length - 1];
};ログイン後にコピー
EJS は
JSON
オブジェクトの複数のレイヤーを出力できるのだろうか?
ところで、一部のネチズンは、jQ マスターの John が数年前に 20 行のテンプレートを書いたというニュースを広めましたが、これは EJS に似ていますが、短くて簡潔です。
シンプルで実用的な js
テンプレート エンジン
50 行未満の js テンプレート エンジンは、さまざまな js 構文をサポートします:
<p><%=: users | last %></p>
ログイン後にコピー
"<%= xxx =%>" js ロジック コードが含まれています。 <%== xxx =%>" には、php の
echo の関数と同様に、直接出力するための変数が含まれています。 "p" は、以下の build メソッドを呼び出すときの k-v オブジェクトのパラメーターです。また、"new JTemp" を呼び出すときに別のパラメーター名に設定することもできます。
Call:
<html>
<head>
<script src="../ejs.js"></script>
<script id="users" type="text/template">
<% if (names.length) { %>
<ul>
<% names.forEach(function(name){ %>
<li><%= name %></li>
<% }) %>
</ul>
<% } %>
</script>
<script>
onload = function(){
var users = document.getElementById('users').innerHTML;
var names = ['loki', 'tobi', 'jane'];
var html = ejs.render(users, { names: names });
document.body.innerHTML = html;
}
</script>
</head>
<body>
</body>
</html>ログイン後にコピー
上記の temp が生成された後、build メソッドは複数回呼び出される場合は、HTML が生成されます。以下はテンプレート エンジンのコードです:
<script id="test_list" type="text/html">
<%=
for(var i = 0, l = p.list.length; i < l; i++){
var stu = p.list[i];
=%>
<tr>
<td<%=if(i==0){=%> class="first"<%=}=%>><%==stu.name=%></td>
<td><%==stu.age=%></td>
<td><%==(stu.address || '')=%></td>
<tr>
<%=
}
=%>
</script>ログイン後にコピー
中心となるのは、テンプレート コードを文字列を結合する関数に変換し、データを取得するたびにこの関数を呼び出すことです。 主に携帯電話(Webkit)で使用されるため、文字列結合の効率は考慮されていません。IEで使用する必要がある場合は、文字列結合メソッドをArray.push()に変更するのが最善です。
添付: connect + ejs の例。
$(function(){
var temp = new JTemp('test_list'),
html = temp.build(
{list:[
{name:'张三', age:13, address:'北京'},
{name:'李四', age:17, address:'天津'},
{name:'王五', age:13}
]});
$('table').html(html);
});ログイン後にコピー
【関連おすすめ】
1.
無料のjsオンラインビデオチュートリアル
2.
JavaScript中国語リファレンスマニュアル
3.
php.cn Dugu Jiijian (3) - JavaScriptビデオチュートリアル
以上がNode.js での EJS テンプレートの使用に関するチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
