码迷,mamicode.com
首页 > 编程语言 > 详细

javascript simple MVC

时间:2015-10-26 13:42:26      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:

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

 

javascript simple MVC

标签:

原文地址:http://www.cnblogs.com/hellowzd/p/4910834.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!