自创JS模版引擎esay-template

码云地址：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大犀牛的时候，认为性能差，并且安全差，所以实际项目开发中，从来不用。没想到在这里竟然能用上)，在模版编译成方法的过程中，也涉及到编译原理的基础吧，建议程序员，一定要看编译原理这本书。

使用技巧：

easy-template.js
by --leeya

<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, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, 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>