Underscore.js 入門

1 Underscore對象封裝

Underscore並無在原生的JavaScript對象原型中進行擴展，而是像jQuery同樣，將數據封裝在一個自定義對象中（下文中稱「Underscore對象」）。

你能夠經過調用一個Underscore對象的value()方法來獲取原生的JavaScript數據，例如：

// 定義一個JavaScript內置對象  
var jsData = {  
    name : 'data'  
}  
 
// 經過_()方法將對象建立爲一個Underscore對象  
// underscoreData對象的原型中包含了Underscore中定義的全部方法，你能夠任意使用  
var underscoreData = _(jsData);  
 
// 經過value方法獲取原生數據, 即jsData  
underscoreData.value();

2 優先調用JavaScript 1.6內置方法

Underscore中有許多方法在JavaScript1.6中已經被歸入規範，所以在Underscore對象內部，會優先調用宿主環境提供的內置方法（若是宿主環境已經實現了這些方法），以此提升函數的執行效率。

而對於不支持JavaScript 1.6的宿主環境，Underscore會經過本身的方式實現，而對開發者來講，這些徹底是透明的。

這裏所說的宿主環境，多是Node.js運行環境，或客戶端瀏覽器。

3 改變命名空間

Underscore默認使用_（下劃線）來訪問和建立對象，但這個名字可能不符合咱們的命名規範，或容易引發命名衝突。

咱們能夠經過noConflict()方法來改變Underscore的命名，並恢復_（下劃線）變量以前的值，例如：

<script type="text/javascript">  
    var _ = '自定義變量';  
</script>  
<script type="text/javascript" src="underscore/underscore-min.js"></script>  
<script type="text/javascript">  
    // Underscore對象  
    console.dir(_);  
    // 將Underscore對象重命名爲us, 後面都經過us來訪問和建立Underscore對象  
    var us = _.noConflict();  
    // 輸出"自定義變量"  
    console.dir(_);  
</script>

4 鏈式操做

還記得咱們在jQuery中是如何進行連接操做嗎？例如：

$('a')  
    .css('position', 'relative')  
    .attr('href', '#')  
    .show();

Underscore一樣支持鏈式操做，但你須要先調用chain()方法進行聲明：

var arr = [10, 20, 30];  
_(arr)  
    .chain()  
    .map(function(item){ return item++; })  
    .first()  
    .value();

若是調用了chain()方法，Underscore會將所調用的方法封裝在一個閉包內，並將返回值封裝爲一個Underscore對象並返回：

// 這是Underscore中實現鏈式操做的關鍵函數，它將返回值封裝爲一個新的Underscore對象，並再次調用chain()方法，爲方法鏈中的下一個函數提供支持。  
var result = function(obj, chain) {  
    return chain ? _(obj).chain() : obj;  
}

5 擴展Underscore

咱們能夠經過mixin()方法輕鬆地向Underscore中擴展自定義方法，例如：

_.mixin({  
    method1: function(object) {  
        // todo  
    },  
    method2: function(arr) {  
        // todo  
    },  
    method3: function(fn) {  
        // todo  
    }  
});

這些方法被追加到Underscore的原型對象中，全部建立的Underscore對象均可以使用這些方法，它們享有和其它方法一樣的環境。

6 遍歷集合

each()和map()方法是最經常使用用到的兩個方法，它們用於迭代一個集合（數組或對象），並依次處理集合中的每個元素，例如：

var arr = [1, 2, 3];  
 
_(arr).map(function(item, i) {  
    arr[i] = item + 1;  
});  
 
var obj = {  
    first : 1,  
    second : 2  
}  
 
_(obj).each(function(value, key) {  
    return obj[key] = value + 1;  
});

map()方法與each()方法的做用、參數相同，但它會將每次迭代函數返回的結果記錄到一個新的數組並返回。

7 函數節流

函數節流是指控制一個函數的執行頻率或間隔（就像控制水流的閘門同樣），Underscore提供了debounce()和throttle()兩個方法用於函數節流。

爲了更清楚地描述這兩個方法，假設咱們須要實現兩個需求：

　　需求1：當用戶在文本框輸入搜索條件時，自動查詢匹配的關鍵字並提示給用戶（就像在Tmall輸入搜索關鍵字時那樣）

首先分析第1個需求，咱們能夠綁定文本框的keypress事件，當輸入框內容發生變化時，查詢匹配關鍵字並展現。假設我想查詢「windows phone」，它包含13個字符，而我輸入完成只花了1秒鐘（好像有點快，就意思意思吧），那麼在這1秒內，調用了13次查詢方法。這是一件很是恐怖的事情，若是Tmall也這樣實現，我擔憂它會不會在光棍節到來以前就掛掉了（固然，它並無這麼脆弱，但這絕對不是最好的方案）

更好的方法是，咱們但願用戶已經輸入完成，或者正在等待提示（也許他懶得再輸入後面的內容）的時候，再查詢匹配關鍵字。

最後咱們發現，在咱們指望的這兩種狀況下，用戶會暫時中止輸入，因而咱們決定在用戶暫停輸入200毫秒後再進行查詢（若是用戶在不斷地輸入內容，那麼咱們認爲他可能很明確本身想要的關鍵字，因此等一等再提示他）

這時，利用Underscore中的debounce()函數，咱們能夠輕鬆實現這個需求：

<input type="text" id="search" name="search" />  
<script type="text/javascript">  
    var query = _(function() {  
        // 在這裏進行查詢操做  
    }).debounce(200);  
 
    $('#search').bind('keypress', query);  
</script>

你能看到，咱們的代碼很是簡潔，節流控制在debounce()方法中已經被實現，咱們只告訴它當query函數在200毫秒內沒有被調用過的話，就執行咱們的查詢操做，而後再將query函數綁定到輸入框的keypress事件。

query函數是怎麼來的？咱們在調用debounce()方法時，會傳遞一個執行查詢操做的函數和一個時間（毫秒數），debounce()方法會根據咱們傳遞的時間對函數進行節流控制，並返回一個新的函數（即query函數），咱們能夠放心大膽地調用query函數，而debounce()方法會按要求幫咱們作好控制。

　　需求2：當用戶拖動瀏覽器滾動條時，調用服務器接口檢查是否有新的內容

再來分析第2個需求，咱們能夠將查詢方法綁定到window.onscroll事件，但這顯然不是一個好的作法，由於用戶拖動一次滾動條可能會觸發幾十次甚至上百次onscroll事件。

咱們是否可使用上面的debounce()方法來進行節流控制？當用戶拖動滾動條完畢後，再查詢新的內容？但這與需求不符，用戶但願在拖動的過程當中也能看到新內容的變化。

所以咱們決定這樣作：用戶在拖動時，每兩次查詢的間隔很多於500毫秒，若是用戶拖動了1秒鐘，這可能會觸發200次onscroll事件，但咱們最多隻進行2次查詢。

利用Underscore中的throttle()方法，咱們也能夠輕鬆實現這個需求：

<script type="text/javascript">  
    var query = _(function() {  
        // 在這裏進行查詢操做  
    }).throttle(500);  
 
    $(window).bind('scroll', query);  
</script>

代碼仍然十分簡潔，由於在throttle()方法內部，已經爲咱們實現的全部控制。

你可能已經發現，debounce()和throttle()兩個方法很是類似（包括調用方式和返回值），做用卻又有不一樣。

它們都是用於函數節流，控制函數不被頻繁地調用，節省客戶端及服務器資源。

• debounce()方法關注函數執行的間隔，即函數兩次的調用時間不能小於指定時間。
• throttle()方法更關注函數的執行頻率，即在指定頻率內函數只會被調用一次。

5.8 模板解析

Underscore提供了一個輕量級的模板解析函數，它能夠幫助咱們有效地組織頁面結構和邏輯。

我將經過一個例子來介紹它：

<!-- 用於顯示渲染後的標籤 -->  
<ul id="element"></ul>  
 
<!-- 定義模板，將模板內容放到一個script標籤中 -->  
<script type="text/template" id="tpl">  
    <% for(var i = 0; i < list.length; i++) { %>  
        <% var item = list[i] %>  
        <li>  
            <span><%=item.firstName%> <%=item.lastName%></span>  
            <span><%-item.city%></span>  
        </li>  
    <% } %>  
</script>  
<script type="text/javascript" src="underscore/underscore-min.js"></script>  
<script type="text/javascript">  
    // 獲取渲染元素和模板內容  
    var element = $('#element'),  
        tpl = $('#tpl').html();  
 
    // 建立數據, 這些數據多是你從服務器獲取的  
    var data = {  
        list: [  
            {firstName: '<a href="#">Zhang</a>', lastName: 'San', city: 'Shanghai'},  
            {firstName: 'Li', lastName: 'Si', city: '<a href="#">Beijing</a>'},  
            {firstName: 'Wang', lastName: 'Wu', city: 'Guangzhou'},  
            {firstName: 'Zhao', lastName: 'Liu', city: 'Shenzhen'}  
        ]  
    }  
 
    // 解析模板, 返回解析後的內容  
    var html = _.template(tpl, data);  
    // 將解析後的內容填充到渲染元素  
    element.html(html);  
</script>

在本例中，咱們將模板內容放到一個<script>標籤中，你可能已經注意到標籤的type是text/template而不是text/javascript，由於它沒法做爲JavaScript腳本直接運行。

我也建議你將模板內容放在<script>中，由於若是你將它們寫在一個<div>或其它標籤中，它們可能會被添加到DOM樹中進行解析（即便你隱藏了這個標籤也沒法避免）。

 

_.template模板函數只能解析3種模板標籤（這比Smarty、JSTL要簡單得多）：

<%  %>：用於包含JavaScript代碼，這些代碼將在渲染數據時被執行。

<%= %>：用於輸出數據，能夠是一個變量、某個對象的屬性、或函數調用（將輸出函數的返回值）。

<%- %>：用於輸出數據，同時會將數據中包含的HTML字符轉換爲實體形式（例如它會將雙引號轉換爲&quot;形式），用於避免XSS攻擊。

當咱們但願將數據中的HTML做爲文本顯示出來時，經常會使用<%- %>標籤。

Underscore還容許你修改這3種標籤的形式，若是咱們想使用{% %}、{%= %}、{%- %}做爲標籤，能夠經過修改templateSettings來實現，就像這樣：

_.templateSettings = {  
    evaluate : /\{%([\s\S]+?)\%\}/g,  
    interpolate : /\{%=([\s\S]+?)\%\}/g,  
    escape : /\{%-([\s\S]+?)%\}/g  
}

在本例中，咱們將模板內容和須要填充的數據傳遞給template方法，它會按如下順序進行處理：

• 將模板內容解析爲可執行的JavaScript（解析模板標籤）
• 經過with語句將解析後的JavaScript做用域修改成咱們傳遞的數據對象，這使咱們可以直接在模板中經過變量形式訪問數據對象的屬性
• 執行解析後的JavaScript（將數據填充到模板）
• 返回執行後的結果

咱們常常會遇到一種狀況：屢次調用template方法將數據渲染到同一個模板。

假設咱們有一個分頁列表，列表中的每一條數據都經過模板渲染，當用戶進入下一頁，咱們會獲取下一頁的數據並從新渲染，實際上每次渲染的模板都是同一個，但剛纔描述的template全部處理過程總會被執行。

其實Underscore的template方法提供了一種更高效的調用方式，咱們將上面代碼中的最後兩句修改成：

// 解析模板, 返回解析後的內容  
var render = _.template(tpl);  
var html = render(data);  
// 將解析後的內容填充到渲染元素  
element.html(html);

你會發現細微的差異：咱們在調用template方法時只傳遞了模板內容，而沒有傳遞數據，此時template方法會解析模板內容，生成解析後的可執行JavaScript代碼，並返回一個函數，而函數體就是解析後的JavaScript，所以當咱們調用該函數渲染數據時，就省去了模板解析的動做。

你應該將返回的函數存儲起來（就像我將它存儲在render變量中同樣），再經過調用該函數來渲染數據，特別是在同一個模板可能會被屢次渲染的狀況下，這樣作能提升執行效率（具體提高多少，應該根據你的模板長度和複雜度而定，但不管如何，這都是一個良好的習慣）。