阅读 269

mustache模板引擎

学习笔记

什么是模板引擎?

将数据要变为视图的最优雅的解决方案

mustache 库的机理

  • 模板字符串 转换为 tokens
  • tokens 再与数据结合变为可以上树的 DOM 字符串
// 模板字符串
const templateStr = `
    <div>
        <ol>
            {{#students}}
            <li class="hobbies">
                学生{{name}}的爱好
                <ol>
                    {{#hobbies}}
                    <li>{{one}}</li>
                    <li>{{two}}</li>
                    {{/hobbies}}
                </ol>
            </li>
            {{/students}}
        </ol>
    </div>
`
复制代码
// tokens
[
    ["text", "\n    <div>\n        <ol>\n            "]
    ["#", "students", Array(5)]
    ["text", "\n        </ol>\n    </div>\n"]
]

复制代码
// data
const data = {
    students: [
        {name: '小明', hobbies: ['游戏', '打球']},
        {name: '小强', hobbies: ['吃饭', '睡觉']},
        {name: '小王', hobbies: ['打豆豆', '游泳']}
    ]
}
复制代码
// domStr
    <div>
        <ol>

            <li class="hobbies">
                学生小明的爱好
                <ol>

                    <li>游戏</li>
                    <li>打球</li>

                </ol>
            </li>

            <li class="hobbies">
                学生小强的爱好
                <ol>

                    <li>游戏</li>
                    <li>打球</li>

                </ol>
            </li>

            <li class="hobbies">
                学生小王的爱好
                <ol>

                    <li>游戏</li>
                    <li>打球</li>

                </ol>
            </li>

        </ol>
    </div>
复制代码

图解

mustache的工作机理.jpg

手写了一遍代码

  • index.js 主入口(包含测试案例)
  • lookup.js 寻找对象中指定的值
  • nestedTokens.js 将一维 tokens 折叠为多维 tokens
  • parseTemplateTokens.js 将 template 字符串转换为 token
  • parseTokens.js 解析循环的 tokens
  • renderTemplate.js 获得最终的 template 和 data 结合的 DOM 字符串
  • Scanner.js Scanner 类支持字符串扫描
  • 新增的功能:循环的 tokens 支持传递对象

代码地址

github.com/AFine970/st…

参考资料

b23.tv/uMxVwe

好好学习不会差,大家一起进步!

文章分类
前端
文章标签