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