概述
Underscore.js是一個很精乾的函式庫,壓縮後只有4KB。它提供了幾十種函數式程式設計的方法,大大方便了Javascript的程式設計。 MVC框架backbone.js就是基於這個函式庫。
它定義了一個下劃線(_)對象,函數庫的所有方法都屬於這個對象。這些方法大致上可以分成:集合(collection)、陣列(array)、函數(function)、物件(object)和工具(utility)五大類。
在node.js下安裝
Underscore.js不僅可以用於瀏覽器環境,還可以用於node.js。安裝指令如下:
npm install underscore
但是,node.js不能直接使用_作為變數名,因此要用下面的方法使用underscore.js。
var u = require("underscore");
與集合有關的方法
Javascript語言的資料集合,包括兩種結構:陣列和物件。以下的方法同時適用於這兩種結構。
map
此方法對集合的每個成員依序進行某種操作,將傳回的值依序存入一個新的陣列。
_.map([1, 2, 3], function(num){ return num * 3; }); // [3, 6, 9] _.map({one : 1, two : 2, three : 3 }, function(num, key){ return num * 3; }); // [3, 6, 9]
each
此方法與map類似,依序對集合的每個成員進行某種操作,但是不傳回值。
_.each([1, 2, 3], alert); _.each({one : 1, two : 2, three : 3}, alert);
reduce
此方法依序對集合的每個成員進行某種操作,然後將操作結果累計在某一個初始值之上,全部操作結束之後,傳回累計的值。
此方法接受三個參數。第一個參數是被處理的集合,第二個參數是對每個成員進行操作的函數,第三個參數是累計用的變數。
_.reduce([1, 2, 3], function(memo, num){ return memo num; }, 0); // 6
reduce方法的第二個參數是操作函數,它本身又接受兩個參數,第一個是累計用的變量,第二個是集合每個成員的值。
filter 和 reject
filter方法依序對集合的每個成員進行某種操作,只回傳操作結果為true的成員。
_.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); // [2, 4, 6]
reject方法只回傳操作結果為false的成員。
_.reject([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); // [1, 3, 5]
every 和 some
every方法依序對集合的每個成員進行某種操作,如果所有成員的操作結果都為true,則傳回true,否則傳回false。
_.every([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); // false
some方法則是只要有一個成員的操作結果為true,則傳回true,否則傳回false。
_.some([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); // true
find
此方法依序對集合的每個成員進行某種操作,傳回第一個操作結果為true的成員。如果所有成員的操作結果都為false,則傳回undefined。
_.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); // 2
contains
如果某個值在集合內,則方法傳回true,否則傳回false。
_.contains([1, 2, 3], 3); // true
countBy
此方法依序對集合的每個成員進行某種操作,將操作結果相同的成員算作一類,最後返回一個對象,表明每種操作結果對應的成員數量。
_.countBy([1, 2, 3, 4, 5], function(num) { return num % 2 == 0 ? 'even' : 'odd'; }); // {odd: 3, even: 2 }
shuffle
此方法傳回一個打亂次序的集合。
_.shuffle([1, 2, 3, 4, 5, 6]); // [4, 1, 6, 3, 5, 2]
size
此方法傳回集合的成員數量。
_.size({one : 1, two : 2, three : 3}); // 3
與物件有關的方法
toArray
此方法將物件轉為陣列。
_.toArray({a:0,b:1,c:2}); // [0, 1, 2]
pluck
此方法將多個物件的某一個屬性的值,提取成一個陣列。
var stooges = [{name : 'moe', age : 40}, {name : 'larry', age : 50}, {name : 'curly', age : 60}]; _.pluck(stooges, 'name' ); // ["moe", "larry", "curly"]
與函數相關的方法
bind
此方法綁定函數運行時的上下文,並作為一個新函數傳回。
_.bind(function, object, [*arguments])
請看下面的實例。
var o = { p: 2, m: function (){console.log(p);} }; o.m() // 2
bindAll
該方法將某個物件的所有方法(除非特別聲明),全部綁定在該物件上面。
var buttonView = { label : 'underscore', onClick : function(){ alert('clicked: ' this.label); }, onHover : function(){ console. ; _.bindAll(buttonView);
partial
此方法綁定將某個函數與參數綁定,然後以新函數傳回。
var add = function(a, b) { return a b; }; add5 = _.partial(add, 5); add5(10); // 15
memoize
此方法會快取一個函數針對某個參數的運行結果。
var fibonacci = _.memoize(function(n) { return n
如果一個函數有多個參數,則需要提供一個hashFunction,用來產生標識快取的雜湊值。
delay
此方法可以將函數延後指定的時間再運行。
var log = _.bind(console.log, console); _.delay(log, 1000, 'logged later'); // 'logged later'
defer
此方法可以將函數延後到待運行的任務數為0時再執行,類似setTimeout延遲0秒運行的效果。
_.defer(function(){ alert('deferred'); });
throttle
此方法傳回一個函數的新版本。連續呼叫這個新版本的函數時,必須等待一定時間才會觸發下一次執行。
// 回傳updatePosition函數的新版本 var throttled = _.throttle(updatePosition, 100); // 新版的函數每過100毫秒才會觸發一次 $(window).scroll(throttled);
;
debounce
此方法也是傳回一個函數的新版本。每次呼叫這個新版本的函數,必須與上一次呼叫間隔一定的時間,否則就無效。它的典型應用是防止使用者雙擊某個按鈕,導致兩次提交表單。
程式碼如下:
$("button").on("click", _.debounce(submitForm, 1000));
once
此方法傳回一個新版本的函數,使得這個函數只能被執行一次。主要用於物件的初始化。
程式碼如下:
var initialize = _.once(createApplication); initialize(); initialize(); // Application只創造一次
after
此方法傳回一個新版本的函數,這個函數只有在被呼叫一定次數後才會運行,主要用於確認一組操作全部完成後,再做出反應。
程式碼如下:
var renderNotes = _.after(notes.length, render); _.each(notes, function(note) { note.asyncSave({success: renderNotes}); }); // 所有的note都保存,以後,才會運行一次
wrap
此方法以函數為參數,傳入另一個函數,最後傳回前者的新版本。
程式碼如下:
var hello = function(name) { return "hello: " name; }; hello = _.wrap(hello, function(func) { return "before, " func("moe") ", after"; }); hello }); hello (); // 'before, hello: moe, after'
compose
此方法接受一系列函數作為參數,由後向前依序運行,上一個函數的運行結果,作為後一個函數的運行參數。也就是說,將f(g(),h())的形式轉換成f(g(h()))。
var greet = function(name){ return "hi: " name; }; var exclaim = function(name){ return "hi: " name; }; var exclaim = function(statement){ return statement "!"; }; var welcome = _.compose(exclaim, greet); }; var welcome = _.compose(exclaim, greet); ); // 'hi: moe!'
工具方法
template
此方法用於編譯HTML範本。它接受三個參數。
_.template(templateString, [數據], [settings])
三個參數的意義如下:
templateString:範本字串
data:輸入模板的資料
settings:設定
templateString
模板字串templateString就是普通的HTML語言,其中的變數使用的形式插入;data物件負責提供變數的值。
var txt = "
"; _.template(txt, {word : "Hello World"}) // "
Hello World
"
如果變數的值包含五個特殊字元(& ” ‘ /),就需要用轉義。
var txt = "
"; _.template(txt, {word : "H & W"}) //
H & W
JavaScript指令可以用的形式插入。下面是判斷語句的例子。
var txt = "" "" "" ""; ""; }) // Hello World
常見的用法還有循環語句。
var list = "
”; _.template(list, {people : [‘moe', ‘curly', ‘larry']}); // “
moe
curly
larry”
如果template方法只有第一個參數templateString,省略第二個參數,那麼會傳回一個函數,以後可以向這個函數輸入資料。
var t1 = _.template("Hello !"); t1({ user: "" }) // 'Hello !'
data
templateString中的所有變量,在內部都是obj物件的屬性,而obj物件就是指第二個參數data物件。下面兩句語句是等同的。
_.template("Hello !", { user: "" }) _.template("Hello !", { user: "" })
如果要改變obj這個物件的名字,需要在第三個參數中設定。
_.template("Title: ", null,
因為template在變數替換時,內部使用with語句,所以上面這樣的做法,運行速度會比較快。