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

Posted 2020-07-20 天上云好白

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