MVC in Javascript

From

原博的比我详细 我是以自己的惯用的方式实现了一下

MVC就是各尽自己的职责，整个视图都是按照数据来渲染的， 视图本身并不保存数据。 发生的事件由Controller控制， Controller也是修改Model中的数据， 之后调用View中的refreshDOM刷新DOM

var doc = document;  var PubSub = function(){    this.event = [];  }  PubSub.prototype = {    registerEvent: function(fn){      this.event.push(fn);    },    triggerEvent: function(){      this.event.forEach(function(fn){        fn.call(this);      }.bind(this));    }  }    var Model = function(list){      this.list = list;      this.addEvent = new PubSub();      this.delEvent = new PubSub();    }    Model.prototype = {      addItem: function(item){        if(item){          this.list.push(item);        }else{          var lastData = self.model.list[self.model.list.length-1];          var num = +lastData.match(/item(\d)/)[1];          this.list.push('item'+(num+1));        }      },      removeItem: function(index){        this.list.splice(index,1);      }    }    var View = function(model,container){      var self = this;      this.model = model;      this.container = container;      this.model.addEvent.registerEvent(function(){        self.model.addItem();        self.refreshDOM();      });      this.model.delEvent.registerEvent(function(){        if(self.container.selectedIndex != -1){          self.model.removeItem(self.container.selectedIndex);          self.refreshDOM();        }      });      this.refreshDOM = function(){        var listData = this.model.list;        var selectElem = doc.querySelector('#list');        selectElem.innerHTML = '';        listData.forEach(function(item){          var option = doc.createElement('option');          option.value = item;          option.innerHTML = item;          self.container.appendChild(option);        });      }    }    var Controller = function(elements, model){      var self = this;      this.addButton = elements.addButton;      this.delButton = elements.delButton;      this.model = model;      this.addButton.addEventListener('click', function(){        self.model.addEvent.triggerEvent();      });      this.delButton.addEventListener('click', function(){        self.model.delEvent.triggerEvent();      })    }    var model = new Model(['item1','item2']);    var view = new View(model, doc.querySelector('#list'));    view.refreshDOM();    var controller = new Controller({      addButton: doc.querySelector('#addBtn'),      delButton: doc.querySelector('#delBtn')    },model)