隨著 JavaScript 慢慢移出瀏覽器，出現(xiàn)了一些可以顯著提升 JavaScript 穩(wěn)健性的工具。

其中一個(gè)工具稱(chēng)為 Underscore.js，這是我們今天要介紹的工具。讓我們開(kāi)始吧！

#認(rèn)識(shí) Underscore.js

那Underscore到底是做什麼的？

Underscore 是一個(gè) JavaScript 實(shí)用工具庫(kù)，它提供了許多您在 Prototype.js（或 Ruby）中所期望的函數(shù)式程式設(shè)計(jì)支持，但沒(méi)有擴(kuò)展任何內(nèi)建 JavaScript 物件。

塊引用>

使用 Python 或 Ruby 工作的好處之一是像 map 這樣的奇特結(jié)構(gòu)，它讓生活變得更輕鬆。遺憾的是，目前版本的 JavaScript 在低階實(shí)用程式方面相當(dāng)簡(jiǎn)陋。

正如您在上面所讀到的，Underscore.js 是一個(gè)漂亮的小型 JavaScript 庫(kù)，它以?xún)H 4kb 的大小帶來(lái)了數(shù)量驚人的功能。

---

下劃線的實(shí)際應(yīng)用

“關(guān)於圖書(shū)館的廢話已經(jīng)夠多了”，我可以聽(tīng)到你說(shuō)。你是對(duì)的！在我繼續(xù)我的大喊大叫之前，讓我們先看看 Underscore 的運(yùn)行情況。

假設(shè)您有一組隨機(jī)的測(cè)驗(yàn)分?jǐn)?shù)，並且您需要一個(gè)包含 90 分?jǐn)?shù)的清單。您通常會(huì)寫(xiě)這樣的內(nèi)容：

var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], 
topScorers = [], scoreLimit = 90;

for (i=0; i<=scores.length; i++)
{
	if (scores[i]>scoreLimit)
	{
		topScorers.push(scores[i]);
	}
}

console.log(topScorers);

它非常簡(jiǎn)單，即使進(jìn)行了優(yōu)化，對(duì)於我們想要做的事情來(lái)說(shuō)也相當(dāng)冗長(zhǎng)。

讓我們看看接下來(lái)可以使用 Underscore 實(shí)現(xiàn)什麼目標(biāo)。

var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], 
topScorers = [], scoreLimit = 90;

topScorers = _.select(scores, function(score){ return score > scoreLimit;});

console.log(topScorers);

我不了解你，但我只是有一種書(shū)呆子氣。這是一些令人難以置信的簡(jiǎn)潔和可讀的程式碼。

---

很好，但我真的需要這個(gè)嗎？

嗯，這完全取決於您想要做什麼。如果您對(duì) JavaScript 的使用僅限於玩弄 DOM，那麼答案大多是否定的，因?yàn)?jQuery 可以完成您想做的大部分事情。

是的。

另一方面，如果您正在處理非 DOM 程式碼甚至複雜程式碼，請(qǐng)考慮 MVC、前端程式碼，Underscore 絕對(duì)是一個(gè)福音。

雖然該程式庫(kù)公開(kāi)的一些功能正在慢慢進(jìn)入 ECMA 規(guī)範(fàn)，但它並非在所有瀏覽器中都可用，並且讓您的程式碼跨瀏覽器工作本身就是另一個(gè)噩夢(mèng)。 Underscore 為您提供了一組很好的抽象，可以在任何地方使用。

如果您是一個(gè)以性能為導(dǎo)向的人（您應(yīng)該如此），Underscore 會(huì)回退到本機(jī)實(shí)現(xiàn)（如果可用），以確保性能盡可能最佳。

---

開(kāi)始使用

只需在此處取得原始程式碼，將其包含在您的頁(yè)面中即可。

如果您期待一個(gè)大型的設(shè)定過(guò)程，那麼您將會(huì)非常失望。只需在此處獲取原始程式碼，將其包含在您的頁(yè)面中即可。

Underscore 在全域範(fàn)圍內(nèi)透過(guò)單一物件建立並公開(kāi)其所有功能。該物件是標(biāo)題下劃線字元 _。

如果您想知道，是的，這與 jQuery 使用美元 [$] 符號(hào)的方式非常相似。就像 jQuery 一樣，您可以重新映射此字符，以防遇到衝突?；蛘撸绻裎乙粯訉?duì)波形符有一種非理性的喜愛(ài)。

---

函數(shù)式還是物件導(dǎo)向？

雖然該函式庫(kù)的官方行銷(xiāo)宣傳聲稱(chēng)它添加了函數(shù)式程式設(shè)計(jì)支持，但實(shí)際上還有另一種做事方式。

讓我們以之前的程式碼為例：

var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90;

topScorers = _.select(scores, function(score){ return score > scoreLimit;});

console.log(topScorers);

上面的方法是功能性或程序性方法。您也可以使用更直接、可能更明顯的物件導(dǎo)向方法。

var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90;

topScorers = _(scores).select(function(score){ return score > scoreLimit;});

console.log(topScorers);

沒(méi)有真正的「正確」方法來(lái)做事，但請(qǐng)記住，您可以使用後一種方法連結(jié) jQuery 式方法。

---

檢查功能

Underscore 提供了 60 多個(gè)函數(shù)，涵蓋了多種功能。從本質(zhì)上講，它們可以分為幾組功能，這些功能運(yùn)行於：

• 收藏
• 陣列
• 物件
• 函數(shù)
• 實(shí)用程式

讓我們看看每個(gè)部分的作用，如果適用，每個(gè)部分中我最喜歡的一兩個(gè)。

---

集合

集合可以是數(shù)組，也可以是對(duì)象，如果我在語(yǔ)意上是正確的，則可以是 JavaScript 中的關(guān)聯(lián)數(shù)組。

Underscore提供了許多對(duì)集合進(jìn)行操作的方法。我們之前看到了 select 方法。這裡有一些更非常有用的。

採(cǎi)摘

#假設(shè)您有一個(gè)包含鍵值對(duì)的漂亮小數(shù)組，並且您想要從每個(gè)數(shù)組中提取一個(gè)特定的屬性。有了 Underscore，一切就輕鬆了。

var Tuts = [{name : 'NetTuts', niche : 'Web Development'}, {name : 'WPTuts', niche : 'WordPress'}, {name : 'PSDTuts', niche : 'PhotoShop'}, {name : 'AeTuts', niche : 'After Effects'}];
var niches = _.pluck(Tuts, 'niche');

console.log(niches);

// ["Web Development", "WordPress", "PhotoShop", "After Effects"]

使用 pluck 就像傳入目標(biāo)物件或陣列以及選擇哪個(gè)屬性一樣簡(jiǎn)單。在這裡，我只是提取每個(gè)網(wǎng)站的利基市場(chǎng)。

地圖

Map 從集合建立一個(gè)數(shù)組，其中每個(gè)元素都可以透過(guò)函數(shù)進(jìn)行變異或以其他方式變更。

讓我們以前面的示例為例并對(duì)其進(jìn)行一些擴(kuò)展。

var Tuts = [{name : 'NetTuts', niche : 'Web Development'}, {name : 'WPTuts', niche : 'WordPress'}, {name : 'PSDTuts', niche : 'PhotoShop'}, {name : 'AeTuts', niche : 'After Effects'}];

var names = _(Tuts).pluck('name').map(function (value){return value + '+'});

console.log(names);

// ["NetTuts+", "WPTuts+", "PSDTuts+", "AeTuts+"]

由于我注意到名稱(chēng)末尾缺少加號(hào)，因此我將它們添加到提取的數(shù)組中。

這里您不僅限于簡(jiǎn)單的串聯(lián)。您可以根據(jù)自己的意愿隨意修改傳遞的值。

全部

all 如果您需要檢查集合中的每個(gè)值是否滿足特定條件，則非常有用。例如，檢查學(xué)生是否通過(guò)了每個(gè)科目。

var Scores = [95, 82, 98, 78, 65];
var hasPassed = _(Scores).all(function (value){return value>50; });

console.log(hasPassed);

// true

---

數(shù)組

Underscore 有很多專(zhuān)門(mén)處理數(shù)組的函數(shù)，這是非常受歡迎的，因?yàn)榕c其他語(yǔ)言相比，JavaScript 提供的處理數(shù)組的方法非常少。

Uniq

此方法基本上解析數(shù)組并刪除所有重復(fù)元素，只為您提供唯一元素。

var uniqTest = _.uniq([1,5,4,4,5,2,1,1,3,2,2,3,4,1]);

console.log(uniqTest);

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

當(dāng)您解析巨大的數(shù)據(jù)集并需要清除重復(fù)項(xiàng)時(shí)，這非常方便。請(qǐng)記住，僅計(jì)算元素的第一個(gè)實(shí)例，因此保留原始順序。

范圍

一種非常方便的方法，可讓您創(chuàng)建“范圍”或數(shù)字列表。讓我們看一個(gè)超級(jí)簡(jiǎn)單的例子。

var tens = _.range(0, 100, 10);

console.log(tens);

// [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]

該方法的參數(shù)依次為起始值、結(jié)束值和步長(zhǎng)值。如果您想知道，使用負(fù)步長(zhǎng)值會(huì)導(dǎo)致遞減范圍。

交叉路口

此方法將兩個(gè)數(shù)組相互比較，并返回在所有傳遞的數(shù)組中找到的元素列表，即集合論中的交集。

讓我們擴(kuò)展前面的示例來(lái)看看它是如何工作的。

var tens = _.range(0, 100, 10), eights = _.range(0, 100, 8), fives = _.range(0, 100, 5);

var common = _.intersection(tens, eights, fives );

console.log(common);

// [0, 40, 80]

很簡(jiǎn)單，對(duì)吧？您只需傳入要比較的數(shù)組列表，Underscore 就會(huì)完成剩下的工作。

---

對(duì)象

除了預(yù)期的 is 檢查之外，Underscore 還提供了各種方法來(lái)克隆、擴(kuò)展和其他操作對(duì)象。

這是我最喜歡的一些。

鍵和值

有一個(gè)巨大的對(duì)象，您只需要鍵或只需要值？使用 Underscore 真是太簡(jiǎn)單了。

var Tuts = { NetTuts : 'Web Development',  WPTuts : 'WordPress',  PSDTuts : 'PhotoShop', AeTuts : 'After Effects'};
var keys = _.keys(Tuts), values = _.values(Tuts);

console.log(keys + values);

// NetTuts,WPTuts,PSDTuts,AeTutsWeb Development,WordPress,PhotoShop,After Effects

默認(rèn)值

當(dāng)您需要?jiǎng)?chuàng)建具有合理默認(rèn)值的對(duì)象（而創(chuàng)建對(duì)象時(shí)可能不會(huì)使用該默認(rèn)值）時(shí)，此方法非常有用。

var tuts = { NetTuts : 'Web Development'};
var defaults = { NetTuts : 'Web Development', niche: 'Education'};

_.defaults(tuts, defaults);

console.log(tuts);

// Object { NetTuts="Web Development", niche="Education"}

---

函數(shù)

盡管聽(tīng)起來(lái)很奇怪，Underscore 的函數(shù)可以作用于函數(shù)。大多數(shù)函數(shù)在這里解釋起來(lái)往往相當(dāng)復(fù)雜，因此我們將看一下最簡(jiǎn)單的函數(shù)。

綁定

this 是 JavaScript 中難以捉摸的一部分，往往會(huì)讓很多開(kāi)發(fā)人員感到非常困惑。此方法旨在使其更容易解決。

var o = { greeting: "Howdy" }, 
	f = function(name) { return this.greeting +" "+ name; };

  var greet = _.bind(f, o); 

  greet("Jess")

這有點(diǎn)令人困惑，所以請(qǐng)留在這兒。綁定函數(shù)基本上讓您無(wú)論何時(shí)何地調(diào)用該函數(shù)都可以保留 this 的值。

當(dāng)您使用 this 被劫持的事件處理程序時(shí)，這特別有用。

---

實(shí)用程序

為了進(jìn)一步提高交易的吸引力，Underscore 提供了大量的實(shí)用函數(shù)。由于我們的時(shí)間已經(jīng)不多了，所以讓我們看看重要的事情。

模板化

已經(jīng)有大量的模板解決方案，但 Underscore 的解決方案因其實(shí)現(xiàn)相當(dāng)小而功能相當(dāng)強(qiáng)大而值得一看。

讓我們看一個(gè)快速示例。

var data =   {site: 'NetTuts'}, template =   'Welcome! You are at <%= site %>';

var parsedTemplate = _.template(template,  data );

console.log(parsedTemplate);

// Welcome! You are at NetTuts

首先，我們創(chuàng)建數(shù)據(jù)來(lái)填充模板，然后創(chuàng)建模板本身。默認(rèn)情況下，Underscore 使用 ERB 樣式分隔符，盡管這是完全可自定義的。

有了這些，我們就可以簡(jiǎn)單地調(diào)用 template 來(lái)傳遞我們的模板和數(shù)據(jù)。我們將結(jié)果存儲(chǔ)在一個(gè)單獨(dú)的字符串中，以便稍后根據(jù)需要用于更新內(nèi)容。

請(qǐng)記住，這是 Underscore 模板的極其簡(jiǎn)單的演示。您可以使用 分隔符在模板內(nèi)使用任何 JavaScript 代碼。當(dāng)您需要迭代復(fù)雜的對(duì)象（例如 JSON 源）時(shí)，您可以與 Underscore 出色的集合函數(shù)配合來(lái)快速創(chuàng)建模板。

---

仍然不相信你應(yīng)該選擇這個(gè)

jQuery 和 Underscore 齊頭并進(jìn)。

不不不，你們都錯(cuò)了！如果說(shuō)有什么不同的話，那就是 jQuery 和 Underscore 相輔相成，齊頭并進(jìn)。真的！

看，jQuery 在一些事情上做得非常好。其中最主要的是 DOM 操作和動(dòng)畫(huà)。它不涉及較高或較低級(jí)別的任何內(nèi)容。如果像 Backbone 或 Knockout 這樣的框架處理更高級(jí)別的問(wèn)題，那么 Underscore 可以解決所有相對(duì)裸機(jī)的問(wèn)題。

從更廣泛的角度來(lái)看，jQuery 在瀏覽器之外沒(méi)有什么用途，因?yàn)樗拇蟛糠止δ芏寂c DOM 相關(guān)。另一方面，下劃線可以在瀏覽器或服務(wù)器端使用，沒(méi)有任何問(wèn)題。事實(shí)上，Underscore 依賴(lài)它的 Node 模塊數(shù)量最多。

好了，今天就講到這里?？紤]到 Underscore 的范圍，我們?cè)谶@里僅僅觸及了皮毛。請(qǐng)務(wù)必查看更多圖書(shū)館內(nèi)容，如果您有任何疑問(wèn)，請(qǐng)?jiān)谙旅娴脑u(píng)論中告訴我。非常感謝您的閱讀！

以上是擁抱 Underscore.js 的溫暖的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！