lodash是從underscore分支的一個項目捐晶，之前我寫了一篇JS模板工具underscore.template的簡單用法，lodash跟underscore很相似类早，這也簡單介紹一下lodash的template方法。
先把underscore的文章中用過的代碼貼過來，把underscore的js文件換成lodash的js搏色，其他一字不改，然后我們試試：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="example1"></div>
<div id="example2"></div>
<script type="text/template" id="tpl1">
<% _.each(datas, function (item) { %>
<div class="outer">
<%= item.film %> - <%= item.url %> - <%= item.director %>
</div>
<% }); %>
</script>
<script type="text/template" id="tpl2">
<% if ( 2 + 4 === 6 ) {
_.each(datas, function (item) { %>
<div class="outer">
<%= item.film %> - <%= item.url %> - <%= item.director %>
</div>
<% });
} %>
</script>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/lodash.js/4.16.6/lodash.min.js"></script>
<script type="text/javascript">
var datas = [
{
film: '電影名稱1',
url: 'http://www.baidu.com',
director: '導演名稱1'
},
{
film: '電影名稱2',
url: 'http://www.baidu.com',
director: '導演名稱2'
},
{
film: '電影名稱3',
url: 'http://www.baidu.com',
director: '導演名稱4'
},
{
film: '電影名稱4',
url: 'http://www.baidu.com',
director: '導演名稱4'
},
];
$('#example1').html( _.template($('#tpl1').html(), datas) );
$('#example2').html( _.template($('#tpl2').html(), datas) );
</script>
</body>
</html>
可以看到券册，正常打印了模板频轿。
中文文檔：http://www.css88.com/doc/lodash/#_templatestring-options
經(jīng)過我的測試，lodash的運行效率比underscore的效率高一點點烁焙，這也符合業(yè)界對這兩個庫的評價航邢，就是lodash比underscore高明一點點，所以以后盡量用lodash做模板引擎就好了骄蝇。
用法可以參考中文文檔膳殷，主要用法有兩種：
第一種：
_.template('hello <%= user %>!')({ 'user': 'fred' })
第二種：
_.template('hello <%= user %>!', { 'user': 'fred' })
經(jīng)過我的測試，第一種更快九火，所以大家以后盡量用第一種赚窃，而且官方示例全部是第一種寫法。
掌握這一種寫法岔激，再掌握各種分隔符勒极，就足夠應(yīng)對日常應(yīng)用。
上面例子是以json直接量作為數(shù)據(jù)源鹦倚，現(xiàn)在假設(shè)我們有一個json文件河质，我們應(yīng)該怎么把數(shù)據(jù)插入到模板中？
先寫HTML代碼：
<div data-api="xxoourl">
<script type="text/template">
<ol id="usersDaily" class="widget-top10">
<% _.each(daily,function(d){ %>
<li class="text-muted">
<img class="avatar-24" src="<%- d.avatarUrl %>"/>
<a href="<%- d.url %>" class="ellipsis">
<%= d.name %>
</a>
<span class="text-muted pull-right">+<%- d.incr %></span>
</li>
<% }) %>
</ol>
<ol id="usersWeekly" class="widget-top10 hidden">
<% _.each(weekly,function(d){ %>
<li class="text-muted">
<img class="avatar-24" src="<%- d.avatarUrl %>"/>
<a href="<%- d.url %>" class="ellipsis">
<%= d.name %>
</a>
<span class="text-muted pull-right">+<%- d.incr %></span>
</li>
<% }) %>
</ol>
</script>
</div>
也就是說震叙，最外層div有一個data-api="xxoourl"掀鹅，用于指定源，里面是一個<script type="text/template"></script>媒楼，其中有兩個循環(huán)乐尊，一個是循環(huán)daily，另一個是循環(huán)weekly划址。那么我們怎么組織這個json源扔嵌？
在對象中設(shè)兩個鍵，分別叫daily和weekly夺颤，每個鍵的值都是數(shù)組痢缎，數(shù)組的每個元素都是對象，每個對象就是一組數(shù)據(jù)世澜。
{
"daily": [
{
"rankWord": "11.8k",
"avatarUrl": "https://sfault-avatar.b0.upaiyun.com/427/102/4271029182-55b7a3c57d25b_big64",
"name": "eechen",
"url": "/u/eechen",
"incr": "79"
},
...
],
"weekly": [
{
"rankWord": "1k",
"avatarUrl": "https://sfault-avatar.b0.upaiyun.com/726/291/726291045-57fdead795d4e_big64",
"name": "orangexc",
"url": "/u/orange_1995",
"incr": "198"
},
...
]
}
然后是js代碼：
var timestamp = new Date().getTime();
$('[data-api]').each(function() {
var $_self = $(this);
$.get('/app/dev' + $_self.attr('data-api') + '?v=' + timestamp, function(data) {
$_self.html( _.template($_self.find('script').html())(data) );
}, 'json');
});
這段的意思是遍歷所有api容器独旷，然后拉取源，將源解析成HTML代碼，然后替換容器內(nèi)的數(shù)據(jù)即可嵌洼。這樣也抹掉了模板案疲。如果你不想抹掉模板，將$_self.html()改成$_self.append()即可麻养。
總結(jié)：我們只要有容器褐啡、有源、有模板鳖昌，就可以構(gòu)建出一套HTML代碼备畦。
