模板渲染引擎手册

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

在做前端进行交互的时候，经常会用到字符串拼接，使用字符串拼接的时候不但自己看着很乱很麻烦，而且不利于维护。

正因为如此才使用更加好的方法模板渲染

使用模板渲染有几点好处：

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

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

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

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

模板渲染引擎使用方法：

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

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

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

模板渲染引擎代码说明：

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

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

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

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

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

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

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

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

initRequest: function () {
var that = this;
$.ajax({
url: 'index.json',
type: 'post',
data: '',
dataType: 'json',
success: function (data) {
$('.box').html(that.initTemplate('template', data));
},
error: function () {
alert("异常！");
}
})
},

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

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

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

registerTemplate: function () {
this.registerTemplateFn("getFollowStatus", function (obj) {
if(obj.flag){
return "关注"
}else{
return "已关注"
}
});
},
registerTemplateFn : function(key, fn) {
var fns = this.initTemplate.fns = this.initTemplate.fns || {};
fns[key] = fn;
},

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

注意事项：

在使用模板的时候，先注意字符串单双引号，尽量使用双引号。

如果发生了报错的问题，是代码写的问题，并不是模板本身的错误。（刚开始使用的时候可能会报一些错误，经过自己探索与学习会避免错误的。加油！！）

可以单独的进行运行函数如<%="参数"|函数名%>

注意！在<%if(true){%> 里面禁止写模板语言 错误示范：<%if([b]<%="参数"|函数名%>){%> 这样是错误的。[/b]

在写if判断的时候 或者for循环，必须要进行闭合标签否则报错。

闭合方式<%if(true){%> <%}%>

　　

总结：

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

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