模板渲染引擎手册

为什么使用模板渲染引擎：

在做前端进行交互的时候，经常会用到字符串拼接，使用字符串拼接的时候不但自己看着很乱很麻烦，而且不利于维护。
正因为如此才使用更加好的方法模板渲染
使用模板渲染有几点好处：

　　　　1）直接在html里面进行写，把文字内容等，进行替换更模板语音更加方便，

　　　　2）模板支持扩展各种方法，用于交互时做的判断，

　　　　3）在模板里面可以写任何js代码，用于判断或者其他作用。

　　4. 下面我就详细的为你介绍这个模板。

模板渲染引擎使用方法：

　　1. 首先在html里面先把静态页面写好（不用解释），

　　2. 写好之后再做交互的时候用用<script>标签包起来你要交互的html标签，script要有这几个属性，type="text/html"，id=""（取个id名，后面会用到）

　　3. 我介绍的这款模板的语法是 <%=属性%> 不多说看代码，

模板渲染引擎代码说明：

 1 <div class="box"></div>
 2 <script type="text/html" id="template">
 3     <h3><%=title%></h3>
 4     <ul>
 5         <%for (var i=0; i < list.length ; i++){%>
 6         <li><%=list[i]%></li>
 7         <%}%>
 8     </ul>
 9     <a href="javascript:void 0;"><%=""|getFollowStatus%></a>
10 </script>

那么我从第一行开始解释这个代码，

　　1，第一行代码只是一个容器用来放交互内容的一个标签。

　　2，2-10行是一个script标签，重点：他有一个type 和id 的属性。

　　3，第三行<h3><%=title%></h3>正如上面所说，模板的语音是<%=属性%> 这个属性下面会进行介绍。

　　4，做交互肯定少不了for循环了，模板里面也可以写JS代码，只要把JS代码写在<%JS代码%> 这里面就可以进行解析。不仅仅可以写for循环，只要是JS代码都可以进行解析。

　　5，<%=""|getFollowStatus%>这是模板的高级用法之一，下面会详细说明。

　　6，那么问题来了，如何调用呢？很简单，看代码。

 1 initRequest: function () {
 2             var that = this;
 3             $.ajax({
 4                 url: 'index.json',
 5                 type: 'post',
 6                 data: '',
 7                 dataType: 'json',
 8                 success: function (data) {
 9                     $('.box').html(that.initTemplate('template', data));
10                 },
11                 error: function () {
12                     alert("异常！");
13                 }
14             })
15         },

　　　　说明：当请求到数据后，只需要$(元素).html(模板方法(scrip的ID，请求到的数据))；

　　　　　　而上文出现的title，list，等都是请求到的JSON里面的属性名（使用起来是不是很简单）。

　　7，在进行交互的时候少不了需要进行处理数据，那么把这些方法写在哪里呢？
　　　  首先模板支持扩展方法；看代码。

 1 registerTemplate: function () {
 2     this.registerTemplateFn("getFollowStatus", function (obj) {
 3         if(obj.flag){
 4             return "关注"
 5         }else{
 6             return "已关注"
 7         }
 8     });
 9 },
10 registerTemplateFn : function(key, fn) {
11     var fns = this.initTemplate.fns = this.initTemplate.fns || {};
12     fns[key] = fn;
13 },

　　　　需要传俩个参数，第一个是个字符串，（就是上文的getFollowStatus），第二个是个function，用于处理逻辑性的问题。调用也很简单，<%=""|getFollowStatus%> [ | ] 前面的 "" 空字符串是作为后面的参数来传进去的。操作起来是不是很简单？ function里面需要传一个参数obj 而obj就是data 上文所传进去的data数据。

注意事项：

在使用模板的时候，先注意字符串单双引号，尽量使用双引号。
如果发生了报错的问题，是代码写的问题，并不是模板本身的错误。（刚开始使用的时候可能会报一些错误，经过自己探索与学习会避免错误的。加油！！）
可以单独的进行运行函数如<%="参数"|函数名%>
注意！在<%if(true){%> 里面禁止写模板语言错误示范：<%if(<%="参数"|函数名%>){%> 这样是错误的。
在写if判断的时候或者for循环，必须要进行闭合标签否则报错。
闭合方式<%if(true){%> <%}%>

总结：

　　1，本人也在学习这个模板，此文仅是本人理解，如有其它见解请在评论区回复。

　 2，模板还有各种不同的高级用法，之后本人会上传一个小demo，仅供参考。（点击下载）