频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
Underscore.js新手入门基础
2018-09-29 10:37:36           
收藏   我要投稿

    Underscore.js 入门教程

    总结:

    Underscore.js是一个由Jeremy Ashkenas开发的 JavaScript 库,它提供了许多作为开发者的我们在开发 Web 项目所需要的实用功能。

    Underscored 的三个最常用的方法:

    _.each() _.template() _.filter()

    Underscore.js是一个由Jeremy Ashkenas开发的 JavaScript 库,它提供了许多作为开发者的我们在开发 Web 项目所需要的实用功能。

    它使世界杯外围投注网站变得更加易读:

    1

    2

    _.isEmpty({});

    // true

    它使世界杯外围投注网站更容易编写:

    1

    2

    _.flatten([[0, 1], [2, 3], [4, 5]]);

    // [0, 1, 2, 3, 4, 5]

    它提供了原生所没有的方法:

    1

    2

    _.range(5);

    // [0, 1, 2, 3, 4]

    它自身甚至可以作为模板引擎:

    1

    2

    _.template(&世界杯外围投注官网39;

    <%= text %>

    &世界杯外围投注官网39;, {text: &世界杯外围投注官网39;SitePoint Rocks!&世界杯外围投注官网39;});

    //

    SitePoint Rocks!

    Underscore 是一个轻量级的库(minify和gzip压缩后只有5.7 kb),并且被许多知名项目所用,如:

    USA Today LinkedIn Khan Academy

    现在我们开始更具体,更深入的讨论它的主要功能。

    重要部分

    在本教程中,我要强调 Underscored 的三个最常用的方法:

    _.each() _.template() _.filter()

    我将分别解释它们是如何使用,然后用它们一起编写一个 Demo,Demo 你可以找到在教程最后找到。与以往一样,这个 Demo 的世界杯外围投注网站会放在Github上。

    如果你想跟着例子练习,你需要一份 Underscore 库。你可以从,比如你所喜爱的 CDN 处获取:

    1

    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

    一路走来如果发现自己需要帮助,或者你想要了解更多,不要忘了还有内容更广泛的Underscore官方文档。它还有一个庞大而活跃的社区,意味着很容易得到其他人帮助。

    _.each:写看得懂的循环

    任何一个项目都会有类似于此片段的世界杯外围投注网站:

    1

    2

    3

    4

    var artists = [&世界杯外围投注官网39;Pharrel Williams&世界杯外围投注官网39;, &世界杯外围投注官网39;Led Zeppelin&世界杯外围投注官网39;, &世界杯外围投注官网39;Rolling Stones&世界杯外围投注官网39;];

    for(var i = 0; i < artists.length; i++) {

    console.log(&世界杯外围投注官网39;artist: &世界杯外围投注官网39; + artists[i]);

    }

    Underscore 能够使你用更具可读性的方式编写像这样的世界杯外围投注网站,:

    1

    2

    3

    4

    var artists = [&世界杯外围投注官网39;Pharrel Williams&世界杯外围投注官网39;, &世界杯外围投注官网39;Led Zeppelin&世界杯外围投注官网39;, &世界杯外围投注官网39;Rolling Stones&世界杯外围投注官网39;];

    _.each(artists, function(artist, index, artists) {

    console.log(&世界杯外围投注官网39;artist: &世界杯外围投注官网39; + artist);

    });

    很赞不是吗?_.each()接受两个参数:

    需要遍历的 Array(或者Object) 回调函数

    对于 Array 中每一个元素(文档中称为iteratee),_.each()都将调用回调函数。在回调函数中我们可以访问三个参数:

    当前迭代的数组元素(artist)的值。例如,对于上面的世界杯外围投注网站段,在第一次迭代我们会得到“Pharrel Williams”这个值 当前迭代的序号(索引),在我们的这个例子下,是从0到2的数 被迭代的数组本身(artists)

    正如你所看到这样,世界杯外围投注网站更易读,我们不需要像之前提到的for循环那样使用artist[i]就可以轻松访问数组中的各个元素。

    See the Pen_.eachby SitePoint (@SitePoint) onCodePen.

    _.template: 简单直白

    由于单页应用的兴起,一个可靠的前端模板引擎已经成为工作栈中基本的需要。

    Underscore 提供了一个模板引擎,这对于那些熟悉如 PHP 或 Ruby on Rails 语言的人来说可能非常熟悉。

    从我们上面的世界杯外围投注网站片段继续,我们来演示_.template()是如何工作的。添加如下几行世界杯外围投注网站

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    var artists = [&世界杯外围投注官网39;Led Zeppelin&世界杯外围投注官网39;, &世界杯外围投注官网39;ACDC&世界杯外围投注官网39;, &世界杯外围投注官网39;Rolling Stones&世界杯外围投注官网39;],

    artistTemplate = _.template(&世界杯外围投注官网39;

    • <%= artist %>
    • &世界杯外围投注官网39;),

      content = &世界杯外围投注官网39;&世界杯外围投注官网39;;

      _.each(artists, function(artist, index, artists) {

      content += artistTemplate({

      artist: artist

      });

      });

      var container = document.createElement(&世界杯外围投注官网39;ol&世界杯外围投注官网39;);

      container.innerHTML = content;

      document.body.appendChild(container);

    在这里,我们用一个字符串参数来调用_.template()函数,这个参数包括用分隔符包含的一些数据(<%= artist%>)。当以这种方式调用_.template()的时候,会返回一个可复用的函数。

    来调用我们的新函数artistTemplate(),传递文本作对象为参数,会返回我们最初传递到_.template()的字符串,但是其中的自由变量会被参数中相应的值替代。在这个例子下<%=artist%>会被参数中artist的值所取代。

    Underscore 的模板引擎不仅可以替换值,而且模板内部的脚本也可以被执行。只需一处修改,这一段世界杯外围投注网站就可以如虎添翼。

    1

    2

    3

    4

    5

    6

    var artists = [&世界杯外围投注官网39;Led Zeppelin&世界杯外围投注官网39;, &世界杯外围投注官网39;ACDC&世界杯外围投注官网39;, &世界杯外围投注官网39;Rolling Stones&世界杯外围投注官网39;],

    artistTemplate = _.template( &世界杯外围投注官网39;<% _.each(artists, function(artist, index, artists) { %>&世界杯外围投注官网39; + &世界杯外围投注官网39;

    • <%= artist %>
    • &世界杯外围投注官网39; + &世界杯外围投注官网39;<% }); %>&世界杯外围投注官网39; ),

      content = artistTemplate({ artists: artists });

      var container = document.createElement(&世界杯外围投注官网39;ol&世界杯外围投注官网39;);

      container.innerHTML = content;

      document.body.appendChild(container);

    我们已经把对_.each()的调用整合进模板,这使我们改变模板的调用方式。既然我们现在在_.template()函数中进行迭代,我们可以把整个的artists数组传入artistTemplate()(之前传递的是单个artist)。此世界杯外围投注网站输出结果与前面的例子相同。

    当需要_.template()来eval其中的 JavaScript 世界杯外围投注网站时,需要用<%%>来包围世界杯外围投注网站,而不是<%=%>。

    既然调用由_.template生成的模板和调用一个函数效果相同,我们可以用<%%>标签把世界杯外围投注网站进一步改良。我们对artists设计一个外层模板,并且由它来调用为每个元素设计的内层模板,这样子模板就是可复用的。

    See the Pen_.template()by SitePoint (@SitePoint) onCodePen.

    最后,来看看_.filter()函数。

    _.filter():只需要一个布尔函数

    _.filter()接收一个数组和一个回调函数作为参数。然后它会对数组中的每个元素调用回调函数,然后返回一个新数组,其中包含每个回调函数执行后返回真值的元素。

    回调函数也像_.each()一样接受三个参数:当前被遍历的元素值,被遍历值的索引,和数组本身。

    为了说得更明白,我们对世界杯外围投注网站做几处修改。

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    var artists = [&世界杯外围投注官网39;Led Zeppelin&世界杯外围投注官网39;, &世界杯外围投注官网39;ACDC&世界杯外围投注官网39;, &世界杯外围投注官网39;Rolling Stones&世界杯外围投注官网39;],

    artistTemplate = _.template(

    &世界杯外围投注官网39;<% _.each(artists, function(artist, index, artists) { %>&世界杯外围投注官网39; +

    &世界杯外围投注官网39;

    • <%= artist %>
    • &世界杯外围投注官网39; +

      &世界杯外围投注官网39;<% }); %>&世界杯外围投注官网39;

      ),

      content = artistTemplate({

      artists: _.filter(artists, function(artist, index, artists) {

      return artist === &世界杯外围投注官网39;ACDC&世界杯外围投注官网39;;

      })

      });

      var container = document.createElement(&世界杯外围投注官网39;ol&世界杯外围投注官网39;);

      container.innerHTML = content;

      document.body.appendChild(container);

    你可能已经猜到了,在模板中只会收到[&世界杯外围投注官网39;ACDC&世界杯外围投注官网39;]作为数组参数。这是我们目前的 demo 。

    See the Pen_.filter()by SitePoint (@SitePoint) onCodePen.

    说了那么多。我们来做一些更有意义的东西。

    Demo应用

    不要忘了这个 Demo 的世界杯外围投注网站可以在Github上找到。

    我们将建立一个小程序,它调用其他 API,展示所拉取的信息,并允许世界杯体育投注平台过滤显示。为此,我们将使用:

    Underscore.js jQuery The Spotify Web API

    具体来说,这个程序将会从Spotify获取一些艺人信息,并通过使用Underscore的_.template,_.each和_.filter来展示,世界杯体育投注平台可以根据流派来缩小展示范围。

    要做到这一点,我们将世界杯外围投注网站分为三个不同的模块:

    _isAwesome.Config:存储整个程序中将用到的信息。
    _isAwesome.Template:负责模板的编译
    _isAwesome:主模块,负责响应世界杯体育投注平台操作并更新界面。

    以上都遵循模块模式。
    Config模块
    该模块包含了要使用的模板的ID,还有用于查询的 API 地址,还包括我们想从 Spotify 的查询的艺人ID。通过这种方式,我们可以只需要在数组中添加元素就可以查询更多艺人的信息。

    Template模块
    该模块通过调用Config模块中的getTemplates()来编译模板。

    主模块
    该模块负责向Config模块取得的 URL 发送 Ajax 请求,并且使用我们从Template模块中取得的模板渲染页面。 除此之外,这个模块也负责响应世界杯体育投注平台操作而过滤相应内容。

    两个过滤器和模板都会嵌入在 HTML 中。

    为了实现过滤,我们将依赖HTML 5的data属性和jQuery的data接口。这是为了方便起见,但你如果想着如何用原生实现的话,浏览器对这个接口的支持非常好。

    这是用来做过滤按钮的世界杯外围投注网站:

    1

    这是用来传给过滤函数的对象的例子:

    1

    2

    3

    4

    5

    {

    action: &世界杯外围投注官网39;filter&世界杯外围投注官网39;,

    field: &世界杯外围投注官网39;genres&世界杯外围投注官网39;,

    value: &世界杯外围投注官网39;rock&世界杯外围投注官网39;

    }

    我们把模板放在标签内,将其作为index.html的一部分。但是为了防止它被执行,需要将其type属性设置为text/javascript以外的值。统一起见我们设置为underscore/template。

    我们将有两个模板。第一个是艺人列表的模板,第二个是艺人单独显示时的模板。如上面所说,我们将其称之为嵌入式模板。我们会从一个模板中(&世界杯外围投注官网39;item-list&世界杯外围投注官网39;)调用另一个模板(&世界杯外围投注官网39;item-tpl&世界杯外围投注官网39;)。

    然后,在该文件的底部,我们会引入所需的库和这三个脚本。此外,为了使其更具视觉吸引力,我们还在header里加入了一些基本样式。 And that’s it. 就是这样。

    See the PenUnderscore Awesomenessby SitePoint (@SitePoint) onCodePen.

    总结

    如我演示,Underscore 用起来十分赏心悦目,你可以写出干净,可读性强,并且容易维护的世界杯外围投注网站。

    还有更多的内容可以加入我们这个 demo 里(比如用_.pluck()来动态生成模板),但我觉得作为入门这些已经足够。

    你呢,你是否曾经用过 Underscore ,你是否会愿意尝试,你是否尝试过其他功能相似的替代品(比如loadsh),评论告诉我吧。

点击复制链接 与好友分享!回本站首页
上一篇:sass基础知识小结
下一篇:js写飞机大战实战
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑--致力于做实用的IT技术学习网站