JavaScript的MVC模式(轉載)

本文介紹了模型-視圖-控制器模式在 JavaScript 中的實現。

我喜歡 JavaScript，由於它是在世界上最靈活的語言之一。在 JavaScript 中，程序員能夠根據本身的口味選擇編程風格：面向過程或面向對象。若是你是一個重口味，JavaScript 同樣能夠應付自如：面向過程，面向對象，面向方面，使用 JavaScript 開發人員甚至可使用函數式編程技術。

這篇文章中，個人目標是編寫一個簡單的 JavaScript 組件，來向你們展現一下 JavaScript 的強大。該組件是一個可編輯的項目列表（HTML中的 select 標籤）：用戶能夠選擇某一項並刪除它，或者添加新的項目到列表中。組件將由三個類構成，分別對應着 MVC 設計模式的模型-視圖-控制器。

這篇文章只是一個簡單的指導。若是你但願在實際的項目中使用它，你須要進行適當的修改。我相信你擁有建立和運行 JavaScript 程序的一切：大腦，雙手，文本編輯器（如記事本），瀏覽器（例如個人最愛 Chrome）。

既然咱們的代碼要使用 MVC 模式，所以我在這裏簡單介紹一個這個設計模式。 MVC 模式的英文名稱是 Model-View-Controller pattern，顧名思義，其主要部分組成：

模型Model()，用於存儲程序中使用到的數據;

視圖(View)，用不一樣的表現形式來呈現數據；

控制器(Controller)，更新模型。

在維基百科對 MVC 體系結構的定義中，它由以下三部分組成：

模型（Model） -「數據模型」（Model）用於封裝與應用程序的業務邏輯相關的數據以及對數據的處理方法。 「模型」有對數據直接訪問的權力。 「模型」不依賴「視圖」和「控制器」，也就是說，模型不關心它會被如何顯示或是如何被操做。

視圖（View） - 視圖層可以實現數據有目的的顯示，一般是一個用戶界面元素。在視圖中通常沒有程序上的邏輯。在 Web 應用程序中的 MVC，一般把顯示動態數據的 html 頁面稱爲視圖。

控制器（Controller） - 處理和響應事件，一般是用戶操做，並監控模型上的變化，而後去修改視圖。

The data of the component is a list of items, in which one particular item can be selected and deleted. So, the model of the component is very simple - it is stored in an array property and selected item property; and here it is:

咱們將基於 MVC 實現一個數據列表組件，列表中的項目能夠被選擇和刪除。所以，組件模型是很是簡單的 - 它只須要兩個屬性：

數組 _items 用來存儲全部元素；普通變量 _selectedIndex 用來存儲選定的元素索引

代碼以下：

/**  
 * 模型。  
 *  
 * 模型存儲全部元素，並在狀態變動時通知觀察者（Observer）。  
 */   
function ListModel(items) {  
    this._items = items;        // 全部元素  
    this._selectedIndex = -1;   // 被選擇元素的索引  
 
    this.itemAdded = new Event(this);  
    this.itemRemoved = new Event(this);  
    this.selectedIndexChanged = new Event(this);  
}  
 
ListModel.prototype = {  
    getItems : function () {  
        return [].concat(this._items);  
    },  
 
    addItem : function (item) {  
        this._items.push(item);  
        this.itemAdded.notify({item : item});  
    },  
 
    removeItemAt : function (index) {  
        var item;  
 
        item = this._items[index];  
        this._items.splice(index, 1);  
        this.itemRemoved.notify({item : item});  
 
        if (index === this._selectedIndex) {  
            this.setSelectedIndex(-1);  
        }  
    },  
 
    getSelectedIndex : function () {  
        return this._selectedIndex;  
    },  
 
    setSelectedIndex : function (index) {  
        var previousIndex;  
 
        previousIndex = this._selectedIndex;  
        this._selectedIndex = index;  
        this.selectedIndexChanged.notify({previous : previousIndex});  
    }  
};  

Event 是一個簡單的實現了觀察者模式（Observer pattern）的類：

function Event(sender) {  
    this._sender = sender;  
    this._listeners = [];  
}  
 
Event.prototype = {  
    attach : function (listener) {  
        this._listeners.push(listener);  
    },  
 
    notify : function (args) {  
        var index;  
 
        for (index = 0; index < this._listeners.length; index += 1) {  
            this._listeners[index](this._sender, args);  
        }  
    }  
};  

View 類須要定義控制器類，以便與它交互。雖然這個任務能夠有許多不一樣的接口（interface），但我更喜歡最簡單的。我但願個人項目是在一個 ListBox 控件和它下面的兩個按鈕：「加號」按鈕添加項目，「減」刪除所選項目。組件所提供的「選擇」功能則須要 select 控件的原生功能的支持。

一個 View 類被綁定在一個 Controller 類上，其中「…控制器處理用戶輸入事件，一般是經過一個已註冊的回調函數」（wikipedia.org）。

下面是 View 和 Controller 類：

/**  
 * 視圖。  
 *   
 * 視圖顯示模型數據，並觸發 UI 事件。  
 * 控制器用來處理這些用戶交互事件  
 */   
function ListView(model, elements) {  
    this._model = model;  
    this._elements = elements;  
 
    this.listModified = new Event(this);  
    this.addButtonClicked = new Event(this);  
    this.delButtonClicked = new Event(this);  
 
    var _this = this;  
 
    // 綁定模型監聽器  
    this._model.itemAdded.attach(function () {  
        _this.rebuildList();  
    });  
 
    this._model.itemRemoved.attach(function () {  
        _this.rebuildList();  
    });  
 
    // 將監聽器綁定到 HTML 控件上  
    this._elements.list.change(function (e) {  
        _this.listModified.notify({ index : e.target.selectedIndex });  
    });  
 
    this._elements.addButton.click(function () {  
        _this.addButtonClicked.notify();  
    });  
 
    this._elements.delButton.click(function () {  
        _this.delButtonClicked.notify();  
    });  
}  
 
ListView.prototype = {  
    show : function () {  
        this.rebuildList();  
    },  
 
    rebuildList : function () {  
        var list, items, key;  
 
        list = this._elements.list;  
        list.html('');  
 
        items = this._model.getItems();  
        for (key in items) {  
            if (items.hasOwnProperty(key)) {  
                list.append($('<option>' + items[key] + '</option>'));  
            }  
        }  
 
        this._model.setSelectedIndex(-1);  
    }  
};  
 
/**  
 * 控制器。  
 *  
 * 控制器響應用戶操做，調用模型上的變化函數。  
 */   
function ListController(model, view) {  
    this._model = model;  
    this._view = view;  
 
    var _this = this;  
 
    this._view.listModified.attach(function (sender, args) {  
        _this.updateSelected(args.index);  
    });  
 
    this._view.addButtonClicked.attach(function () {  
        _this.addItem();  
    });  
 
    this._view.delButtonClicked.attach(function () {  
        _this.delItem();  
    });  
}  
 
ListController.prototype = {  
    addItem : function () {  
        var item = window.prompt('Add item:', '');  
        if (item) {  
            this._model.addItem(item);  
        }  
    },  
 
    delItem : function () {  
        var index;  
 
        index = this._model.getSelectedIndex();  
        if (index !== -1) {  
            this._model.removeItemAt(this._model.getSelectedIndex());  
        }  
    },  
 
    updateSelected : function (index) {  
        this._model.setSelectedIndex(index);  
    }  
};  

固然，Model, View, Controller 類應當被實例化。

下面是一個使用此 MVC 的完整代碼：

$(function () {  
    var model = new ListModel(['PHP', 'JavaScript']),  
 
    view = new ListView(model, {  
        'list' : $('#list'),   
        'addButton' : $('#plusBtn'),   
        'delButton' : $('#minusBtn')  
    }),  
 
    controller = new ListController(model, view);          
    view.show();  
});  
 
<select id="list" size="10" style="width: 15em"></select><br/>  
<button id="plusBtn">  +  </button>  
<button id="minusBtn">  -  </button>  

原文連接：http://justjavac.com/javascript/2012/12/14/model-view-controller-mvc-javascript.html