DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 深入解析Backbone.js框架的依賴庫Underscore.js的作用
深入解析Backbone.js框架的依賴庫Underscore.js的作用
編輯:JavaScript基礎知識     

backbone必須依賴underscore.js才能夠使用,它必須通過underscore中的函數來完成訪問頁面元素、處理元素的基本操作。
注:backbone可以很好的與其它js庫一起工作,所以說它是一個庫,而不是框架。
Underscore並沒有對原生對象進行擴展,而是調用_()方法進行封裝,一旦封裝完成,js對象就變為Underscore對象,也可以通過Underscore對象的Value()方法獲取原生js對象中的數據。(jquery通過$()方法得到Jquery對象)
Underscore總共有60多個函數,按照處理對象的不同,可以分為集合類、數組類、功能函數類、對象類、工具函數類五大類模塊。

underscore template()函數說明:

該函數包含三種模板:

(1)<% %>:包含邏輯代碼,渲染後不會展現。
(2)<%= %>:數據類型,渲染後展示數據。
(3)<%- %>:將HTML標記轉換為常用字符串,以避免代碼攻擊。

調用格式:

_.template(templateString, [data], [setting])

沒有實現雙向數據綁定。

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()方法更關注函數的執行頻率,即在指定頻率內函數只會被調用一次。
 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字符轉換為實體形式(例如它會將雙引號轉換為"形式),用於避免XSS攻擊。
當我們希望將數據中的HTML作為文本顯示出來時,常常會使用<%- %>標簽。
Underscore還允許你修改這3種標簽的形式,如果我們想使用{% %}、{%= %}、{%- %}作為標簽,可以通過修改templateSettings來實現,就像這樣:

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

 在本例中,我們將模板內容和需要填充的數據傳遞給template方法,它會按以下順序進行處理:

(1)將模板內容解析為可執行的JavaScript(解析模板標簽)
(2)通過with語句將解析後的JavaScript作用域修改為我們傳遞的數據對象,這使我們能夠直接在模板中通過變量形式訪問數據對象的屬性
(3)執行解析後的JavaScript(將數據填充到模板)
(4)返回執行後的結果
我們經常會遇到一種情況:多次調用template方法將數據渲染到同一個模板。
假設我們有一個分頁列表,列表中的每一條數據都通過模板渲染,當用戶進入下一頁,我們會獲取下一頁的數據並重新渲染,實際上每次渲染的模板都是同一個,但剛才描述的template所有處理過程總會被執行。
其實Underscore的template方法提供了一種更高效的調用方式,我們將上面代碼中的最後兩句修改為:

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

你會發現細微的差別:我們在調用template方法時只傳遞了模板內容,而沒有傳遞數據,此時template方法會解析模板內容,生成解析後的可執行JavaScript代碼,並返回一個函數,而函數體就是解析後的JavaScript,因此當我們調用該函數渲染數據時,就省去了模板解析的動作。
 
你應該將返回的函數存儲起來(就像我將它存儲在render變量中一樣),再通過調用該函數來渲染數據,特別是在同一個模板可能會被多次渲染的情況下,這樣做能提高執行效率(具體提升多少,應該根據你的模板長度和復雜度而定,但無論如何,這都是一個良好的習慣)。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved