Underscore.js入门

Agbonghama Collins和Ryan Chenkie对这篇文章进行了同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！

Underscore.js是一个JavaScript库，以书面杰里米阿什克纳斯 ，它提供的功能实用程序，用于各种用例，我们作为开发商，可能会面临一个Web项目时遇到。

它使代码更易于阅读：

_.isEmpty({});
// true

它使代码更容易编写：

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

它提供了没有1：​​1本机方法的功能：

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

它甚至可以单独用作模板引擎：

_.template('<p><%= text %></p>', {text: 'SitePoint Rocks!'});
// <p>SitePoint Rocks!</p>

Underscore是一个轻量级的库（大小仅为5.7kb，经过压缩和压缩），并由各种知名项目使用，例如：

• 今日美国
• 领英
• 可汗学院

现在让我们更加具体，并开始深入研究其主要功能。

好零件

在本教程中，我将重点介绍Underscore的三种最常用方法：

• _。每（）
• _。模板（）
• _。过滤（）

我将解释如何分别使用它们，然后将它们绑在一起以构建一个演示应用程序，您可以在本教程的结尾处找到该应用程序。 与以往一样，该演示的代码可在Github上获得 。

如果您希望遵循这些示例，则需要获取库的副本，例如从您最喜欢的CDN中获取：

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

而且，如果您一路需要帮助，或者只是想了解更多信息，请不要忘记Underscore的文档内容广泛。 它还有一个庞大而活跃的社区，这意味着很容易找到帮助。

_.each ：编写可读循环

在代码中的某个时候，没有一个项目没有与此代码段相似的内容：

var artists = ['Pharrel Williams', 'Led Zeppelin', 'Rolling Stones'];

for(var i = 0; i < artists.length; i++) {
  console.log('artist: ' + artists[i]);
}

Underscore使您可以使用更具可读性的语法编写等效代码：

var artists = ['Pharrel Williams', 'Led Zeppelin', 'Rolling Stones'];

_.each(artists, function(artist, index, artists) {
  console.log('artist: ' + artist);
});

整洁吧？ _.each()具有两个参数：

• 要遍历的数组（或对象）。
• 回调函数。

对于数组中的每个元素_.each()将调用回调函数（在文档中称为iteratee ）。 在回调内部，我们可以访问另外三个参数：

• 当前迭代索引的数组值（ artist ）。 例如，对于上面的代码段，我们将在第一次迭代中获得“ Pharrel Williams”。
• 当前迭代的数量（ index ），在我们的情况下，其范围为0到2。
• 我们要遍历的数组（ artists ）。

如您所见，代码更具可读性，并且我们无需使用artists[i]就可以访问数组中的各个元素，如在使用for循环的示例中所见。

见笔_.each由SitePoint（ @SitePoint ）上CodePen 。

接下来，我们将看到模板引擎的行为。

_.template() ：直观而直接

自单页应用程序兴起以来，拥有可靠的前端模板引擎已成为我们工作堆栈的基本需求。

Underscore提供了一个模板引擎，对于那些熟悉PHP或Ruby on Rails之类的语言的人来说，它似乎非常熟悉。

从前面的片段继续，我们将演示_.template()工作方式。 我们将通过在代码中添加几行来做到这一点，如下所示：

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的模板引擎不仅允许替换单个值，而且还允许在模板本身内部执行脚本。 只需进行一次修改，我们就可以使摘要更加强大。

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()以前我们是经过艺术家个人）。 该代码的输出将与前面的示例相同。

当我们希望_.template()评估JavaScript代码时，我们只需要将代码包围在<% %>之间，而不是<%= %> 。

由于调用_.template生成的模板与调用函数一样，因此我们可以使代码段更进一步，并使用<% %>标记从另一个内部调用一个模板。 这样，我们可以制作可重用的模板，因为我们可以为艺术家列表使用不同的包装器模板，并且只需为其包含的每个项目调用模板即可。

见笔_.template（）由SitePoint（ @SitePoint上） CodePen 。

最后，让我们看一下_.filter()函数。

_.filter() ：您所需要的只是一个布尔函数

_.filter()接收一个数组和一个回调函数作为参数。 然后，它为数组中的每个元素调用函数，并返回一个新数组，其中包含该函数对其求值为真的那些元素。

我们的回调函数还将接收三个参数，如_.each()情况：数组中与当前迭代索引对应的元素，迭代的索引以及数组本身。

为了澄清这一点，让我们对代码段进行一些修改。

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']作为数组参数。 这是到目前为止的演示。

见笔_.filter（）由SitePoint（ @SitePoint上） CodePen 。

说够了。 让我们为更有意义的事情工作。

我们的演示应用

别忘了，这个演示的代码可以在Github上找到 。

我们将构建一个使用API​​的小型应用程序，显示获得的信息，并允许用户过滤显示的内容。 为此，我们将使用：

• Underscore.js
• jQuery的
• Spotify Web API

更具体地说，该应用程序将从Spotify获取一些艺术家信息，并使用_.template ， _.each和_.filter将它们显示在页面上，并允许用户按流派缩小结果范围。

为此，我们将代码分为三个不同的模块：

• _isAwesome.Config ：保存将在整个应用程序中使用的信息。
• _isAwesome.Template ：负责模板的编译。
• _isAwesome ：这是主要模块，负责响应用户操作并更新UI。

它们全部遵循模块模式 。

配置模块

Config模块包含要使用的模板的ID，以及我们将查询的API的URL，以及我们想要从Spotify获得的艺术家的ID。 这样，我们可以通过在数组中添加更多元素来添加更多艺术家。

模板模块

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

主模块

该模块负责将Ajax请求发送到从Config模块获得的URL，并使用Template模块中的模板呈现内容。

除此之外，该模块还负责根据用户单击的过滤器过滤项目。

筛选器和我们的模板都包含在HTML中。

要实现过滤，我们将依靠HTML 5数据属性和jQuery的数据接口 。 这更多是为了方便起见，但是如果您希望本机执行此操作，则浏览器支持非常好 。

这是我们将用来进行过滤的按钮的标记：

<button class="btn btn-default sized"
        data-filter-field="genres"
        data-filter-value="album rock"
        data-action="filter">Album Rock</button>

这是我们将传递给过滤器函数的对象的示例：

{
  action: 'filter',
  field: 'genres',
  value: 'rock'
}

我们将模板的HTML作为我们index.html一部分，包含在<script>标记内，我们可以通过将其类型设置为不同于通常的text/javascript类型来防止执行该HTML。 为了保持一致性，我们将其设置为underscore/template 。

我们将有两个模板。 第一个将包含艺术家列表，而第二个将包含要显示的单个艺术家。 如上所述，我们将使用所谓的嵌入式模板 。 我们将从另一个模板（ 'item-list' ）中调用一个模板（ 'item-tpl' 'item-list' ）。

然后，在文件的底部，我们将包括我们的库和三个脚本。 另外，为了使它更具视觉吸引力，我们在标题中添加了一些基本样式。

就是这样。

请参阅CodePen上的SitePoint （ @SitePoint ）提供的Pen Underscore Awesomeness 。

结论

下划线是一种令人愉悦的工作方式，并且正如我所展示的，它使您可以编写干净，易读且易于维护的代码。

我们可以在应用程序中添加更多内容（例如，通过使用_.pluck（）动态生成过滤器），但是我认为我们已经足够入门。

你呢？ 您是否曾与Underscore合作？ 您愿意尝试一下吗？ 您是否尝试了提供类似功能的替代方法（即lodash ）？ 在下面的评论中让我知道。

From: https://www.sitepoint.com/getting-started-with-underscore-js/