フロントエンドのHTMLテンプレートのレンダリングツールをmustache-

なぜレンダリングツール

この問題を理解するために、我々はいくつかの例を見て：

//示例1
var b = { Id: "123", Name: "张三", Age: 14 }
var output = "学生学号：" + b.Id + " 学生名称：" + b.Name + " 学生年龄：" + b.Age

//示例2
var list = [{ Id: "123", Name: "张三", Age: 14, Class: "", SubChild: [{ Id: "123", Name: "张三", Age: 14 }] }]
var html = "";
for (var i = 0; i < list.length; i++) {
    html = html + "<div class='" + list[i].Class + "' id='" + list[i].Id + "'>" + list[i].Name
    if (list[i].SubChild) {
        html += "<div>"
        for (var j = 0; j < list[i].SubChild; j++) {
            html += "<span>" + list[i].SubChild[j].Name + "</span>"
        }
        html += "</div>"
    }
    html += "</div>"
}

1は、例えば、私たちはしばしば、この時点で、それは比較的複雑で、例えば2による問題の多くは、比較的単純な、何も、よりよい解決策を考えていないし、スプライシングが発生し、情報の場合はより多くの量より複雑なロジックは、この時間は、コードを書くことは非常に複雑で、エラーを起こしやすい、完全に混合し、保守、ページのレンダリングおよびコード・ロジックを助長されていません。どのようにより良い解決策は、シーンの二つの例が存在しますか？

テンプレートのレンダリング

私たちは、インタフェースはhtmlコードを表示するには、直接ルールの行を書き、その後、テンプレートとレンダリングツールにデータを入力することができ、そこに要件を満たすようにアウトのHTMLコードを生成するレンダリングツールがあるので、インターフェイスは維持しやすい良い論理的な分離を、表示されます。口ひげは、このようなレンダリングツールで、プロジェクト住所：https://github.com/janl/mustache.js

私たちは、簡単な例（実施例2）を見て：

// html代码
{{ #list }}
        <div class="{{Class}}" id="{{Id}}">{{ Name }}
            {{#SubChild}}
            <div>{{ Name }}</div>
            {{/ SubChild}}
    </div>
{{ /list}}

//js 代码
var list = [{ Id: "123", Name: "张三", Age: 14, Class: "1class", SubChild: [{ Id: "123", Name: "张三sub", Age: 14 },{Name:"李四"}] }]
console.time("abc");
console.log(Mustache.render(template, { list: list }))
console.timeEnd("abc");

//输出结果
<div class="1class" id="123">张三
            <div>张三sub</div>
            <div>李四</div>
</div>

上記の例から分かるように、ロジックは、同時に、また、ビューの計算時点維持することは非常に簡単であり、実現するのは非常に簡単であり、速度が非常に速いため、フロントエンドコードのレンダリングエンジンに使用するのに非常に適しています