JavaScript 的 MVC 模式

迷渡發表於2012-12-18
JavaScriptMVC模式

原文：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 實現一個資料列表元件，列表中的專案可以被選擇和刪除。 因此，元件模型是非常簡單的 - 它只需要兩個屬性：

  1. 陣列 _items 用來儲存所有元素
  2. 普通變數 _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>

相關文章