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代码。




  • 2019-11-21 18:13:08

    如何在vue单页应用中使用百度地图

    百度开发者平台已经封装了基于vue的地图组件,详细使用,请参考官网: https://dafrok.github.io/vue-baidu-map/#/zh/start/installation 网上有一些是直接在index.html页面全部引用的,本人强烈反对此种使用方式,因为我们项目是组件化的单页应用,强行引入多页应用的开发方式,会破坏整个项目的框架,严重影响性能。有些甚至还在vue单页应用中引入jquery,感觉这都是一些反人类的骚操作,不到万不得已,不建议使用。

  • 2019-11-25 17:04:10

    Throttle 和 Debounce 的本质及一个简单的实现

    Throttle,Debounce 就不把这两个词翻译成中文了,直接解释他们的概念。实际上这两个东西本质上是一样的,作用都是「为了避免某个『事件』在『一个较短的时间段内』内连续被触发从而引起的其对应的『事件处理函数』不必要的连续执行」。那么区别在哪呢?

  • 2019-11-25 17:05:44

    js实现 throttle 和 debounce,节流,防抖详解

    throttle 节流:drag改变浏览器大小,触发onresize函数,实现拖动每过1秒输出一次,不足1秒,1秒后输出一次。多用于高频操作,如抢票、抢购等,无论点击多少次,只固定间隔执行一次,以减轻压力。debounce防抖:drag改变浏览器大小,触发onresize函数,实现拖动停顿1秒输出。多用于输入框,当某一次输入后停顿满n秒才会去触发远程搜索。

  • 2019-11-25 17:37:01

    百度地图GeoUtils示例

    百度地图JavaScript开源库,是一套基于百度地图API二次开发的开源的代码库。目前提供多个lib库,帮助开发者快速实现在地图上添加Marker、自定义信息窗口、标注相关开发、区域限制设置、几何运算、实时交通、检索与公交驾车查询、鼠标绘制工具等功能。

  • 2019-11-26 11:08:02

    多边型无序点排序(地图绘制多边形)

    任务需求要做一个区域高亮的功能,用到地图,想到了高德地图的多边形API,但是多边形顶点的顺序是要有序的,需求是无序,在API查找无果的情况下,只能手动实现点集合排序。