快捷導航

談?wù)勱P(guān)于JavaScript 中的 MVC 模式

更新時間：2013年04月11日 14:20:17 投稿：jingxian

本文介紹了模型-視圖-控制器模式在 JavaScript 中的實現(xiàn)，有需要的朋友可以參考一下

原文：Model-View-Controller (MVC) with JavaScript
作者：Alex@Net
譯文：JavaScript 的 MVC 模式
譯者：justjavac

本文介紹了模型-視圖-控制器模式在 JavaScript 中的實現(xiàn)。

我喜歡 JavaScript，因為它是在世界上最靈活的語言之一。在 JavaScript 中，程序員可以根據(jù)自己的口味選擇編程風格：面向過程或面向?qū)ο蟆?如果你是一個重口味，JavaScript 一樣可以應(yīng)付自如：面向過程，面向?qū)ο螅嫦蚍矫妫?使用 JavaScript 開發(fā)人員甚至可以使用函數(shù)式編程技術(shù)。

這篇文章中，我的目標是編寫一個簡單的 JavaScript 組件，來向大家展示一下 JavaScript 的強大。該組件是一個可編輯的項目列表（HTML中的 select 標簽）：用戶可以選擇某一項并刪除它，或者添加新的項目到列表中。組件將由三個類構(gòu)成，分別對應(yīng)著 MVC 設(shè)計模式的模型-視圖-控制器。

這篇文章只是一個簡單的指導。如果你希望在實際的項目中使用它，你需要進行適當?shù)男薷摹?我相信你擁有創(chuàng)建和運行 JavaScript 程序的一切：大腦，雙手，文本編輯器（如記事本），瀏覽器（例如我的最愛 Chrome）。

既然我們的代碼要使用 MVC 模式，因此我在這里簡單介紹一個這個設(shè)計模式。 MVC 模式的英文名稱是 Model-View-Controller pattern，顧名思義，其主要部分組成：

•模型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 is:

我們將基于 MVC 實現(xiàn)一個數(shù)據(jù)列表組件，列表中的項目可以被選擇和刪除。因此，組件模型是非常簡單的 - 它只需要兩個屬性：

1.數(shù)組 _items 用來存儲所有元素
2.普通變量 _selectedIndex 用來存儲選定的元素索引
代碼如下：

復(fù)制代碼代碼如下:

/**
* 模型。
*
* 模型存儲所有元素，并在狀態(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 是一個簡單的實現(xiàn)了觀察者模式（Observer pattern）的類：

復(fù)制代碼代碼如下:

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），但我更喜歡最簡單的。我希望我的項目是在一個 ListBox 控件和它下面的兩個按鈕：“加號”按鈕添加項目，“減”刪除所選項目。組件所提供的“選擇”功能則需要 select 控件的原生功能的支持。

一個 View 類被綁定在一個 Controller 類上，其中「…控制器處理用戶輸入事件，通常是通過一個已注冊的回調(diào)函數(shù)」（wikipedia.org）。

下面是 View 和 Controller 類：

復(fù)制代碼代碼如下:

/**
* 視圖。
*
* 視圖顯示模型數(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;

    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);
    }
};

當然，Model, View, Controller 類應(yīng)當被實例化。

下面是一個使用此 MVC 的完整代碼：

復(fù)制代碼代碼如下:

$(function () {
var model = new ListModel(['PHP', 'JavaScript']),

    view = new ListView(model, {
        'list' : $('#list'),
        'addButton' : $('#plusBtn'),
        'delButton' : $('#minusBtn')
    }),

controller = new ListController(model, view);
view.show();
});