JavaScript，它是在世界上最靈活的語言之一。在 JavaScript 中，程序員可以根據(jù)自己的口味選擇編程風(fēng)格：面向過程或面向?qū)ο蟆Ｈ绻闶且粋€重口味，JavaScript 一樣可以應(yīng)付自如：面向過程，面向?qū)ο螅嫦蚍矫妫褂?JavaScript 開發(fā)人員甚至可以使用函數(shù)式編程技術(shù)。
這篇文章中，我的目標(biāo)是編寫一個簡單的 JavaScript 組件，來向大家展示一下 JavaScript 的強(qiáng)大。該組件是一個可編輯的項(xiàng)目列表（HTML中的 select 標(biāo)簽）：用戶可以選擇某一項(xiàng)并刪除它，或者添加新的項(xiàng)目到列表中。組件將由三個類構(gòu)成，分別對應(yīng)著 MVC 設(shè)計(jì)模式的模型-視圖-控制器http://www.sd-ju.com
這篇文章只是一個簡單的指導(dǎo)。如果你希望在實(shí)際的項(xiàng)目中使用它，你需要進(jìn)行適當(dāng)?shù)男薷摹Ｎ蚁嘈拍銚碛袆?chuàng)建和運(yùn)行 JavaScript 程序的一切：大腦，雙手，文本編輯器（如記事本），瀏覽器（例如我的最愛 Chrome）。
既然我們的代碼要使用 MVC 模式，因此我在這里簡單介紹一個這個設(shè)計(jì)模式。 MVC 模式的英文名稱是 Model-View-Controller pattern，顧名思義，其主要部分組成http://www.wx-jr.com
模型Model（），用于存儲程序中使用到的數(shù)據(jù);
視圖（View），用不同的表現(xiàn)形式來呈現(xiàn)數(shù)據(jù)；
控制器（Controller），更新模型。
在維基百科對 MVC 體系結(jié)構(gòu)的定義中，它由如下三部分組成：
模型（Model） -“數(shù)據(jù)模型”（Model）用于封裝與應(yīng)用程序的業(yè)務(wù)邏輯相關(guān)的數(shù)據(jù)以及對數(shù)據(jù)的處理方法。 “模型”有對數(shù)據(jù)直接訪問的權(quán)力。 “模型”不依賴“視圖”和“控制器”，也就是說，模型不關(guān)心它會被如何顯示或是如何被操作。
視圖（View） - 視圖層能夠?qū)崿F(xiàn)數(shù)據(jù)有目的的顯示，通常是一個用戶界面元素。在視圖中一般沒有程序上的邏輯。在 Web 應(yīng)用程序中的 MVC，通常把顯示動態(tài)數(shù)據(jù)的 html 頁面稱為視圖。
控制器（Controller） - 處理和響應(yīng)事件，通常是用戶操作，并監(jiān)控模型上的變化，然后去修改視圖。
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 ishttp://www.sd-ju.com
我們將基于 MVC 實(shí)現(xiàn)一個數(shù)據(jù)列表組件，列表中的項(xiàng)目可以被選擇和刪除。因此，組件模型是非常簡單的 - 它只需要兩個屬性：
數(shù)組 _items 用來存儲所有元素；普通變量 _selectedIndex 用來存儲選定的元素索引
代碼如下：
/** * 模型。 * * 模型存儲所有元素，并在狀態(tài)變更時通知觀察者（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 是一個簡單的實(shí)現(xiàn)了觀察者模式（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 類需要定義控制器類，以便與它交互。雖然這個任務(wù)可以有許多不同的接口（interface），但我更喜歡最簡單的。我希望我的項(xiàng)目是在一個 ListBox 控件和它下面的兩個按鈕：“加號”按鈕添加項(xiàng)目，“減”刪除所選項(xiàng)目。組件所提供的“選擇”功能則需要 select 控件的原生功能的支持。
一個 View 類被綁定在一個 Controller 類上，其中「…控制器處理用戶輸入事件，通常是通過一個已注冊的回調(diào)函數(shù)」（wikipedia.org）。
下面是 View 和 Controller 類：
/** * 視圖。 * * 視圖顯示模型數(shù)據(jù)，并觸發(fā) 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; // 綁定模型監(jiān)聽器 this._model.itemAdded.attach（function （） { _this.rebuildList（）; }）; this._model.itemRemoved.attach（function （） { _this.rebuildList（）; }）; // 將監(jiān)聽器綁定到 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）; } }; /** * 控制器。 * * 控制器響應(yīng)用戶操作，調(diào)用模型上的變化函數(shù)。 */ 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）; } }http://www.wx-jr.com
當(dāng)然，Model， View， Controller 類應(yīng)當(dāng)被實(shí)例化。
下面是一個使用此 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://www.sd-ju.com