开始使用下划线

钥匙要点

• underscore.js是一个JavaScript库，为各种用例提供​​功能性实用程序，使代码更易于读写，并且在本机JavaScript中不总是可用的功能。
>
• 库包括用于编写可读循环的常见方法，例如_.each（），_.template（）用于直观和直接的模板，以及_.filter（）用于使用boolean函数过滤数组的_.filter（）。
underscore.js轻巧，并由许多大牌项目使用，包括《今日美国》，《 LinkedIn》和《汗学院》。
>使用unterscore.js，jQuery和Spotify Web API的演示应用程序演示了如何使用库从API获取和显示数据，并允许用户过滤结果。

本文由Agbonghama Collins和Ryan Chenkie进行了同行评审。感谢SitePoint所有的同行评审员制作SitePoint内容的最佳状态！

underscore.js是由Jeremy Ashkenas撰写的JavaScript库，为各种用例提供​​了功能性实用程序，我们作为开发人员在面对Web项目时可能会遇到这些用例。> 它制作的代码更容易阅读：

>

它使代码更易于编写：

>

_.isEmpty({});
// true

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

>它本身甚至可以用作模板引擎：>

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

>下划线是一个轻量级的库（仅5.7kb，缩小和GZPECT），并由多种知名项目使用，例如：>

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

美国今日

LinkedIn

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

汗学院

• 现在，让我们更具体地开始潜入其主要功能。>
好零件
在本教程中，我将重点介绍下划线最常见的三种方法：

_。每个（）

_。template（）

_。filter（）

>我将解释它们是如何单独使用的，然后将它们绑在一起以构建在教程结束时可以找到的演示应用程序。与以往一样，此演示的代码可在GitHub上获得。
• >
如果您想遵循示例，则需要获取图书馆的副本，例如，您喜欢的cdn：>
>，如果您发现自己一路需要帮助，或者您只是好奇地发现更多，请不要忘记，下划线的文档是广泛的。它也有一个庞大而活跃的社区，这意味着很容易找到帮助。
• >
_。每个：写入可读循环

在代码中的某个时刻，没有一个与此片段相似的单个项目：

>下划线使您可以使用更可读的语法编写等效代码：>

_.isEmpty({});
// true

整洁，是吗？ _.EATEAD（）采用两个参数：

• 段（或对象）要迭代。
>
• >回调函数。

对于我们的数组中的每个元素_..each（）中的每个元素将调用回调函数（在文档中称为 itementere

）。在回调中，我们可以访问另外三个参数：

当前迭代索引（艺术家）的数组值。例如，对于上面的摘要，我们将获得第一次迭代的“ pharrel williams”。

>
• >当前迭代的数量（索引），在我们的情况下，该迭代的数量将从0到2不等。
我们正在通过（艺术家）迭代的数组。
您可以看到代码更可读，我们可以访问数组中的各个元素而无需艺术家[i]，就像我们在示例中看到的示例。
• >请参阅codepen上的sitepoint（@sitepoint）的笔
接下来，我们将看到模板引擎的行为。

_。template（）：直观而直接

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

>下划线提供了一个模板引擎，对于那些熟悉PHP或Ruby在Rails上的语言的人来说，它似乎很熟悉。 在以前的片段中继续进行

，我们将演示_.template（）的工作方式。我们将通过在我们的代码中添加几行，如下所示：

>在这里，我们正在使用字符串参数调用_.template（）函数，该函数包括定界符中的一些数据（）。当以这种方式调用时，_.template（）返回一个函数，我们可以一次又一次使用。

>

>我们可以使用ArtistTemplate（）调用我们的新功能，将其传递给对象字面作为参数。这将返回我们最初传递给_.template（）的字符串，替换与模板自由变量相对应的任何对象属性。在我们的情况下

>下划线的模板引擎不仅允许更换单个值，而且还允许在模板本身内部执行脚本。通过一次修改，我们可以使我们的片段更加强大。

>

>我们已将对_.each（）的调用纳入代表我们模板的字符串，这使我们更改了调用模板的方式。由于我们现在在_.template（）函数中迭代，因此我们可以将完整的艺术家阵列传递到ArtistTemplate（）（以前我们正在通过单个艺术家）。此代码的输出将与上一个示例中的输出相同。

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

>

当我们想要_.template（）评估JavaScript代码时，我们只需要在> 的之间包围我们的代码

>自调用由_.template生成的模板就像调用函数一样，我们可以将摘要更进一步，并通过使用 tags将一个模板从另一个内部调用。这样，我们可以制作可重复使用的模板，因为我们可以为我们的艺术家列表提供不同的包装模板，并为其包含的每个项目调用模板。>

>请参见codepen上的sitepoint（@sitepoint）的pen _.template（）。

最后，让我们看一下_.filter（）函数。

>

_。Filter（）：您所需要的只是一个布尔函数

_。filter（）接收一个数组和回调函数作为参数。然后，它调用数组中每个元素的函数，并返回一个新数组，其中包含这些元素，该元素将函数评估为真实的事物。>

>我们的回调函数还将收到三个参数，如_.eeld（）案例：与当前迭代索引相对应的数组中的元素，迭代的索引和数组本身。 为了澄清这一点，让我们对我们的片段进行几个修改。>

正如您可能已经猜到的那样，在我们的模板中，我们将收到['acdc']作为数组参数。这是我们到目前为止的演示。

>

>请参阅codepen上的sitepoint（@sitepoint）的笔_.filter（）

足够说。让我们为某些事情变得更有意义的事物工作。

>

我们的演示应用程序

_.isEmpty({});
// true

别忘了，该演示的代码可在GitHub上获得。>我们将构建一个消耗API的小型应用程序，显示获得的信息，并允许用户过滤所显示的内容。为此，我们将使用：

> jQuery

Spotify Web API

更具体地说，该应用程序将从Spotify中获取一些艺术家信息，并通过使用下划线_.template，_.EAK和_.Filter获取一些艺术家信息，我们将在页面上显示它，并允许用户通过类型缩小结果范围。

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

态
• _isawesome.template：照顾模板编译。
• _isawesome：这是负责响应用户操作并更新UI的主要模块
• >所有这些都遵循模块模式。

config Module

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

>

模板模块
这个模块是通过在config模块中调用getTemplates（）来编译模板的一个模块。

>

主模块
>该模块负责将AJAX请求发送到我们从配置模块中获得的URL，并使用模板模块的模板呈现内容。 除此之外，此模块还根据用户点击的过滤器进行过滤项目。

。

过滤器和我们的模板都作为HTML的一部分。为了实现过滤，我们将依靠HTML 5数据属性和jQuery的数据接口。这更多是一个便利性的问题，但是如果您希望本地进行此操作，浏览器支持非常好。

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

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

_.isEmpty({});
// true

>我们将为模板提供HTML，作为我们的index.html的一部分，<script> tag，我们通过将其类型设置为与通常的文本/JavaScript不同的东西来防止执行。只是为了一致性，我们将其设置为下划线/模板。<p>> 我们将有两个模板。第一个将包含艺术家列表，而第二个将包含要展示的个人艺术家。如上所述，我们将使用所谓的<pre class="brush:php;toolbar:false">_.flatten([[0, 1], [2, 3], [4, 5]]); // [0, 1, 2, 3, 4, 5] 嵌入式模板<p>。我们将在另一个（“ item-list”）中调用一个模板（'item-tpl'）。> 然后，在文件的底部，我们将包括我们的库和三个脚本。另外，为了使其更具视觉吸引力，我们将在标题中有一些基本样式。 <p>就是这样。<em> 请参阅codepen上的sitepoint（@sitepoint）的笔下划线。 <p>结论 <p>下划线是一种与之合作的乐趣，正如我所证明的那样，它允许您编写干净，可读和易于维护的代码。 <p data-default-tab="result" data-height="475" data-slug-hash="OMyOVm" data-theme- data-user="SitePoint">>我们还可以添加几件事（例如，通过使用_.pluck（））动态生成过滤器，但我认为我们有足够的时间开始。> <h2 >>你呢？您是否与下划线合作？您愿意尝试一下吗？您是否尝试过提供类似功能的替代方案（即lodash）？在下面的评论中让我知道。<h2 >经常询问的问题（常见问题解答） > underscore.js？<ancore.js的主要目的是什么是javaScript库，提供一组可用于通用编程任务的实用程序功能。它的设计是对JavaScript中内置功能的补充，提供了额外的功能和提高生产率。它提供100多个功能，包括处理数组，对象，功能等的功能。这些功能有助于以更高效，更直接的方式操纵数据和对象，使其成为开发人员的宝贵工具。<h3 >>>我如何开始使用unterscore.js？<anter.js？<p >下面core.js，您首先需要将其包括在项目中。您可以通过从官方网站下载图书馆并将其链接到HTML文件或使用CDN来做到这一点。一旦将其包含在项目中，您就可以通过使用下划线字符（_）调用其功能开始使用其功能。 ><h3 >underscore.js提供了广泛的功能，但是一些最有用的功能包括： <p > <h3 >> 1。 _.EAT：此功能允许您在数组或对象的元素上迭代。<p ><br>1。 _.map：此函数通过使用函数在数组或对象中转换数组或对象中的每个元素来创建一个新数组。<br> <ul> 1。 _.Filter：此功能返回一个新数组，其所有元素都通过真实测试。 <br><ul>1。 _.find：此函数返回第一个传递真实测试的元素。<br><ul>1。 _.Reduce：此函数通过迭代应用功能将数组或对象降低为单个值。<br> <> <ul> > <br>我可以将unterscore.js与其他JavaScript库一起使用？是的，underscore.js旨在与其他JavaScript库兼容。它不会扩展任何内置的JavaScript对象，因此它不会与页面上运行的其他库或脚本相冲突。<ul> usterscore.js仍然维护和更新？ ，UnderScore.js被积极维护并定期更新。该图书馆是开源的，这意味着来自世界各地的开发人员为其开发和改进做出了贡献。<ante><p>> sudmerscore.js与lodash等其他公用事业图书馆相比如何？ Lodash提供了类似的功能，但是存在一些差异。 lodash是下划线的超集。但是，underscore.js较小且较轻，使其成为一个令人担忧的项目。下score.js可以在node.js环境中使用。您可以使用node.js软件包管理器NPM安装它，通过运行命令“ NPM安装下划线”。<ancore.js？<ancore.js中的“下划线”中的“下划线”是什么，underscore.js中的“下划线”是指用于调用库函数的字符（_）。这是JavaScript中的一个惯例，用于使用实用程序库的下划线字符。<h3 >>我可以为开发underscore.js？<🎜🎜><p >>是的，因为underscore.js是一个开放源项目，是一个开放源项目，任何人都可以为其发展做出贡献。您可以提交错误报告，建议新功能，甚至可以贡献代码。<h3 >我在哪里可以了解有关underscore.js的更多信息？官方网站提供了全面的文档，并且在线提供了许多教程和文章。此外，还有几本书和在线课程涵盖了深度的深度。></script>

以上是开始使用下划线的详细内容。更多信息请关注PHP中文网其他相关文章！