zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    剑指offer 把字符串转换成整数 python
    剑指offer 重建二叉树 python
    LeetCode 82 删除排序链表中的重复元素 II python
    LeetCode 142 环形链表 II python
    hashlib
    configparser
    正则
    logging
    模块
    文件操作
  • 原文地址:https://www.cnblogs.com/hellowzd/p/4910834.html
Copyright © 2011-2022 走看看