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>