underscore模版

Underscore

Underscore一个JavaScript实用库，提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。

Underscore提供了100多个函数，包括each、map、reduce、 reduceRight、等
还有辅助函数，函数绑定、JavaScript模板功能、强类型相等测试、创建快速索引等

英文地址：http://underscorejs.org/
中文地址：http://www.bootcss.com/p/underscore/

Underscore模版的使用

1、视图层展示

<div id="wrap"></div>//容器

<script id="template" type="text/template">
<h2><%= title %></h2>
<ul>
<% _.each(peoples,function(item){ %>
    <li>姓名：<%= item.name %>-------描述:<%= item.des %> -----------钱：<%= item.money %></li>
<% }); %>
</ul>
</script>
<script type="text/javascript" src="underscore-min.js"></script>

2、数据填充

var data = {
    title:'金钱排行榜',
    peoples:[
        {name:'地主1号',des:'拥有500万土地',money:'250'},
        {name:'地主2号',des:'拥有600万土地',money:'360'},
        {name:'地主3号',des:'拥有800万土地',money:'390'},
        {name:'地主4号',des:'拥有1000万土地',money:'2000'},
        {name:'地主5号',des:'拥有500万土地',money:'1050'},
        {name:'地主6号',des:'拥有200万土地',money:'40'},
        {name:'地主7号',des:'拥有10万土地',money:'100'},
        {name:'地主8号',des:'',money:'1000'}
    ]
};
var wrap = document.getElementById('wrap');
    tpl = document.getElementById('template');
var source = tpl.innerHTML;
var render = _.template(source);

var sortResults = _.sortBy(data.peoples,function(item){
    return -item.money;//hight->low :+item.money
});
data.peoples = sortResults;
var html = render(data);
wrap.innerHTML = html;

3、UI展示

默认模板标签

<% %> ：包含JavaScript代码，代码将在渲染数据时被执行
<%= %> : 用于输出数据，可以是一个变量、某个对象的属性、或函数调用（将输出函数的返回值）
<%- %> : 用于输出数据，同时会将数据中包含的HTML字符转换为实体形式

修改模版标签

通过templateSettings来修改模版标签，如下:

_.templateSettings = {  
    evaluate : /\{%([\s\S]+?)\%\}/g,  
    interpolate : /\{%=([\s\S]+?)\%\}/g,  
    escape : /\{%-([\s\S]+?)%\}/g  
}

设置后的标签
<%  %> => {%  %}
<%= %> => {%= %}
<%- %> => {%- %}

解析模版

模版执行

//获取模版内容
var source = tpl.innerHTML;

//解析模版
var render = _.template(source);
var html = render(data);

//解析后的内容填充到dom节点
wrap.innerHTML = html;

后语

然而这是underscore中自带的模版功能，而它的强大之处，在于提供的100多个函数，里面包括了:

集合(each、map、find…)
数组(first、last、rest…)
函数(bind、bindAll、delay…)
对象(keys、allKeys、mapObject…)
功能(random、times、noConflict、template…)
支持链式语法
……

十分有用,Gzip压缩后5.7kb