原文:Model-View-Controller (MVC) with JavaScript
作者:Alex@Net
譯文:JavaScript 的 MVC 模式
譯者:justjavac
本文介紹了模型-視圖-控制器模式在 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>
----------------------------------------------------------------------------------------------------------------------------------------轉載原文地址:
JavaScript 的 MVC 模式