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

JavaScript テンプレート エンジンは、HTML 構造とそれに含まれるコンテンツを分離する方法です。ユーザー インターフェイスとビジネス データを分離するために作成されます。標準の HTML ドキュメントを生成できます。テンプレート エンジンは、動的 ページをレンダリングするときに文字列の結合操作を簡素化するために使用できるもの。

このチュートリアルの動作環境: Windows 10 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

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

テンプレート エンジン (ここでは特に Web 開発に使用されるテンプレート エンジンを指します) は、ユーザー インターフェイスとビジネス データ (コンテンツ) を分離するために作成されます。生成 特定の形式のドキュメントの場合、Web サイトで使用されるテンプレート エンジンは標準の HTML ドキュメントを生成します。

テンプレート エンジンは、動的ページをレンダリングする際の文字列の結合操作を簡素化するように設計されています。

JavaScript テンプレートは、HTML の構造をその中に含まれるコンテンツから分離する方法です。テンプレート システムには新しい構文が導入されることがよくありますが、特に以前に他の場所 (PHP の Twig など) でテンプレート システムを使用したことがある場合は、通常は非常に簡単に使用できます。注目すべき興味深い点は、トークン置換は通常、二重中括弧 ( {{ ... }} ) で表され、そこから Mustache と Handlebars が派生していることです (ヒント: 類似性を確認するには、横に回転させます)。

たとえば、ページ上にリストをレンダリングする必要があります:

<li>111</li>
<li>222</li>
<li>333</li>

リスト内のデータは動的に取得される配列です data=['111','222','333' ]。次に、それをコードに直接記述し、データをループしてから、各 li のデータを結合する必要があります。ページを書くことに慣れている学生は、コードロジックを HTML に直接書きたがりますが、データソースを変更すれば、異なるページコードを出力できます。たとえば、次のように記述できます。

for(var i = 0; i < this.list.length; i++){
  <li>this.list[i]</li>
}

this.list のデータを置き換えると、異なる結果が得られます。しかし、このようなコードでは、どこがロジック コードで、どこが HTML コード自体であるかを区別することはできません。そこで、いくつかのタグを追加しました。ここでは <% %> を使用してロジック コードをラップします。

<%for(var i = 0; i < this.list.length; i++){%>
  <li><%=this.list[i]%></li>
<%}%>

このコードを script タグに追加し、タイプを text/html またはその他の形式に変更し、必要に応じて dom を通じてテキスト コンテンツを取得できます。 js がこのコードを理解できれば、データ ソースを変更することでテンプレートのコンテンツを更新できます。定期的なマッチングを通じてすべての論理コードをキャプチャし、分析することができます。ここでは、js を使って new Function を使ってコードを実行するという裏技を使い、ロジックコード以外の部分を文字列に追加して実行し、実行後に最終的な文字列の結果が出力されました: var etj = function (str, data) {

var reg = /^<%.*?%>/,
    reg2 = /^(.*?)<%/,
    str2 = &#39;var str = "";&#39;,
    str = str.replace(/[\r\t\n]/g, " ");
while (str.length) {
    if (match = reg.exec(str)) {
        if (/^<%=/.exec(str)) {
            str = str.replace(match[0], &#39;&#39;);
            str2 += (&#39;str +&#39; + match[0].replace(/<%|%>/g, &#39;&#39;));
            str2 += &#39;;&#39;;
        } else {
            str = str.replace(match[0], &#39;&#39;);
            str2 += match[0].replace(/<%|%>/g, &#39;&#39;);
            str2 += &#39;;&#39;;
        }
    } else {
        match = reg2.exec(str)[1];
        str = str.replace(match[0], &#39;&#39;);
        str2 += &#39;str +="&#39;;
        str2 += match[0];
        str2 += &#39;";&#39;;
    }
}
str2 += &#39;return str;&#39;
var f = new Function(str2);
return f.call(data);

} これは私が書いたおもちゃのエンジンで、まだバグがあるので、まずはデモをしてみましょう（ロジックは単純です）。ここでは、単純な規則を使用してテンプレートを純粋な JS コードに変換します。データ ソースをインポートした後の実行結果は、必要な HTML コードです。

etj(str, {'list': [1, 2, 3]});

を実行するだけです。この方法では、HTML のロジックを JS コードに埋め込む必要がありません。

【関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

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