javascript mvc实例

 基于 MVC 实现一个数据列表组件，列表中的项目可以被选择和删除。数组 _items 用来存储所有元素；普通变量 _selectedIndex 用来存储选定的元素索引

modle代码

 

    /**  
     * 模型。  
     *  
     * 模型存储所有元素，并在状态变更时通知观察者（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）。

    /**  
     * 视图。  
     *   
     * 视图显示模型数据，并触发 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 类应当被实例化。

 

    $(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>