javascript MVC（每天有学习一点篇）

　　“写的不是代码，是你的思维”，经常觉得自己写的代码“皮粗肉糙”的，看到那些要么精致小巧，要么优雅大方，要么光明磊落的代码时，常常会黯然神伤外加垂涎欲滴。

　　why？（为什么我的代码不能如此。。）

　　when？（什么时候我的代码能有此质量）

　　what？（我要怎么做？）

　　此时我的回答是：静下心来，多思考，多实践。（老李， 。。。。。说好的魂淡要做到）

　　今天想重新思考实践一下MVC

开场啦。。。。。。

//模型

//封装与应用程序的业务逻辑相关的数据以及数据的处理方法。模型不依赖“视图”和“控制器”//当model发生变化是时，通知它的监听者

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

};

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

　　//视图
        //视图显示模型数据，并触发模型数据。控制器用来处理这些用户交互事件
        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);
            }
        };

//}());

　　//测试用例
    $(function () {
            var model = new ListModel(['PHP', 'JavaScript']),

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

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