【javascript激增的思考04】MVC與Backbone.js(beta)

前言

最近整理了很多前端面試題的東西，今天又去參加了一次面試，不知各位煩不煩，我反正有點累了，於是我們今天繼續回到我們前段時間研究的問題，我們再來看看MVC吧。

什麼是MVC

又回到這個問題了，到底什麼是MVC呢？

MVC是一種設計模式，他將應用劃分為：

① 資料（模型，model）

② 展現層（視圖，view）

③ 使用者互動（控制器，control）

一個事件發生的過程是這樣的：

① 使用者和應用產生互動② 控制器的事件處理器被觸發③ 控制器從模型中請求資料，並將其交給視圖④ 資料將資料呈現給使用者以一個聊天呈現為例：① 使用者提交一個新的聊天資訊② 控制器的事件處理器被觸發③ 控制器建立一個新的聊天模型記錄④ 控制器更新視圖⑤ 使用者看到聊天視窗新的資訊

以上的過程很簡單，但是有複雜的情況，於是我們會清晰的分割各個部分，這樣各個部分可以獨立開發，方便測試與維護，對解耦有好處。

模型

模型用以存放應用的所有資料對象，比如一個User模型，用以存放使用者列表、它們的屬性及所有與模型有關的邏輯。

模型不必知道視圖與控制器的細節，模型只需要包含資料以及直接和這些資料相關的邏輯。

任何事件處理代碼，視圖模板，以及那些和模型無關的邏輯都應該隔離刀模型以外。

模型與視圖代碼混到一起是違法MVC規則的。

當控制器從伺服器擷取資料時，他就將資料封裝成模型執行個體，來一個簡單的例子，不然我們都暈了：

1 var user = User.find('葉小釵');2 user.destroy();

怎麼樣夠簡單吧，先不要在意這個，後面點我們還會講到他。

視圖

視圖層是呈現給使用者的，使用者與之產生互動。

在js中，視圖大多是HTML+CSS+Javascript模板組成的，模板中除了簡單的條件陳述式外，不要有其它邏輯。

視圖不必知道模型和控制器幹了什麼，視圖中處理邏輯的代碼應該少一點

控制器

控制器是視圖與模型之間的紐帶，控制器由視圖擷取事件和輸入（事件來源於視圖），對他們進行處理，並更新視圖。

當頁面載入時，控制器會給視圖添加事件監聽，當使用者和應用發生互動時，控制器中的事件觸發程序就開始工作了。

var Controller = {};(Controller.users = function ($) {    var nameClick = function () {};    //在頁面上增加事件監聽    $(function () {        $('#view').click(nameClick);    })})(jQuery);

這坨莫名其妙的代碼，就是我們的控制器啦。

PS：現在各位覺得看著有點暈是很正常的，我研究了幾次了都還是有點暈呢，你們不孕的話我就要哭了

由於我們這裡不是要詳細的介紹MVC，所以就不多說了，後面點我們會有單獨的系列研究MVC這個東西，我們進入BackBone的學習吧。

什麼是Backbone

Backbone是構建javascript應用程式的一個優秀的類庫，他簡潔、輕量級但是他功能齊全，覆蓋了所有基礎功能，同時靈活性也很高。

該類庫提供了model、controller、view由此構成了我們構建應用程式的骨架。

backbone只有4k，只提供了模型、事件、集合、視圖、控制器和持久化等核心概念。

PS：backbone依賴於underscore.js

模型

模型是儲存應用程式資料的地方，我們可以把模型想象為對應用程式未經處理資料精心設計的抽象，並且添加了一些工具函數和事件。

1 var User = Backbone.Model.extend({2     initialize: function () { }3 });

extend第一個參數是一個對象，他成為了模型執行個體的屬性，第二個參數是可選的類屬性的雜湊，多次調用extend可以產生模型的子類，他們將繼承父親所有的類和執行個體的屬性。

1 var User = Backbone.Model.extend({2     //執行個體屬性3     instanceProperty: 'foo'4 }, {5     //類屬性6     classProperty: 'bar'7 });

當模型執行個體化時，他的initialize函數可接受任意執行個體參數，背後的工作原理是Backbone模型本身是建構函式，所以可以使用new產生一個新的執行個體:

1 var User = Backbone.Model.extend({2     initialize: function (name) {3         this.set({name, name});4     }5 });6 var user = new User('葉小釵');

PS：至於你們懂不懂，我反正是不懂了，所以繼續學習下去吧，囧.....

模型與屬性

使用set()和get()函數來設定和擷取執行個體裡的屬性:

user.set({name: '葉小釵'});

可以使用validate函數驗證一個屬性：

 1 var User = Backbone.Model.extend({ 2     validate: function (atts) { 3         if(!atts.email || atts.email.length < 3) { 4             return 'email error'; 5         } 6     } 7 }); 8 var user = new User(); 9 user.bind('error', function (model, error) {10 //錯誤處理11 });12 //這樣就會報錯13 user.set({email: 'ss'});

結語

這塊有點晦澀，我們今天暫時到這裡，我私下研究下再寫了。。。