对_.template函数的理解

我对underscore.js中的_.template函数进行了学习总结：

 

这个函数算得上是一个轻量级的模板引擎（包括注释80多行）；

模板引擎简单来说就是在动态渲染页面的时候，可以简化字符串的拼接操作。可以帮助我们有效地组织页面的结构和底层逻辑，也是实现界面和数据分离的重要一个步骤；

 

一.如何使用：

该函数可以解析3种模板标签：

<%=  %> 标签中包含的通常是变量名、函数名、对象属性，执行时直接展现调用后的数据

 

var templateString = _.template("<div><%=name%></div>");
    templateString({
       name:"lzj",
    })// ==><div>lzj</div>

 

 

<%-   %> 标签在输出数据时，能将HTML标记转成常用字符串形成（专门去解析html元素其实是为了防止xss攻击）

 

var templateString = _.template("<div><%-name%></div>");
    templateString({
        name:"<script>",
    })//==><div>&lt;script&gt;</div>

 

 

<%    %> 标签中包含的通常是JavaScript代码，在页面渲染数据时被执行；这个应该是最实用的一个方法，这里看不出来，但当它和<%= %>结合起来的时候还是很不错的；

 

 

 

var templateString = _.template("<div><%var a=1;a=a+b;console.log(a)%></div>");
   templateString({
      b:2              
  })//==>3

 

简单举一个例子，说明一下优势：比如我想动态生成3个li，如果用常规的方法如下：

 

 

var people=[1,2,3];
(function(){
    var temp="";
      for(var i=0;i<people.length;i++){
       temp+="<li>"+people[i]+"</li>"
    }
})()

 

 

如果用模板引擎的话如下：

 

var obj={
   people:[1,2,3]
}
var templateString='<% for(var i=0;i<people.length;i++){%>\
                        <li><%=people[i]%></li>\
                    <%}%>'
templateString=_.template(templateString);
var dom=templateString(obj)//==><li>1</li><li>2</li><li>3</li>

 

 

如果变量再多一点，那么字符串拼接的" " 将会亮瞎你的双眼；当我们有了这种模板之后，动态生成html元素就方便很多了，也很有利于插件的编写和维护；不用再一个个document.createElement ,setAttribute了；

 

总结一下：(如果我们想动态生成一个html标签添加到页面上去)

我们首先定义一个字符串，就跟我们平时写html标签一样，只不过遇到变量的时候用<%%>括起来 至于是用<%=%>  <%-%> <%%>这三个中的哪一个就参考上面的例子；

 

var string='<p class=<%=className%> id=