擁抱 Underscore.js 的溫暖

隨著 JavaScript 慢慢移出瀏覽器，出現了一些可以顯著提升 JavaScript 穩健性的工具。

其中一個工具稱為 Underscore.js，這是我們今天要介紹的工具。讓我們開始吧！

---

#認識 Underscore.js

那Underscore到底是做什麼的？

Underscore 是一個 JavaScript 實用工具庫，它提供了許多您在 Prototype.js（或 Ruby）中所期望的函數式程式設計支持，但沒有擴展任何內建 JavaScript 物件。

块引用>

使用 Python 或 Ruby 工作的好處之一是像 map 這樣的奇特結構，它讓生活變得更輕鬆。遺憾的是，目前版本的 JavaScript 在低階實用程式方面相當簡陋。

正如您在上面所讀到的，Underscore.js 是一個漂亮的小型 JavaScript 庫，它以僅 4kb 的大小帶來了數量驚人的功能。

---

下劃線的實際應用

“關於圖書館的廢話已經夠多了”，我可以聽到你說。你是對的！在我繼續我的大喊大叫之前，讓我們先看看 Underscore 的運行情況。

假設您有一組隨機的測驗分數，並且您需要一個包含 90 分數的清單。您通常會寫這樣的內容：

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);

它非常簡單，即使進行了優化，對於我們想要做的事情來說也相當冗長。

讓我們看看接下來可以使用 Underscore 實現什麼目標。

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);

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

---

很好，但我真的需要這個嗎？

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

是的。

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

雖然該程式庫公開的一些功能正在慢慢進入 ECMA 規範，但它並非在所有瀏覽器中都可用，並且讓您的程式碼跨瀏覽器工作本身就是另一個噩夢。 Underscore 為您提供了一組很好的抽象，可以在任何地方使用。

如果您是一個以性能為導向的人（您應該如此），Underscore 會回退到本機實現（如果可用），以確保性能盡可能最佳。

---

開始使用

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

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

Underscore 在全域範圍內透過單一物件建立並公開其所有功能。該物件是標題下劃線字元 _。

如果您想知道，是的，這與 jQuery 使用美元 [$] 符號的方式非常相似。就像 jQuery 一樣，您可以重新映射此字符，以防遇到衝突。或者，如果您像我一樣對波形符有一種非理性的喜愛。

---

函數式還是物件導向？

雖然該函式庫的官方行銷宣傳聲稱它添加了函數式程式設計支持，但實際上還有另一種做事方式。

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

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);

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

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);

沒有真正的「正確」方法來做事，但請記住，您可以使用後一種方法連結 jQuery 式方法。

---

檢查功能

Underscore 提供了 60 多個函數，涵蓋了多種功能。從本質上講，它們可以分為幾組功能，這些功能運行於：

• 收藏
• 陣列
• 物件
• 函數
• 實用程式

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

---

集合

集合可以是數組，也可以是對象，如果我在語意上是正確的，則可以是 JavaScript 中的關聯數組。

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

採摘

#假設您有一個包含鍵值對的漂亮小數組，並且您想要從每個數組中提取一個特定的屬性。有了 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 就像傳入目標物件或陣列以及選擇哪個屬性一樣簡單。在這裡，我只是提取每個網站的利基市場。

地圖

Map 從集合建立一個數組，其中每個元素都可以透過函數進行變異或以其他方式變更。

让我们以前面的示例为例并对其进行一些扩展。

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+"]

由于我注意到名称末尾缺少加号，因此我将它们添加到提取的数组中。

这里您不仅限于简单的串联。您可以根据自己的意愿随意修改传递的值。

全部

all 如果您需要检查集合中的每个值是否满足特定条件，则非常有用。例如，检查学生是否通过了每个科目。

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

console.log(hasPassed);

// true

---

数组

Underscore 有很多专门处理数组的函数，这是非常受欢迎的，因为与其他语言相比，JavaScript 提供的处理数组的方法非常少。

Uniq

此方法基本上解析数组并删除所有重复元素，只为您提供唯一元素。

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]

当您解析巨大的数据集并需要清除重复项时，这非常方便。请记住，仅计算元素的第一个实例，因此保留原始顺序。

范围

一种非常方便的方法，可让您创建“范围”或数字列表。让我们看一个超级简单的例子。

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

console.log(tens);

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

该方法的参数依次为起始值、结束值和步长值。如果您想知道，使用负步长值会导致递减范围。

交叉路口

此方法将两个数组相互比较，并返回在所有传递的数组中找到的元素列表，即集合论中的交集。

让我们扩展前面的示例来看看它是如何工作的。

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]

很简单，对吧？您只需传入要比较的数组列表，Underscore 就会完成剩下的工作。

---

对象

除了预期的 is 检查之外，Underscore 还提供了各种方法来克隆、扩展和其他操作对象。

这是我最喜欢的一些。

键和值

有一个巨大的对象，您只需要键或只需要值？使用 Underscore 真是太简单了。

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

默认值

当您需要创建具有合理默认值的对象（而创建对象时可能不会使用该默认值）时，此方法非常有用。

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

_.defaults(tuts, defaults);

console.log(tuts);

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

---

函数

尽管听起来很奇怪，Underscore 的函数可以作用于函数。大多数函数在这里解释起来往往相当复杂，因此我们将看一下最简单的函数。

绑定

this 是 JavaScript 中难以捉摸的一部分，往往会让很多开发人员感到非常困惑。此方法旨在使其更容易解决。

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

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

  greet("Jess")

这有点令人困惑，所以请留在这儿。绑定函数基本上让您无论何时何地调用该函数都可以保留 this 的值。

当您使用 this 被劫持的事件处理程序时，这特别有用。

---

实用程序

为了进一步提高交易的吸引力，Underscore 提供了大量的实用函数。由于我们的时间已经不多了，所以让我们看看重要的事情。

模板化

已经有大量的模板解决方案，但 Underscore 的解决方案因其实现相当小而功能相当强大而值得一看。

让我们看一个快速示例。

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

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

console.log(parsedTemplate);

// Welcome! You are at NetTuts

首先，我们创建数据来填充模板，然后创建模板本身。默认情况下，Underscore 使用 ERB 样式分隔符，尽管这是完全可自定义的。

有了这些，我们就可以简单地调用 template 来传递我们的模板和数据。我们将结果存储在一个单独的字符串中，以便稍后根据需要用于更新内容。

请记住，这是 Underscore 模板的极其简单的演示。您可以使用 分隔符在模板内使用任何 JavaScript 代码。当您需要迭代复杂的对象（例如 JSON 源）时，您可以与 Underscore 出色的集合函数配合来快速创建模板。

---

仍然不相信你应该选择这个

jQuery 和 Underscore 齐头并进。

不不不，你们都错了！如果说有什么不同的话，那就是 jQuery 和 Underscore 相辅相成，齐头并进。真的！

看，jQuery 在一些事情上做得非常好。其中最主要的是 DOM 操作和动画。它不涉及较高或较低级别的任何内容。如果像 Backbone 或 Knockout 这样的框架处理更高级别的问题，那么 Underscore 可以解决所有相对裸机的问题。

从更广泛的角度来看，jQuery 在浏览器之外没有什么用途，因为它的大部分功能都与 DOM 相关。另一方面，下划线可以在浏览器或服务器端使用，没有任何问题。事实上，Underscore 依赖它的 Node 模块数量最多。

好了，今天就讲到这里。考虑到 Underscore 的范围，我们在这里仅仅触及了皮毛。请务必查看更多图书馆内容，如果您有任何疑问，请在下面的评论中告诉我。非常感谢您的阅读！

以上是擁抱 Underscore.js 的溫暖的詳細內容。更多資訊請關注PHP中文網其他相關文章！