JS模板工具lodash.template的简单用法

2019-12-05 17:13:40

参考地址 JS模板工具lodash.template的简单用法

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

经过我的测试,lodash的运行效率比underscore的效率高一点点,这也符合业界对这两个库的评价,就是lodash比underscore高明一点点,所以以后尽量用lodash做模板引擎就好了。

用法可以参考中文文档,主要用法有两种:

第一种:

_.template('hello <%= user %>!')({ 'user': 'fred' })

第二种:

_.template('hello <%= user %>!', { 'user': 'fred' })

经过我的测试,第一种更快,所以大家以后尽量用第一种,而且官方示例全部是第一种写法。

掌握这一种写法,再掌握各种分隔符,就足够应对日常应用。

上面例子是以json直接量作为数据源,现在假设我们有一个json文件,我们应该怎么把数据插入到模板中?

先写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>,其中有两个循环,一个是循环daily,另一个是循环weekly。那么我们怎么组织这个json源?

在对象中设两个键,分别叫daily和weekly,每个键的值都是数组,数组的每个元素都是对象,每个对象就是一组数据。

{
      "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代码,然后替换容器内的数据即可。这样也抹掉了模板。如果你不想抹掉模板,将$_self.html()改成$_self.append()即可。

总结:我们只要有容器、有源、有模板,就可以构建出一套HTML代码。




  • 2017-02-13 17:50:05

    cURL error 60: SSL certificate problem: unable to get local issuer certificate

    Drupal 8 version uses Guzzle Http Client internally, but under the hood it may use cURL or PHP internals. If you installed PHP cURL on your PHP server it typically uses cURL and you may see an exception with error Peer certificate cannot be authenticated with known CA certificates or error code CURLE_SSL_CACERT (60).

  • 2017-02-16 08:09:01

    HTML中PRE和p的区别

    pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 <pre> 标签的一个常见应用就是用来表示计算机的源代码。

  • 2017-02-16 15:14:14

    动态加载js和css

    开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法。

  • 2017-02-17 17:11:24

    mysql插入数据后返回自增ID的方法c

    产生的ID 每次连接后保存在服务器中。这意味着函数向一个给定客户端返回的值是该客户端产生对影响AUTO_INCREMENT列的最新语句第一个 AUTO_INCREMENT值的。这个值不能被其它客户端影响,即使它们产生它们自己的 AUTO_INCREMENT值。这个行为保证了你能够找回自己的 ID 而不用担心其它客户端的活动,而且不需要加锁或处理