案例：当select 下拉选择框值变化时，显示其值（不是文本）

常规写法

<h3>JavaScript no MVC</h3> <div>  <select name="" id="setAnimal">   <option value="http://www.mamicode.com/cat">cat</option>   <option value="http://www.mamicode.com/fish">fish</option>   <option value="http://www.mamicode.com/bird">bird</option>  </select>  <p id="animalAction"></p> </div> <script type="text/javascript">  var animal = document.getElementById(‘setAnimal‘);  console.dir(animal);  animal.onchange = function() {   var action = null;   switch (this.value) {   case ‘cat‘:    action = ‘cat meows‘;    break;   case ‘fish‘:    action = ‘fish swim‘;    break;   case ‘bird‘:    action = ‘bird fly‘;    break;   default:    action = ‘unknow‘;   }   console.log(action);   document.getElementById(‘animalAction‘).innerHTML = action;  }; </script>

MVC 写法

<h3>javascript simple MVC</h3> <div>  <select name="" id="setAnimal">   <option value="http://www.mamicode.com/cat">cat</option>   <option value="http://www.mamicode.com/fish">fish</option>   <option value="http://www.mamicode.com/bird">bird</option>  </select> </div> <p id="animalDo"></p> <script>  // controller  Animal = {   start : function() {    this.view.start();//从视图触发   },   set : function(animalName) {       this.model.setAnimal(animalName);       //controller 改变 model    }  };  // model  Animal.model = {   animalDictionary : {    car : ‘meows‘,    fish : ‘swims‘,    bird : ‘flies‘   },   currentAnimal : null,   setAnimal : function(name) {    this.currentAnimal = this.animalDictionary[name] ? name : null;    this.onchange();   },   onchange : function() {       Animal.view.update();       //model传递结果到View(个人觉得这里可以由Controller来专递，最好不要直接操作视图)   },   getAnimalAction : function() {    return this.currentAnimal ? this.currentAnimal + ‘ ‘ + this.animalDictionary[this.currentAnimal] : ‘unknow‘;   }  };  // view  Animal.view = {   start : function() {       document.getElementById(‘setAnimal‘).onchange = this.onchange;       //视图绑定事件   },   onchange : function() {       Animal.set(document.getElementById(‘setAnimal‘).value);       //视图执行操作，调用Controller   },   update : function() {     //视图执行最后的更新响应       console.log(Animal.model.getAnimalAction());     document.getElementById(‘animalDo‘).innerHTML = Animal.model.getAnimalAction();   }  };  Animal.start();//入口 </script>

JS 实现MVC的写法