MVC簡介

基本介紹

MVC即模型(Model),視圖(View)和控制（Controller)，旨在實現(xiàn)Web系統(tǒng)的職能分工，具體來說就是使業(yè)務邏輯和數(shù)據顯示分離。

在MVC中，視圖（View）為用戶提供交互，模型（Model）負責處理數(shù)據和業(yè)務邏輯，控制器（Controller）則是View與Model之間溝通的橋梁。

MVC一個很重要的標志就是，視圖（View）與模型（Model）沒有直接的交互，而是通過控制器（Controller）來溝通。具體地：用戶通過View進行輸入，Controller負責把輸入傳遞給Model，Model處理，存取數(shù)據，然后Controller將處理的結果返回View進行展示。

優(yōu)缺點

MVC架構的優(yōu)勢是顯著的，但也存在一些缺點。

一方面，MVC能極大地降低數(shù)據與視圖之間的耦合性，具有較高的可維護性和復用性，還能提高分工效率和降低生命周期的成本，從而有利于軟件工程化管理。

 然而，MVC架構卻不是那么容易理解，且會增加系統(tǒng)的復雜性，還會降低視圖層訪問數(shù)據層的效率，不適用于小型工程的開發(fā)。

Backbone

BackBone是一個重要的前端MVC框架，用于支持Javactript應用的重量級開發(fā)。下面將對Backbone.Events(和控制器有著密切聯(lián)系)以及Backbone.Model（和模型有著密切聯(lián)系）的應用進行介紹，并結合實例分析Backbone框架是如何支持前端MVC的架構的。所有的學習資料來自于BackBone官網：http://backbonejs.org/

Backbone.Events

在Backbones中，事件可以作為一個任何一個對象的模型，對象能夠綁定和觸發(fā)一個事件被命名的事件。 

對于一個被聲明了的對象object（下文的討論，所有的對象都以object為例），首先為object添加extend。

._extend(object,Backbone.Events);　　

然后為對象添加一個事件：格式為：

object.on(event,callback,[context]);

第一個參數(shù)為事件名，第二參數(shù)為事件調用時的回調函數(shù)。

以下面的事件為例：”alert”為事件名，function(msg)為回調函數(shù)，msg為觸發(fā)事件時所傳入的參數(shù)，與觸發(fā)器中的參數(shù)一致。

object.on(“alert”,function(msg){alert(msg);});

觸發(fā)object.on進行回調的是object.trigger(“alert”, ”It's an event”)。

同object.on，object.trigger第一個參數(shù)為事件名，而第二個參數(shù)傳入的是object.on中回調函數(shù)所需要的參數(shù)。事件通過事件名被綁定在一個對象上?？梢钥吹竭@個事件在綁定前是不需要聲明的，事件能夠被觸發(fā)的內在聯(lián)系是共同的對象和事件名。特別地，如果事件名為”all”，那么調用任何object.trigger時，都會觸發(fā)object.on中的回調函數(shù)。

與標準的事件綁定相對應的，標準觸發(fā)的格式為：　

object.trigger(event,[*arg]);

也可用js中類似屬性的定義來綁定一個對象的多個事件，如：

object.on{
  “setup”:function_a(),
  “change”:function_b(),
  “destroy”:function_c()
}

觸發(fā)相應的”setup”,”change”,和”destroy”時可以分別調用相應的function_a()等。

如果需要解除對象上一個事件的綁定，則使用object.off(event,callback,[context])函數(shù)。標準參數(shù)列表與相應的object.on一致。
具體的，以上面的”setup”:function_a()為例：　　

 //解綁定
 object.off(“setup”,function_a);
 
 //移除所有的”setup”事件（可能綁定多個回調函數(shù)）
 object.off(“setop”);
 
 //移除所有的綁定function_a這個回調函數(shù)的事件
 object.off(function_a);
 
 //移除所有的事件
 object.off()。

如果希望事件被觸發(fā)一次就解綁定，則直接使用object.once(event,callback,[context])。

使用object.listenTo(other_object, event, callback)，可監(jiān)聽其他對象的事件，事件被觸發(fā)時同樣調用callback的回調函數(shù)。類似的，可使用標準的stopListenTo([other_object], [event],[callback])，進行解綁定。

 ListenTo在MVC架構中很有用，如使用視圖類的對象監(jiān)聽Model類的數(shù)據處理事件，并進行回調（一般是對數(shù)據進行展示）。

BackBone.Model

Models是一個Javascript應用的核心。很多時候，models需要處理許多數(shù)據，以及與這些數(shù)據相關的邏輯。然而，對于javascript來說，并沒有類似java那樣的類的結構的存在。然而在實際應用中，卻需要這樣的模型結構。而BackBone.Model為js提供了很好的拓展，讓javascript也能實現(xiàn)類的結構和功能，更準確地說，實現(xiàn)類似C#中的屬性。下面給出官方介紹的一個簡化的實例(為了簡潔起見，之后所有介紹的模型都采用Model，而模型的對象都采用model)：

//類似類的定義
var Model = BackBone.Model.extend({
  myData:”year2013”，
  myFunction:function(){myData = “year2014”;}
);

//類似類的實例化
var model = new Model; 

//類似對象調用成員方法
my_class.myFunction();

可以看到以上的代碼就實現(xiàn)了類似類的結構。與傳統(tǒng)javascript對象的屬性區(qū)別在于，一個是具體的對象（只能使用一次），另一個是一個類的模型（可以被多次實例化）。

既然已經有了類似類的實例化功能，那么自然，BackBone.Model也為我們提供了類似構造函數(shù)的拓展。當實例化一個對象時，采用new Model([attributes], [options])的標準格式進行實例化。例如：

new Model({
    myData:”2013”
});

此外，經過拓展BackBone的js同C#一樣，還具有屬性的get和set函數(shù)。類似下面地進行調用：

var date = model.get(myData);
model.set(myData,”2014”);　

此外，BackBone.Model還為js拓展了許多模型的默認函數(shù)，不一一介紹。需要使用的時候，建議在官網http://backbonejs.org/#Model-url的Model進行查詢。

BackBone實例：Todo

下面結合官網中所給出的實例Todos來看一看BackBone在前端MVC的具體應用。 

這是一個純js實現(xiàn)的任務單application。

代碼中設計了四個“類”來實現(xiàn)任務單的功能：

//Model層面，實現(xiàn)一條任務的數(shù)據操作
var Todo = BackBone.Model.extend({});

//Model層面，實現(xiàn)整個任務欄的數(shù)據操作，Collection拓展了本地存儲功能
var TodoList = BackBone.Collection.extend({});

//BackBone.View.extend()，View和Controller層面
//負責接收用戶操作和修改Model的數(shù)據，在render()函數(shù)中展示數(shù)據

//與Todo的Dom元素相關
var TodoView = BackBone.View.extend({});
//最頂層的UI以及控制器
var AppView = BackBone.View.extend({});

首先來分析實例中的Model，采用自下而上的分析方法：

Todo代表每一條Todo中的任務，與之相關的邏輯是其是否已經完成，需要指定其是否完成，需要初始屬性done:false，另外需要設置done的函數(shù)，為此添加屬性：

toggle:function(){
  this.save({done:!this.get(“done”);});
}

可以看到這個屬性在數(shù)據層從邏輯上實現(xiàn)了View層復選框的功能。

對于TodoList，使用Collection這一Model，為的是實現(xiàn)的數(shù)據本地存儲。

屬性含有model：Todo，即低層的，實現(xiàn)一個任務的實例。

此外，還需要localStorage : new BackBone.LocalStorage(“todos-backbone”)。用來進行本地存儲。

在數(shù)據處理方面，需要對低層的done屬性進行封裝，實現(xiàn)了done:function()，返回被改變的done的位置。

在View和Controller層面，自下而上地依次設計了下面兩個“類”。

var TodoView = BackBone.View.extend({});
var AppView = BackBone.View.extend({});　

首先，對于TodoView，設置了一系列事件的響應，TodoView在Controller層面，對于View，接收這樣的事件監(jiān)聽：

events: {
   "click .toggle"  : "toggleDone",
   "dblclick .view" : "edit",
   "click a.destroy" : "clear",
   "keypress .edit" : "updateOnEnter",
   "blur .edit"   : "close"
} 

以clear()為例，clear中調用this.model.destroy()進行數(shù)據層的處理，這就反饋到了數(shù)據層。

clear: function() {
   this.model.destroy();
}

另一方面，在初始化時，指定了TodoView對數(shù)據層的this.model添加了監(jiān)聽，當this.model的change事件發(fā)生，TodoView發(fā)生this.remove(render亦同)，而這是表現(xiàn)層的內容，這樣就反饋到了表現(xiàn)層。

initialize: function() {
   this.listenTo(this.model, 'change', this.render);
   this.listenTo(this.model, 'destroy', this.remove);
}

這樣一來便完成了從View（輸入） -> Controller -> Model（處理） -> Contoller -> View（展示）的MVC架構。從上面可以看到，從數(shù)據的接收，處理，返回，展示，所有過程都是自動的，且View和Model沒有任何的耦合。這是標準的MVC模式。

從TodoView向上則是總體的AppView。它的邏輯行為也是類似的，亦是在視圖層接收數(shù)據，通過View類特有的結構反饋到數(shù)據層，然后數(shù)據層又無耦合地將數(shù)據返回到視圖層進行展示。但是作為最頂層的View和Controller，其在視圖層的render函數(shù)中實現(xiàn)的是總體的渲染，更底層的渲染則交給TodoView，在控制層的事件響應和事件監(jiān)聽實現(xiàn)的則也是封裝度更高的處理。如添加一個todo，依次有如下的傳遞：

//View->Controller
"keypress #new-todo": "createOnEnter"

//Controller->Model
createOnEnter: function(e) {
   if (e.keyCode != 13) return;
   if (!this.input.val()) return;

   Todos.create({title: this.input.val()});
   this.input.val('');
}

//Model -> Controller
this.listenTo(Todos, 'add', this.addOne);

//Controller -> View
addOne: function(todo) {
   var view = new TodoView({model: todo});
   this.$("#todo-list").append(view.render().el);
}

在最后一個addOne函數(shù)中，則又包含了底層的MVC轉換流程，但是這顯然不是我們所關心的，它是由底層封裝好的，在Backbone的框架會自動地進行MVC的邏輯傳遞。

Todo小結

這就是整個Todo Totuorial的結構?？偟恼f來，BackBone所為我們提供的這種特定的結構很好地實現(xiàn)了MVC的架構，完成了View與Model的分離。而Controller則很好地充當了轉換者的角色。

心得體會

由于之前沒有學習過前端MVC的知識，因此在探究Todo實例的時候遇到了很多困難。Todo實例與傳統(tǒng)的網頁應用有很大的差異：

         a)  無靜態(tài)html代碼，為純js實現(xiàn)

         b)  數(shù)據與界面的交互原理十分難懂

         c)  View的構建與數(shù)據的處理鴻溝太大。

         d)  事件監(jiān)聽與事件綁定用途不同，響應與回調流程容易混淆

一開始，真的很難理解Todo的結構，但是后來，反過來，從MVC的結構來思考，從視圖開始分析，探究View->Controller->Model->Controller->View的線索。便得出了整體的結構以及Controller的傳遞過程?？梢哉f，理解Controller這個橋梁對于貫通整個MVC結構有至關重要的作用。建議從View的輸入下手，對Controller進行分析。

另一方面，可以適當采取自上而下與自下而上的結構進行分析。如對View的分析，采用自上而下方法較為容易入手，而Models采用自下而上的方法能幫助我們更清晰地理解Models的結構。

最新評論