学习笔记

什么是模板引擎？

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

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>

图解

手写了一遍代码

• 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

好好学习不会差，大家一起进步！