理解javascript中的MVC模式，javascriptmvc模式

理解javascript中的MVC模式，javascriptmvc模式

MVC模式是軟體工程中一種軟體架構模式，一般把軟體模式分為三部分，模型(Model)+視圖(View)+控制器(Controller);

模型：模型用於封裝與應用程式的商務邏輯相關的資料以及對資料處理的方法。模型有對資料直接存取的權利。模型不依賴 “視圖” 和 “控制器”, 也就是說 模型它不關心頁面如何顯示及如何被操作.

視圖：視圖層最主要的是監聽模型層上的資料改變，並且即時的更新html頁面。當然也包括一些事件的註冊或者ajax請求操作(發布事件),都是放在視圖層來完成。

控制器：控制器接收使用者的操作，最主要是訂閱視圖層的事件，然後調用模型或視圖去完成使用者的操作;比如：當頁面上觸發一個事件，控制器不輸出任何東西及對頁面做任何處理; 它只是接收請求並決定調用模型中的那個方法去處理請求, 然後再確定調用那個視圖中的方法來顯示返回的資料。

下面我們來實現一個簡單的下拉框控制項，我們可以對它進行增刪操作；如所示：

代碼如下：

/* 模型用於封裝與應用程式的商務邏輯相關的資料以及對資料處理的方法。模型有對資料直接存取的權利。 模型不依賴 "視圖" 和 "控制器", 也就是說 模型它不關心頁面如何顯示及如何被操作.*/function Mode(elems) {  // 所有元素  this._elems = elems;   // 被選中元素的索引  this._selectedIndex = -1;   // 增加一項  this.itemAdd = new Event(this);   // 刪除一項  this.itemRemoved = new Event(this);   this.selectedIndexChanged = new Event(this);} Mode.prototype = {   constructor: 'Mode',   // 擷取所有的項  getItems: function(){    return [].concat(this._elems);  },  // 增加一項  addItem: function(elem) {    this._elems.push(elem);    this.itemAdd.notify({elem:elem});  },  // 刪除一項  removeItem: function(index) {    var item = this._elems[index];    this._elems.splice(index,1);    this.itemRemoved.notify({elem:item});     if(index === this._selectedIndex) {      this.setSelectedIndex(-1);    }  },  getSelectedIndex: function(){    return this._selectedIndex;  },  setSelectedIndex: function(index){    var previousIndex = this._selectedIndex;    this._selectedIndex = index;    this.selectedIndexChanged.notify({previous : previousIndex});  }};/* 下面是觀察者模式類,它又叫發布---訂閱模式;它定義了對象間的一種一對多的關係， 讓多個觀察者對象同時監聽某一個主題對象，當一個對象發生改變時，所有依賴於它的對象都將得到通知。*/function Event(observer) {  this._observer = observer;  this._listeners = [];}Event.prototype = {  constaructor: 'Event',  attach : function(listeners) {    this._listeners.push(listeners);  },  notify: function(objs){    for(var i = 0,ilen = this._listeners.length; i ) {      this._listeners[i](this._observer,objs);    }  }}; /* * 視圖顯示模型資料，並觸發UI事件。 */function View(model,elements){  this._model = model;  this._elements = elements;   this.listModified = new Event(this);  this.addButtonClicked = new Event(this);  this.delButtonClicked = new Event(this);  var that = this;   // 綁定模型監聽器  this._model.itemAdd.attach(function(){    that.rebuildList();  });  this._model.itemRemoved.attach(function(){    that.rebuildList();  });   // 將監聽器綁定到HTML控制項上  this._elements.list.change(function(e){    that.listModified.notify({index: e.target.selectedIndex});  });  // 添加按鈕綁定事件  this._elements.addButton.click(function(e){    that.addButtonClicked.notify();  });  // 刪除按鈕綁定事件  this._elements.delButton.click(function(e){    that.delButtonClicked.notify();  });}View.prototype = {  constructor: 'View',  show: function(){    this.rebuildList();  },  rebuildList: function(){    var list = this._elements.list,      items,      key;    list.html("");    items = this._model.getItems();    for(key in items) {      if(items.hasOwnProperty(key)) {        list.append('' +items[key]+ '');      }    }    this._model.setSelectedIndex(-1);  }};/* 控制器響應使用者操作，調用模型上的變化函數 負責轉寄請求，對請求進行處理*/function Controller(model,view) {  this._model = model;  this._view = view;  var that = this;   this._view.listModified.attach(function(sender,args){    that.updateSelected(args.index);  });  this._view.addButtonClicked.attach(function(){    that.addItem();  });  this._view.delButtonClicked.attach(function(){    that.delItem();  });}Controller.prototype = {  constructor: 'Controller',   addItem: function(){    var item = window.prompt('Add item:', '');    if (item) {      this._model.addItem(item);    }  },   delItem: function(){    var index = this._model.getSelectedIndex();    if(index !== -1) {      this._model.removeItem(index);    }  },   updateSelected: function(index){    this._model.setSelectedIndex(index);  }};

HTML代碼如下：

<select id="list" size="10" style="width: 10rem">select>br/><button id="plusBtn"> + button><button id="minusBtn"> - button>

頁面初始化代碼如下：

$(function () {  var model = new Mode(['PHP', 'JavaScript']),   view = new View(model, {    'list' : $('#list'),     'addButton' : $('#plusBtn'),     'delButton' : $('#minusBtn')    }),    controller = new Controller(model, view);        view.show();});

程式碼分析如下：

  先分析下我們是要實現什麼樣的功能，準系統有：

一個下拉框，通過使用者輸入的操作來實現使用者增加一項及使用者選中一項後刪除一項的功能;
當然也添加了使用者切換到那一項的事件;

比如我們現在來增加一條資料的時候，在視圖層上添加監聽事件，如下代碼：

// 添加按鈕綁定事件this._elements.addButton.click(function(e){  that.addButtonClicked.notify();});

然後調用觀察者類Event中的方法notify(發布一個事件) that.addButtonClicked.notify();大家都知道，觀察者模式又叫發布-訂閱模式，讓多個觀察者對象同時監聽某一個主題對象，當某一個主題對象發生改變的時候，所有依賴它的對象都會得到通知;
因此在控制層(Controller)我們可以使用如下代碼對發行者進行監聽操作：

this._view.addButtonClicked.attach(function(){  that.addItem();});

之後調用自身的方法addItem();代碼如下：

addItem: function(){  var item = window.prompt('Add item:', '');  if (item) {    this._model.addItem(item);  }}

調用模型層(model)的方法addItem();把一條資料插入到select框裡面去;model(模型層)的addItem()方法代碼如下：

// 增加一項addItem: function(elem) {  this._elems.push(elem);  this.itemAdd.notify({elem:elem});},

如上代碼 增加一項後，通過 this.itemAdd 發布一個訊息，然後在視圖層(View)上通過如下代碼來監聽這個訊息;代碼如下：

// 綁定模型監聽器this._model.itemAdd.attach(function(){   that.rebuildList();});

最後監聽到模型上(Model)的資料發生改變後，及時調用自身的方法rebuildList()去更新頁面上的資料;

模型層(Model)最主要做業務資料封裝操作。視圖層(View)主要發布事件操作及監聽模型層上的資料，如果模型層上有資料改變的時候，及時更新頁面操作，最後顯示給頁面上來，控制層(Controller)主要監聽視圖層(View)的事件，調用模型層(Model)的方法來更新模型上的資料，模型層資料更新後，會發布一條訊息出去，最後視圖層(View)通過監聽模型層(Model)的資料變化，來更新頁面的顯示; 如上是MVC的基本流程。
MVC的優點：
        1. 耦合性低：視圖層和業務層分離了，如果頁面上顯示改變的話，直接在視圖層更改即可，不用動模型層和控制層上的代碼;也就是視圖層 與 模型層和控制層
已經分離了;所以很容易改變應用程式層的資料層和商務規則。
        2. 可維護性：分離視圖層和商務邏輯層也使得WEB應用更易於維護和修改。
MVC的缺點：
        個人覺得適合於大型項目，對於中小型項目並不適合，因為要實現一個簡單的增刪改操作，只需要一點點JS代碼，但是MVC模式代碼量明顯增加了。
對於學習成本也就提高了，當然如果使用一些封裝好的MVC庫或者架構就好了。

以上就是關於javascript中的MVC模式實現方法，優缺點的詳細分析，希望對大家的學習有所協助。

您可能感興趣的文章:

• 使用jQuery向asp.net Mvc傳遞複雜json資料-ModelBinder篇
• Extjs4.1.x 架構搭建 採用Application動態按需載入MVC各模組完美實現
• 談談關於JavaScript 中的 MVC 模式
• Ajax傳Jsond Mvc後台接收執行個體
• MVC後台建立Json(List)前台接受並迴圈讀取執行個體
• 教你如何在 Javascript 檔案裡使用 .Net MVC Razor 語法
• Javascript MVC架構Backbone.js詳解
• .Net基於MVC4 Web Api輸出Json格式執行個體
• ASP.NET中MVC使用AJAX調用JsonResult方法並返回自訂錯誤資訊
• AngularJS學習筆記之TodoMVC的分析