javascript simple 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>

 

转载于:https://www.cnblogs.com/hellowzd/p/4910834.html