《BackboneJS框架的技巧及模式》 3

本文緊接第二部分：《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
*/

《BackboneJS框架的技巧及模式》 3

集合框架的閱讀技巧

框架型網頁的優化技巧

框架型網頁的優化技巧

《BackboneJS框架的技巧及模式》 3

集合框架的閱讀技巧

框架型網頁的優化技巧

框架型網頁的優化技巧

相關推薦