码云地址：https://gitee.com/leeyamaster/leeya-template
这是我学习编译原理时，自己写的JS模版引擎，为什么写模版引擎呢？因为我看别人的源码，也才三四百行代码，啃起来，也比较容易，所以选择这个，用来练手。在开发的过程中，研究了别人优秀的源码，如： 颜海镜大神的模版引擎(百度知道，58金融在使用) 腾讯的Art(应该用了Webpack，我看变量名都是简写，啃起来难) 借鉴了别人的博客，如： 20行代码实现JavaScript模板引擎：https://blog.csdn.net/weixin_33935777/article/details/91431900， 最简单的JavaScript模板引擎：https://www.cnblogs.com/dolphinX/p/3489269.html 使用方法： 见index.html 学习收获：通过啃源码，让我学会了UMD规范，整个模版引擎的使用过程(啃源码的过程中，我起码写了上百个console.log)，模版引擎的原理为：把模版编译成一个方法，再把数据放进方法里，即可生成HTML，就这么简单。也学会了JS的冷门方法，try，catch，这种我都是写后台才用到，with方法，eval方法(以前，看JS大犀牛的时候，认为性能差，并且安全差，所以实际项目开发中，从来不用。没想到在这里竟然能用上)，在模版编译成方法的过程中，也涉及到编译原理的基础吧，建议程序员，一定要看编译原理这本书。
使用技巧：
<script id="tpl" type="text/html">
<%=data.newsTpl%>
<%for(i = 0; i < data.list.length; i++) {%> <%=list[i].title%>
<%=list[i].content%>
<%=list[i].desc%>
<%}%> <%if ('1') { console.log("123") }%> </script>
<pre style="box-sizing: border-box; overflow: auto; font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13.6px; margin-top: 0px; margin-bottom: 0px; overflow-wrap: normal; padding: 16px; line-height: 1.45; background-color: rgb(246, 248, 250); border-radius: 3px; word-break: normal; tab-size: 4; color: rgb(51, 51, 51);"> <script src="js/leeyaTemplate.js"></script>
<script>
let data = {
newsTpl: "hello world",
list: [{
title: '这是我的第一条数据',
content: '乌拉'
},
{
title: '这是我的第二条数据',
content: '呀哈'
},
{
title: '这是我的第三条数据',
content: '斯巴达'
},
]
}
var html = template.init(document.getElementById('tpl').innerHTML, data);
document.getElementById('wp').innerHTML = html;
</script>```
注意：
data变量必须是对象。
在循环中，forEach不能使用。
在if判断中，里面不能写代码，会被直接编译成字符串。</pre>
