我喜歡 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>