Mustache源码解析

原理介绍

mustache 的渲染步骤分为了两步：

//1,将mustache结构模版解析为tokens数组
var tokens =  parseTemplateToTokens(templateStr)
// 2,调用 renderTemplate 函数，让tokens 数组变成 dom 字符串
var domHtml = renderTemplate(tokens, data)

• 对于如下模板，渲染步骤：

<div>
   <div class="mine">{{name}}</div>
      <ol id="me" style="color: red">
        {{#students}}
          <li>
            学生{{name}}的爱好是
            <ol>
              {{#hobbies}}
                <li>{{.}}</li>
              {{/hobbies}}
            </ol>
          </li>
        {{/students}}
      </ol>
    </div>
 </div>

• 将tokens数组组转换为相应的 html，(结合data)

var data = {
  name: '齐天大圣',
  students: [
    { name: '小明', hobbies: ['游泳', '健身'] },
    { name: '小红', hobbies: ['足球', '篮球', '羽毛球'] },
    { name: '小强', hobbies: ['吃饭', '睡觉'] }
  ]
}

转变的 html 结果如下:

   <div>
    <div class="mine">齐天大圣</div>
    <ol id="me" style="color: red">
      <li>学生小明的爱好是<ol>
          <li>游泳</li>
          <li>健身</li>
        </ol>
      </li>
      <li>学生小红的爱好是<ol>
          <li>足球</li>
          <li>篮球</li>
          <li>羽毛球</li>
        </ol>
      </li>
      <li>学生小强的爱好是<ol>
          <li>吃饭</li>
          <li>睡觉</li>
        </ol>
      </li>
    </ol>
  </div>

代码实现

参考网址：juejin.cn/post/697842…