源码解析-mastache

模板引擎

数据变为视图的方式

1.纯dom：笨拙，没有实战价值
在这里插入图片描述

2.数组join：本质是字符串
在这里插入图片描述

es6的反引号法：es6中新增的${xxx}
模板引擎：将数据变为视图最优雅的解决方案

简介

mustache是最早的模板引擎库，底层实现机理为后续模板引擎的发展提供了崭新的思路

mustache基本使用

引入mustache库.v4.0.1支持模块引入
使用模板语法

遍历数组

简单数据循环

    var templateStr2 = `
    <ul>
    {{#fruits}}
        <li>{{.}}</li>
    {{/fruits}}
    </ul>
     `
     var data2 = {
         fruits: ['apple', 'strawberry', 'banana', 'pear']
     }
     var domStr2 = Mustache.render(templateStr2, data2);
     list5.innerHTML = domStr2;

2.复杂数据循环

        var list3 = document.getElementById('mustacheLoop');
        var templateStr = `
        <ul>
        {{#arr}}
            <li>
                <div class='hd'>{{name}}的个人信息<div>
                <div class='bd'>
                    <p>姓名：{{name}}</p>
                    <p>年龄：{{age}}</p>
                    <p>性别：{{sex}}</p>
                </div>
            </li>
        {{/arr}}
        </ul>
         `;
        var data = {
            arr : [{
            'name': 'Xiaoming',
            'age': 12,
            'sex': 'man'
        }, {
            'name': 'Xiaohong',
            'age': 14,
            'sex': 'female'
        }, {
            'name': 'Xiaoqiang',
            'age': 16,
            'sex': 'man'
        }]
        };
        var domStr = Mustache.render(templateStr, data);
        list3.innerHTML = domStr;

3.数组嵌套

var templateStr3 = `
        <ul>
        {{#arr}}
            <li>
                <div class='hd'>{{name}}的个人信息<div>
                <div class='bd'>
                    <p>姓名：{{name}}</p>
                    <p>年龄：{{age}}</p>
                    <p>性别：{{sex}}</p>
                    <p>爱好:
                      <ol>
                        {{#hobbits}}
                        <li>{{.}}<li>
                        {{/hobbits}}
                      </ol>
                    </p>
                </div>
            </li>
        {{/arr}}
        </ul>
        `
        var data3 = {
            arr: [{
                'name': 'Xiaoming',
                'age': 12,
                'sex': 'man',
                hobbits: ['singing', 'dancing', 'riding']
            }, {
                'name': 'Xiaohong',
                'age': 14,
                'sex': 'female',
                hobbits: ['play game', 'painting', 'reading']
            }, {
                'name': 'Xiaoqiang',
                'age': 16,
                'sex': 'man',
                hobbits: ['writing', 'cooking', 'shopping']
            }]
        };
        var domStr3 = Mustache.render(templateStr3, data3);
        list6.innerHTML = domStr3;

4.非循环

        var list4 = document.getElementById('mustacheNoLoop');
        var templateStr1 = `
        <h1>this is {{type}} {{method}}</h1>`;
        var data1 = {
            type: 'no loop',
            method: 'mustache'
        }
        var domStr1 = Mustache.render(templateStr1, data1);
        list4.innerHTML = domStr1

布尔值

//布尔值
        var templateStr4 = `
        {{#show}}
        <h1>{{showMessage}}</h1>
        {{/show}}
        {{#hidden}}
        <h1>{{hideMessage}}</h1>
        {{/hidden}}
        `;
        var data4 = {
            show: true,
            hidden: false,
            showMessage: 'show is true',
            hideMessage: 'hidden is false'
        };
        var domStr4 = Mustache.render(templateStr4, data4);
        list7.innerHTML = domStr4;

mustache的底层核心机理

最简单的模板引擎实现机理

利用正则表达式中的replace()方法,匹配进行替换

 let temp = '<h1> today is {{year}}-{{month}}-{{day}}</h1>';
        let da = {
            year: new Date().getFullYear(),
            month: new Date().getMonth() + 1,
            day: new Date().getDate()
        };

        function render(template, data) {
            return template.replace(/\{\{(\w+)\}\}/g, function(findstr, $1) {
                return data[$1];
            });
        }
        let res = render(temp, da);
        console.log(res);