フロントエンドテンプレートエンジンdoT.jsの使用

前言
フロントエンド開発では,バックグラウンドから返されるjsonデータに基づいてhtmlを動的に生成し,ページに挿入して表示することがしばしば必要である.最も簡単な方法は、jQueryを介してデータ接合htmlを巡回することであり、以下のようにする.

    var data = {
        list: [{
            id: 1,
            name: 'zhangsan',
            email: '[email protected]'
        }, {
            id: 2,
            name: 'lisi',
            email: '[email protected]'
        }]
    };
    var html = '';
    $.each(data.list, function(index, item) {
        html += '<tr></tr>';
        html += '<td>' + item.id + '</td>';
        html += '<td>' + item.name + '</td>';
        html += '<td>' + item.email + '</td>';
        html += '</tr>'
    });
    $('#userList').empty();
    $('#userList').html(html); 

しかし、このような接合htmlによる使用は比較的簡単な構造でよい.構造が複雑であれば、接合時に引用符間のネストにも注意しなければならないし、コードのメンテナンスも難しく、コードの可読性も悪い.そのため、テンプレートエンジンを使用すると、この問題を避けることができます.
よく使われるテンプレートエンジンにはartTemplate、Jade、Mustache、doT.js、juicerなどがありますが、この記事ではdoT.jsの使用についてのみ説明します.
概要
公式Github:https://github.com/olado/doT doT.js高速で、小型で他のプラグインに依存しません.
使用方法
コンフィギュレーションdoT.templateSettingsデフォルト設定:

doT.templateSettings = {
  evaluate:    /\{\{([\s\S]+?)\}\}/g,
  interpolate: /\{\{=([\s\S]+?)\}\}/g,
  encode:      /\{\{!([\s\S]+?)\}\}/g,
  use:         /\{\{#([\s\S]+?)\}\}/g,
  define:      /\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g,
  conditional: /\{\{\?(\?)?\s*([\s\S]*?)\s*\}\}/g,
  iterate:     /\{\{~\s*(?:\}\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\}\})/g,
  varname: 'it',
  strip: true,
  append: true,  
  selfcontained: false
};

自分の区切り文字を使用したい場合は、doT.templateSettingsの正則を自分のニーズに合わせて変更できます.
デフォルトの区切り記号のリストは次のとおりです.{{ }}:評価用(evaluate){{= }}:補間用(interpolate){{! }}:補間符号化用(encode){{# }}:コンパイル時に評価/ローカルテンプレートを含む(use){{## #}}:コンパイル時の定義(define){{? }}:条件文に使用(conditional){{~ }}:配列反復用(iterate)
その他の説明varname:テンプレートデータ参照変数名strip:空白文字を制御し、true:すべてスペースを削除します.false:スペースの保持append:パフォーマンス最適化の設定.これにより、使用しているjavascriptエンジンとテンプレートのサイズに応じて、appendをfalseに設定することで、より良い効果が得られる可能性があります.
テンプレートコンパイル関数function(tmpl, c, def) tmpl:テンプレートテキストc:カスタムコンパイル設定nullの場合doT.templateSettingsを使用def:コンパイル時に評価するデータ
デフォルトでは、この関数のコンパイルを呼び出す方法には、dataという名前のパラメータitがあります.すなわち、デフォルト構成のvarnameです.
補間(evaluation)
使い方:{{= }}テンプレートを作成します.デフォルトでは、テンプレートのデータはitを参照として使用され、構成のvarnameを変更して変数名を変更できます.

    <div>{{= it.msg }}</div>
    <div>{{= it.code }}</div>

次の操作を行います.

var message = {
    msg: 'Hello world.',
    code: 200
};
//  doT.template(tplText)  ，tplText     
var tpl = doT.template($("#testTpl").text()); //               ，  $("#testTpl").html()
//      html
var html = tpl(message);
console.log(html); 

結果出力:

Hello world.
 
200
 

評価(evaluate)
使用法:{{ }}で、式でjsスクリプトを使用できます.
テンプレートの作成:

    {{ if (it.status == true) { }}
        <div class="success">    </div>
    {{ } else { }}
        <div class="error">    </div>
    {{ } }}

次の操作を行います.

var result = {
    status: true,
    error: ''
};
var tpl = doT.template($("#testTpl2").text());
var html = tpl(result);
console.log(html);

結果出力:

条件文(conditional)
使い方:{{? }}前回の評価例のテンプレートは条件判断であり、{{? }}でテンプレートを書き換えて同じ効果を達成することができます.

    {{? it.status == true }}
        <div class="success">    </div>
    {{?? }}
        <div class="error">    </div>
    {{? }}

メソッドを用いて評価(evaluate)例を参照し、最後の出力htmlは同じである.
配列反復(iterate)
使い方:{{~ }}テンプレートの作成:

    {{~ it.list:item:index }}
        <tr>
            <td>{{= index + 1 }}</td>
            <td>{{= item.name }}</td>
            <td>{{= item.email }}</td>
        </tr>
    {{~ }}

次の操作を行います.

var data = {
    status: true,
    msg: 'success',
    list: [{
        id: 1,
        name: 'zhangsan',
        email: '[email protected]'
    }, {
        id: 2,
        name: 'lisi',
        email: '[email protected]'
    }]
};
var tpl = doT.template($("#testTpl3").html());
var html = tpl(data);
console.log(html);

結果出力:

 1 zhangsan [email protected]    2 lisi [email protected] 

コンパイル時にテンプレートとコンパイル時定義を含める
使い方:{{# }}と{{## #}}テンプレートの作成:

           <h2>  ：{{= it.title }}</h2>



    <h2>    'testHeaderTpl'    ：</h2>
    {{#def.header }}
    {{= it.content }}
    {{#def.injectIntoHeader || '' }}



    <h2>    ：</h2>
    {{#def.body }}
    <h2>        </h2>
    {{##def.injectIntoHeader:
        <div>    ：{{= it.dealine }} </div>
    #}}

次の操作を行います.

var work = {
    title: '         ',
    content: '                 ',
    dealine: '2017-11-25 23:00'
};
var def = {
    header: $('#testHeaderTpl').text(),
    body: $('#testPageTpl5').text()
};
var tpl = doT.template($("#testBodyTpl").html(), null, def);
var html = tpl(work);
console.log(html);

結果出力:

    ：
  
    'testHeaderTpl'    ：
  
  ：         
                     
    ：2017-11-25 23:00 
   
        
 

詳細については、公式の説明を参照してください.http://olado.github.io/doT/
リファレンスhttp://olado.github.io/doT/
原文:https://www.lwhweb.com/2017/11/25/dot-js/