lodash如何引⼊html,JS模板⼯具plate的简单⽤法lodash是从underscore分⽀的⼀个项⽬，之前我写了⼀篇JS模板⼯具plate的简单⽤法，lodash跟underscore很相似，这也简单介绍⼀下lodash的template⽅法。
先把underscore的⽂章中⽤过的代码贴过来，把underscore的js⽂件换成lodash的js，其他⼀字不改，然后我们试试：
- -
_.each(datas, function (item) { %>
- -
} %>
var datas = [
罗马历史
{
film: '电影名称1',
url: '',
director: '导演名称1'
},
{
film: '电影名称2',
url: '',
director: '导演名称2'
},
{
film: '电影名称3',
url: '',
director: '导演名称4'
},
{
film: '电影名称4',
url: '',
director: '导演名称4'
},
];
$('#example1').html( _.template($('#tpl1').html(), datas) );
$('#example2').html( _.template($('#tpl2').html(), datas) );
可以看到，正常打印了模板。
雷峰塔在哪
团队介绍创意简短
+
+
经过我的测试，lodash的运⾏效率⽐underscore的效率⾼⼀点点，这也符合业界对这两个库的评价，就是lodash⽐underscore⾼明⼀点点，所以以后尽量⽤lodash做模板引擎就好了。
⽤法可以参考中⽂⽂档，主要⽤法有两种：
第⼀种：
_.template('hello !')({ 'ur': 'fred' })
初中家长评语第⼆种：
_.template('hello !', { 'ur': 'fred' })醋溜白菜家常做法
经过我的测试，第⼀种更快，所以⼤家以后尽量⽤第⼀种，⽽且官⽅⽰例全部是第⼀种写法。
掌握这⼀种写法，再掌握各种分隔符，就⾜够应对⽇常应⽤。
上⾯例⼦是以json直接量作为数据源，现在假设我们有⼀个json⽂件，我们应该怎么把数据插⼊到模板中？
先写HTML代码：
qq免费申请账号1.
1.
也就是说，最外层div有⼀个data-api="xxoourl"，⽤于指定源，⾥⾯是⼀个，其中有两个循环，⼀个是循环daily，另⼀个是循环weekly。那么我们怎么组织这个json源？
在对象中设两个键，分别叫daily和weekly，每个键的值都是数组，数组的每个元素都是对象，每个对象就是⼀组数据。
{
"daily": [
{
"rankWord": "11.8k",
"avatarUrl": "sfault-avatar./427/102/4271029182-55b7a3c57d25b_big64",
"name": "eechen",
"url": "/u/eechen",
"incr": "79"植物生长变化
},
...
],
"weekly": [
{
"rankWord": "1k",
英文名字怎么起
"avatarUrl": "sfault-avatar./726/291/726291045-57fdead795d4e_big64",
"name": "orangexc",
"url": "/u/orange_1995",
"incr": "198"
},
...
]
}
然后是js代码：
var timestamp = new Date().getTime();
$('[data-api]').each(function() {
var $_lf = $(this);
$.get('/app/dev' + $_lf.attr('data-api') + '?v=' + timestamp, function(data) {
$_lf.html( _.template($_lf.find('script').html())(data) );
}, 'json');
});
这段的意思是遍历所有api容器，然后拉取源，将源解析成HTML代码，然后替换容器内的数据即可。这样也抹掉了模板。如果你不想抹掉模板，将$_lf.html()改成$_lf.append()即可。
总结：我们只要有容器、有源、有模板，就可以构建出⼀套HTML代码。
