如何实现一个基于DOM的模板引擎

经由过程膳绫擎的代码，可以看到 Compile 的构造函数重要就是做了一件事 ———— 遍历 template，然后经由过程断定节点类型的不合来做不合的编译操作，这里就不介绍若何遍历 template 了，不明白的话可以直接看 walk 函数的源码，我们侧重来看下若何编译这些不合类型的节点，以编译 node.nodeType === 1 的元素节点为例：

Compile(`<li :each="(comment, index) in comments" data-index="{{ index }}">{{ comment.content }}</li>`, { 
    comments: [{ 
        content: `Hello World.`, 
    }, { 
        content: `Just Awesome.`, 
    }, { 
        content: `WOW, Just WOW!`, 
    }], 
});

Conclusion

今朝有一个局限就是 DOM-based 的模板引擎只实用于浏览器端，今朝笔者也正在实现兼容 Node 端的版本，思路是把字符串模板解析成 AST，然后把更新数据到 AST 上，最后再把 AST 转成字符串模板，实现出来后有空的话再来介绍一下 Node 端的实现。

到这里，其实一个比较简单的模板引擎算是实现了，当然还有很多处所可以完美的，比如可以增长 :class, :style, :if 或 :src 等等你可以想到的指令功能，添加这些功能都是异常的简单的。

全篇介绍下来，全部核心无非就是遍历全部模板的节点树，其次针对每一个节点的字符串值来解析查对应的表达式，然后经由过程 new Function() 这个构造函数来计算成实际的值，最终经由过程指令的 update 函数来更新到视图上。

如不雅照样不清跋扈这些指令若何编写的话，可以参考我这个项目 colon 的相干源码(部分代码可能会有不影响懂得的细微差别，可忽视)，有任何问题都可以在 issue 上提。

最后，如不雅膳绫擎有说得纰谬或者有更好的实现方法的话，迎接指出评论辩论。

【编辑推荐】

在Node.js中应用MySQL&MySQL JavaScript客户端
现代前端开起身术栈
前端实现文件的断点续传
JavaScript进阶之深刻懂得数据双向绑定
测试JavaScript函数的机能

【义务编辑：枯木 TEL：（010）68476606】

10/10 首页上一页 8 9 10

　　推荐阅读

　　雷军开造空调正面挑战董明珠？小米说只是生态链

曾经和格力电器董事长董明珠有10亿赌约的小米，要做空调了？ 8月10日，小米智能硬件生态链企业智米科技宣布了一款售价4399元的全直流变频空调，但品牌不是“小米&rdqu>>>详细阅读

本文标题：如何实现一个基于DOM的模板引擎

地址：http://www.17bianji.com/lsqh/36664.html

1/2 1