Underscore模版引擎的使用-template方法

之前项目里有遇到在DOM中增加大量的html结构的时候,傻乎乎的在js中写一堆模版,然后用replace一个一个做替换。当时就是难看了点,不觉得啥,现在了解了模版引擎之后回头来看真的比较捉急了,以后是不会那么傻了。

今天就介绍一下个人认为比较好用的一个模版引擎,Underscore中的template方法,我觉得underscore这个库真的不错,有计划边看源码边分析学习,到时候也会总结一些心得吧。

_.template(templateString, [data], [settings])

这是template方法的api,可接受三个参数,其中:

第一个参数也是必须的参数是模版字符串,你可以通过<%=  %> 来插入变量,还可以通过<%  %>来插入js代码,也可以通过<%-  %>来进行html转义,如果变量很多,可以使用<% print() %>来简化。

第二个参数是传入模版的数据,如果不传第二个参数,那么这个方法会返回一个模版函数,这个模版函数可以穿入数据返回完成的模版,如果传入data参数则会直接返回一个已完成的模版。

第三个参数是设置,比如这个方法默认是寻找<%  %>来进行替换,可以通过设置它来改变具体的方法可以参照这里

用法其实很简单

var cmpiled = _.template("hello <%= name %>");
compiled.({name: mike}); // "hello mike"

可以注意到,模版中可以插入js代码,那么对于很长的带有相当重复性的内容,可以做这样的处理

<script type="text/template" id="tpl">
  <% _.each(data, function(n){ %>
    <p>姓名:<%= n.name %>,年龄:<%= n.age %>,性别:<%= n.sex %></p>
  <% }); %>
</script>
var data = [
  {
    name: 'mike',
    age: 18,
    sex: '男'
  },
  {
    name: 'nina',
    age: 20,
    sex: '女'
  },
  {
    name: 'elle',
    age: 26,
    sex: '女'
  }
];    
$('body').append(_.template($('#tpl').html(), data));

这样在js代码中就可以只作数据处理,而不用出现那一串又臭又长的模版字符串,大大提高了代码可读性,也在某种意义上实现了数据和表现的分离。

posted on 2016-06-03 17:06  天上云好白  阅读(14760)  评论(1编辑  收藏  举报

导航