Underscore.js 入门教程
出处：http://web.jobbole.com/87537/
总结：
Underscore.js 是一个由 Jeremy Ashkenas 开发的 JavaScript 库，它提供了许多作为开发者的我们在开发 Web 项目所需要的实用功能。
Underscored 的三个最常用的方法：
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('<p><%= text %></p>', {text: 'SitePoint Rocks!'}); // <p>SitePoint Rocks!</p> |
Underscore 是一个轻量级的库（minify和gzip压缩后只有5.7 kb），并且被许多知名项目所用，如：
现在我们开始更具体，更深入的讨论它的主要功能。
重要部分
在本教程中，我要强调 Underscored 的三个最常用的方法：
我将分别解释它们是如何使用，然后用它们一起编写一个 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 = ['Pharrel Williams', 'Led Zeppelin', 'Rolling Stones']; for(var i = 0; i < artists.length; i++) { console.log('artist: ' + artists[i]); } |
Underscore 能够使你用更具可读性的方式编写像这样的代码，：
| 1 2 3 4 | var artists = ['Pharrel Williams', 'Led Zeppelin', 'Rolling Stones']; _.each(artists, function(artist, index, artists) { console.log('artist: ' + artist); }); |
很赞不是吗？_.each()接受两个参数：
- 需要遍历的 Array（或者Object）
- 回调函数
对于 Array 中每一个元素（文档中称为 iteratee ），_.each()都将调用回调函数。在回调函数中我们可以访问三个参数：
- 当前迭代的数组元素（
artist）的值。例如，对于上面的代码段，在第一次迭代我们会得到“Pharrel Williams”这个值 - 当前迭代的序号（索引），在我们的这个例子下，是从0到2的数
- 被迭代的数组本身（
artists）
正如你所看到这样，代码更易读，我们不需要像之前提到的for循环那样使用artist[i]就可以轻松访问数组中的各个元素。
See the Pen _.each by SitePoint (@SitePoint) on CodePen.
_.template: 简单直白
由于单页应用的兴起，一个可靠的前端模板引擎已经成为工作栈中基本的需要。
Underscore 提供了一个模板引擎，这对于那些熟悉如 PHP 或 Ruby on Rails 语言的人来说可能非常熟悉。
从我们上面的代码片段继续，我们来演示_.template()是如何工作的。添加如下几行代码
| 1 2 3 4 5 6 7 8 9 10 11 12 | var artists = ['Led Zeppelin', 'ACDC', 'Rolling Stones'], artistTemplate = _.template('<li><%= artist %></li>'), content = ''; _.each(artists, function(artist, index, artists) { content += artistTemplate({ artist: artist }); });
var container = document.createElement('ol'); container.innerHTML = content; document.body.appendChild(container); |
在这里，我们用一个字符串参数来调用_.template()函数，这个参数包括用分隔符包含的一些数据（<%= artist%>）。当以这种方式调用_.template()的时候，会返回一个可复用的函数。
来调用我们的新函数artistTemplate()，传递文本作对象为参数，会返回我们最初传递到_.template()的字符串，但是其中的自由变量会被参数中相应的值替代。在这个例子下<%=artist%>会被参数中artist的值所取代。
Underscore 的模板引擎不仅可以替换值，而且模板内部的脚本也可以被执行。只需一处修改，这一段代码就可以如虎添翼。
| 1 2 3 4 5 6 | var artists = ['Led Zeppelin', 'ACDC', 'Rolling Stones'], artistTemplate = _.template( '<% _.each(artists, function(artist, index, artists) { %>' + '<li><%= artist %></li>' + '<% }); %>' ), content = artistTemplate({ artists: artists }); var container = document.createElement('ol'); container.innerHTML = content; document.body.appendChild(container); |
我们已经把对_.each()的调用整合进模板，这使我们改变模板的调用方式。既然我们现在在_.template()函数中进行迭代，我们可以把整个的artists数组传入artistTemplate()（之前传递的是单个artist）。此代码输出结果与前面的例子相同。
当需要_.template()来eval其中的 JavaScript 代码时，需要用<%%>来包围代码，而不是<%=%>。
既然调用由_.template生成的模板和调用一个函数效果相同，我们可以用<%%>标签把代码进一步改良。我们对artists设计一个外层模板，并且由它来调用为每个元素设计的内层模板，这样子模板就是可复用的。
See the Pen _.template() by SitePoint (@SitePoint) on CodePen.
最后，来看看_.filter()函数。
_.filter()：只需要一个布尔函数
_.filter()接收一个数组和一个回调函数作为参数。然后它会对数组中的每个元素调用回调函数，然后返回一个新数组，其中包含每个回调函数执行后返回真值的元素。
回调函数也像_.each()一样接受三个参数：当前被遍历的元素值，被遍历值的索引，和数组本身。
为了说得更明白，我们对代码做几处修改。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var artists = ['Led Zeppelin', 'ACDC', 'Rolling Stones'], artistTemplate = _.template( '<% _.each(artists, function(artist, index, artists) { %>' + '<li><%= artist %></li>' + '<% }); %>' ), content = artistTemplate({ artists: _.filter(artists, function(artist, index, artists) { return artist === 'ACDC'; }) }); var container = document.createElement('ol'); container.innerHTML = content; document.body.appendChild(container); |
你可能已经猜到了，在模板中只会收到['ACDC']作为数组参数。这是我们目前的 demo 。
See the Pen _.filter() by SitePoint (@SitePoint) on CodePen.
说了那么多。我们来做一些更有意义的东西。
Demo应用
不要忘了这个 Demo 的代码可以在Github 上找到。
我们将建立一个小程序，它调用其他 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 | <button class="btn btn-default sized" data-filter-field="genres" data-filter-value="album rock" data-action="filter">Album Rock</button> |
这是用来传给过滤函数的对象的例子：
| 1 2 3 4 5 | { action: 'filter', field: 'genres', value: 'rock' } |
我们把模板放在标签内，将其作为index.html的一部分。但是为了防止它被执行，需要将其type属性设置为text/javascript以外的值。统一起见我们设置为underscore/template。
我们将有两个模板。第一个是艺人列表的模板，第二个是艺人单独显示时的模板。如上面所说，我们将其称之为嵌入式模板。我们会从一个模板中('item-list')调用另一个模板('item-tpl')。
然后，在该文件的底部，我们会引入所需的库和这三个脚本。此外，为了使其更具视觉吸引力，我们还在header里加入了一些基本样式。 And that’s it. 就是这样。
See the Pen Underscore Awesomeness by SitePoint (@SitePoint) on CodePen.
总结
如我演示，Underscore 用起来十分赏心悦目，你可以写出干净，可读性强，并且容易维护的代码。
还有更多的内容可以加入我们这个 demo 里（比如用_.pluck()来动态生成模板)，但我觉得作为入门这些已经足够。
你呢，你是否曾经用过 Underscore ，你是否会愿意尝试，你是否尝试过其他功能相似的替代品（比如loadsh），评论告诉我吧。