開始使用下劃線

鑰匙要點

• 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中文網其他相關文章！