JS 实现MVC的写法

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

常规写法

<h3>JavaScript no MVC</h3>   <div>    <select name="" id="setAnimal">     <option value="cat">cat</option>     <option value="fish">fish</option>     <option value="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="cat">cat</option>     <option value="fish">fish</option>     <option value="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>