本文緊接第二部分:《backbonejs框架的技巧及模式(2)》
當第一次使用backbone.js開發應用時,典型的檢視結構是像這樣的:
var view = backbone.view.extend(,
template: _.template($(『#template』).html()),
render: function()
});
在這裡,任何對模型的改變都會觸發整個檢視的完全重新整理。我第一次用backbone.js開發時,我是此模式的實踐者。但隨著檢視**的增長,我很快意識到,這種方式不利於維護或優化,因為模型的任一屬性發生改變時,都會觸發檢視的完全重新整理。
當我遇到這個問題,我快速用google搜尋了一下,看別人是怎麼做的。結果找到了ian storm taylor的部落格,「分解backbone.js渲染方法」,他在其中描述了在模型中監聽單個的屬性變化,然後僅僅重新渲染相對於檢視中屬性變化的那部分。taylor也描述了返回物件的引用,以便單個渲染函式可以很容易的鏈結在一起。上面的例子現在就可以修改的易於維護、效能也更優。因為我們只需做檢視的部分重新整理。
var view = backbone.view.extend(,
rendera: function() ,
renderb: function() ,
render: function()
});
我要提醒一下:有不少外掛程式,比如backbone.stickit和backbone.modelbinder,提供了模型屬性與檢視元素的鍵值繫結,這會讓你省去編寫很多樣板**的時間,所以,如果你需要實現比較複雜的表單字段,那麼可以看看這些外掛程式。
正如 jeremy ashkenas 在 backbone.js的github問題中所指出的,backbone.js並沒有實施資料模型與檢視層之間的真正分隔,除非模型不是引用檢視建立的。因為backbone.js並沒有實施任何關注點分隔,所以你應該將其分離嗎?我和許多backbone.js開發人員,如oz katz和dayal,都相信答案毫無疑問是yes:模型與集合,也就是資料層,應該徹底的與繫結它們的檢視無關,保持乙個清晰的關注點分離。如果你沒有遵循關注點分離,你的**庫會很快變成義大利麵條式的**,而實際上是沒有人喜歡義大利麵條式的**。
保持模型與檢視無關將會幫助你預防義大利麵條式的**,而沒有人喜歡義大利麵條式的**!
保持資料層完全與檢視層無關,這會使你建立出更具模組化、可重用和可維護的**庫。你可以很容易地在應用程式各個地方重用和擴充套件模型與集合,而無需考慮它們所繫結的檢視。遵循此模式使對專案不熟悉的新手也能迅速深入到**庫,因為他們會確切地知道**發生了渲染,業務邏輯存在於**。
這個模式也實現了單一職責原則——它規定了每個類應該具有單個職責,而且它的職責應該封裝在類中,因為模型與集合負責處理資料,而檢視則負責處理渲染。
此模式的最佳演示是理解整個例子。比如說對搜尋頁的結果進行排序,搜尋頁允許使用者新增兩個不同的過濾型別,foo和bar,每個型別代表不同的過濾規則。那麼,你的url結構應該是這樣:
'search/:foo'
'search/:bar'
'search/:foo/:bar'
現在,所有路由都使用相同的檢視和模型,這樣大多數人都喜歡用同乙個函式search()來實現。然而,你要是檢查過backbone.js**的話,你會發現它裡面沒有任何引數對映的排序;這些引數只是從左至右依次傳入函式。這樣,為了能統一使用同一函式,你要停止建立不同的函式並正確地把引數對映到search()。
routes: ,
search: function(foo, bar) ,
// i know this function will actually still map correctly, but for explanatory purposes, it's left in.
searchfoo: function(foo) ,
searchbar: function(bar) ,
如你所想,此模式可以使路由功能快速膨脹。當我第一次遇到這個問題時,我試圖建立一些正規表示式解析實際的函式定義來實現引數的對映,當然這是可以工作的——但也是受約束的。因此,我放棄了我的這個想法(或許我仍然可以通過backbonejs的外掛程式來解決)。我進入github的issues頁面,其中ashkenas建議應該讓所有的引數都對映到search函式。
上面的**現在可修改為如下的維護性更強的**:
routes: ,
search: function()
else if(arguments[i] === 'something to determine bar') }},
通常它會對那些backbone.js新手造成困擾:model.fetch()不會清除你的模型,而是繼承模型的屬性。因此,假如模型具有屬性x、y和z,你取回y和z,那麼屬性x仍然是模型中的那個x,而屬性y和z會被更新。下面的例子說明了這一點:
var model = backbone.model.extend(
});var model = new model();
/* model.attributes yields
*/model.fetch();
/* let』s assume that the endpoint returns this
*//* model.attributes now yields
*/
集合框架的閱讀技巧
jdk1.2以後出現的常見框架的常用子類物件,存在的規律 字首名是資料結構名,字尾名是所屬體系名 arraylist 陣列結構,陣列查詢快,list可以重複,可以增刪改查 linkedlist 鍊錶結構,增刪快,fist,last remove,add,get hashset 雜湊表,元素必須覆蓋e...
框架型網頁的優化技巧
從一開始,框架型 對於即使是專業的搜尋引擎優化也成了乙個挑戰。是否該用框架技術去設計乙個新網頁,也已成了大家爭論不休的話題。在這篇文章中,我們為你提供了一些基本的優化技術,同時你也能夠了解到 如何讓乙個使用框架的網頁為主要搜尋引擎正確索引及如何對其進行優化。首先,讓我們來看看使用框架設計的 具有哪些...
框架型網頁的優化技巧
從一開始,框架型 對於即使是專業的搜尋引擎優化也成了乙個挑戰。是否該用框架技術去設計乙個新網頁,也已成了大家爭論不休的話題。在這篇文章中,我們為你提供了一些基本的優化技術,同時你也能夠了解到 如何讓乙個使用框架的網頁為主要搜尋引擎正確索引及如何對其進行優化。首先,讓我們來看看使用框架設計的 具有哪些...