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

前言

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

什么是MVC

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

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

① 數據（模型，model）

② 展現層（視圖，view）

③ 用戶交互（控制器，control）

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

① 用戶和應用產生交互
② 控制器的事件處理器被觸發
③ 控制器從模型中請求數據，並將其交給視圖
④ 數據將數據呈現給用戶

以一個聊天呈現為例：

① 用戶提交一個新的聊天信息
② 控制器的事件處理器被觸發
③ 控制器創建一個新的聊天模型記錄
④ 控制器更新視圖
⑤ 用戶看到聊天窗口新的信息

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

模型

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

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

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

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

當控制器從服務器獲取數據時，他就將數據包裝成模型實例，來一個簡單的例子，不然我們都暈了：

var user = User.find('葉小釵');
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

模型

模型是保存應用程序數據的地方，我們可以把模型想象為對應用程序原始數據精心設計的抽象，並且添加了一些工具函數和事件。

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

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

var User = Backbone.Model.extend({
    //實例屬性
    instanceProperty: 'foo'
}, {
    //類屬性
    classProperty: 'bar'
});

當模型實例化時，他的initialize函數可接受任意實例參數，背后的工作原理是Backbone模型本身是構造函數，所以可以使用new生成一個新的實例:

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

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

模型與屬性

使用set()和get()函數來設置和獲取實例里的屬性:

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

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

var User = Backbone.Model.extend({
    validate: function (atts) {
        if(!atts.email || atts.email.length < 3) {
            return 'email error';
        }
    }
});
var user = new User();
user.bind('error', function (model, error) {
//錯誤處理
});
//這樣就會報錯
user.set({email: 'ss'});

結語

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