mustache 是 “胡子”的意思娩贷，因為它的嵌入標(biāo)記 {{ }} 旋轉(zhuǎn)過來很像胡子汗销，Vue中的 {{ }} 語法也引用了mustache栽惶，這也是我深入學(xué)習(xí)的目的岔留。

1机错、原始js方式使 數(shù)據(jù) 變?yōu)?strong>視圖

 <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');
        // 純Dom法——比較笨拙蹬叭，沒有實戰(zhàn)的意義
        // jion法——遍歷arr數(shù)組乡摹，每遍歷一項预明，就將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數(shù)組缩赛，每遍歷一項，就將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>

2撰糠、mustache的底層原理

<script>
        // 模板
        var templateStr =  '<h1>今天我買了一輛{{thing}},{{money}}W,很{{mood}}</h1>';
        // 數(shù)據(jù)
        var data = {
            thing: '蘭博基尼',
            money: 50,
            mood: '開心'
        };
        // 1.使用正則實現(xiàn)簡單數(shù)據(jù)填充酥馍，正則中的 g 表示全局，把'你'替換成 '我'
        // console.log('你很帥阅酪，你很有錢'.replace(/你/g,'我'));
        // 2.最簡單的模板引擎實現(xiàn)機(jī)理旨袒，利用正則表達(dá)式中的replace()方法
        //   replace()的第二個參數(shù)$1 可以是一個函數(shù)汁针，這個喊啊書提供的東西的參數(shù)就是$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>

實現(xiàn)方式：Mustache.render(templateStr, data); templateStr模板字符串，data數(shù)據(jù)砚尽，render返回填充后dom字符串施无。

實現(xiàn)原理：第①步：將模板字符串編譯成tokens 形式，第②步：將tokens與數(shù)據(jù)結(jié)合必孤，解析成dom字符串猾骡。

3、什么是tokens?

JS的嵌套數(shù)組敷搪，模板字符串的JS表示形式兴想。

模板字符串：<h1>我買了一輛{{thing}},{{money}}W</h1>會被解析成下面的 tokens:

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

實現(xiàn)tokens思路：用到了《數(shù)據(jù)結(jié)構(gòu)》中棧的原理，遇到 # 號進(jìn)棧赡勘，遇到 / 線出棧襟企； # 號標(biāo)記的tokens，需要遞歸處理它的下標(biāo)為2的小數(shù)組狮含。遍歷傳入的 tokens 的每一個 token顽悼，遇到第一項是 # 和 / 的分別做處理，其余的做一個默認(rèn)處理几迄。大致思路是當(dāng)遍歷到的 token 的第一項為 # 時蔚龙，就把直至遇到配套的 / 之前，遍歷到的每一個 token 都放入一個容器（collector）中映胁，把這個容器放入當(dāng)前 token 里作為第 3 項元素木羹。

// nestTokens.js
export default (tokens) => {
  const nestTokens = []
  const stack = []
  let collector = nestTokens // 一開始讓收集器 collector 指向最終返回的數(shù)組 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
}

參考：https://juejin.cn/post/6954244558938963982