Vue 深入学习 1—mustache 模板引擎原理

 <ul id="list"></ul> <script>        var arr = [            {"name":"张三", "age":12, "sex":"男"},            {"name":"李四", "age":13, "sex":"女"},            {"name":"王五", "age":14, "sex":"女"},            {"name":"赵六", "age":15, "sex":"男"},        ]        var list = document.getElementById('list');        // jion法——遍历arr数组，每遍历一项，就将HTML 字符串添加到list 中        for(let i = 0; i<arr.length; i++){            list.innerHTML += [                '<li>',                '    <div class="hd">'+ arr[i].name +'</div>',                '    <div class="bd">',                '        <p>姓名：'+ arr[i].name +'</p>',                '        <p>年龄：'+ arr[i].age +'</p>',                '        <p>性别：'+ arr[i].sex +'</p>',                '    </div>',                '</li>'            ].join('')        }        // 反引号法——遍历arr数组，每遍历一项，就将HTML 字符串添加到list 中        for(let i = 0; i<arr.length; i++){            list.innerHTML += `                <li>                    <div class="hd"> ${arr[i].name} </div>                    <div class="bd">                        <p>姓名：${arr[i].name}</p>                        <p>年龄：${arr[i].age }</p>                        <p>性别：${arr[i].sex }</p>                    </div                </li>            `;        }</script>

<script>        // 模板        var templateStr =  '<h1>今天我买了一辆{{thing}},{{money}}W,很{{mood}}</h1>';        // 数据        var data = {            thing: '兰博基尼',            money: 50,            mood: '开心'        };        // 1.使用正则实现简单数据填充，正则中的 g 表示全局，把'你'替换成 '我'        // console.log('你很帅，你很有钱'.replace(/你/g,'我'));        // 2.最简单的模板引擎实现机理，利用正则表达式中的replace()方法        //   replace()的第二个参数$1 可以是一个函数，这个喊啊书提供的东西的参数就是$1       function render(templateStr, data){           return templateStr.replace(/\{\{(\w+)\}\}/g,function(findStr, $1){               return data[$1];           });       }       var result = render(templateStr, data);       console.log(result);</script>

// tokens:[  ["text",  "< h1 >我买了一辆"],  ["name",  ”thing“],  ["text",  ","],  ["name",  ”money“],    ["text",  "W< /h1 >"],]

// nestTokens.jsexport default (tokens) => {  const nestTokens = []  const stack = []  let collector = nestTokens // 一开始让收集器 collector 指向最终返回的数组 nestTokens  tokens.forEach(token => {    switch (token[0]) {      case '#':        stack.push(token)        collector.push(token)        collector = token[2] = [] // 连等赋值        break      case '/':        stack.pop(token)        collector = stack.length > 0 ? stack[stack.length-1][2] : nestTokens        break;      default:        collector.push(token)        break    }  })  return nestTokens}