JavaScript 的MVC模式

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

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *