vue源码-mustache模板引擎（一）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

一、什么是模板引擎

模板引擎是将数据转变为视图最优雅的方案。

二、四种曾经出现的数据变为视图的方法

• 纯DOM法（没有使用价值）

<ul id="list"></ul>
<script>
    var arr = [
        { "name": "小明", "age": 12, "sex": "男" },
        { "name": "小绿", "age": 15, "sex": "男" },
        { "name": "小红", "age": 13, "sex": "女" }
    ];
    var list = document.getElementById('list');
    for (let i = 0; i < arr.length; i++) {
        let oLi = document.createElement('li');
        let hdDiv = document.createElement('div');
        
        oLi.innerText = arr[i].name + '基本信息';
        hdDiv.innerText ='年龄：'+ arr[i].age
        list.appendChild(oLi)
        list.appendChild(hdDiv)
        
    }
</script>

• 数组join法（较为麻烦）

for (let i = 0; i < arr.length; i++) {
    // 按住滚轮往下拖
    list.innerHTML += [
        '<li>',
        '    <div class="hd">'+arr[i].name+'的基本信息</div>',
        '    <div class="bd">',
        '        <p>年龄：'+arr[i].age+'</p>',
        '        <p>姓名：'+arr[i].name+'</p>',
        '        <p>性别：'+arr[i].sex+'</p>',
        '    </div>',
        '</li>',
    ].join('')
}

• ES6的反引号法 —— ES6中新增的 ${a}语法糖，很好用

 for (let i = 0; i < arr.length; i++) {
    list.innerHTML += ` <li>
        <div class="hd">${arr[i].name}的基本信息</div>
        <div class = "bd">
            <p>年龄：${arr[i].age}</p>
            <p>姓名：${arr[i].name}</p>
            <p>性别：${arr[i].sex}</p>
        </div>
    </li>
    `;
}

• 模板引擎（最优雅的方案）

三、mustache用法

1、mustache库简介

• 官网git：github.com/janl/mustac…
• mustache是“胡子”的意思，因为它的嵌入标记{{}}非常像胡子；
• {{}}的语法也被Vue沿用；
• mustache是最早的模板引擎库，比Vue诞生的早，它的底层实现机理在当时是非常有创造性的、轰动性的，为后续模板引擎的发展提供了崭新的思路。

2、mustache库基本使用

必须要引入mustache库，可以在bootcdn.cn上找到它。

• mustache基本使用 - 不循环

<div id="list"></div>
// 引入
<script src="./jslib/mustache.js"></script>
<script>
    var templateStr = `
        <h1>我买了一个{{thing}}，我很{{mood}}</h1>
    `;
    var data = {
        thing:"电脑",
        mood:"快乐"
    };
    var domStr = Mustache.render(templateStr, data);
    //上树
    var list = document.getElementById('list');
    list.innerHTML = domStr

</script>

• mustache基本使用 - 循环简单数组

var templateStr = `
    <h1>
        {{#arr}}
            <li>{{.}}</li>
        {{/arr}}
    </h1>
`;
var data = {
    arr:['a','b','c','d']
};

• mustache基本使用 - 循环对象数组

<ul>
    {{#arr}}
        <li>
            <div class="hd">{{name}}的基本信息</div>
            <div class = "bd">
                <p>年龄：{{age}}</p>
                <p>姓名：{{name}}</p>
                <p>性别：{{sex}}</p>
            </div>
        </li>
    {{/arr}}
</ul>

• mustache基本使用 - 嵌套数组

var templateStr = `
    <h1>
        {{#arr}}
            {{name}}的爱好是：
            <ol>
                {{#hobbies}}
                    <li>{{.}}</li>
                {{/hobbies}}
            </ol>
        {{/arr}}
    </h1>
`;
var data = {
    arr: [
        { "name": "小明", "age": 12, "sex": "男", hobbies: ['游戏', '改bug', '跑步'] },
        { "name": "小绿", "age": 15, "sex": "男", hobbies: ['游戏', '羽毛球', '学前端'] },
        { "name": "小红", "age": 13, "sex": "女", hobbies: ['游戏', '敲代码', '睡觉'] }
    ]
};

• mustache基本使用 - 布尔值

var templateStr = `
    {{#m}}你好！{{/m}}
`;
var data = {
    m: true
};