午夜福利91久久福利,久久久久久久久久免免费精品,欧洲精品久久久av无码电影

擁抱 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; iscoreLimit) { 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 &gt; 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 &gt; 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&gt;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 ';  var parsedTemplate = _.template(template,  data );  console.log(parsedTemplate);  // Welcome! You are at NetTuts

首先，我們創建數據來填充模板，然后創建模板本身。默認情況下，Underscore 使用 ERB 樣式分隔符，盡管這是完全可自定義的。

有了這些，我們就可以簡單地調用 template 來傳遞我們的模板和數據。我們將結果存儲在一個單獨的字符串中，以便稍后根據需要用于更新內容。

請記住，這是 Underscore 模板的極其簡單的演示。您可以使用分隔符在模板內使用任何 JavaScript 代碼。當您需要迭代復雜的對象（例如 json 源）時，您可以與 Underscore 出色的集合函數配合來快速創建模板。