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>
  • 相关阅读:
    服务器状态码
    QuerySet中添加Extra进行SQL查询
    django配置一个网站建设
    MySQL数据库查询中的特殊命令
    125. Valid Palindrome
    121. Best Time to Buy and Sell Stock
    117. Populating Next Right Pointers in Each Node II
    98. Validate Binary Search Tree
    91. Decode Ways
    90. Subsets II
  • 原文地址:https://www.cnblogs.com/hellowzd/p/4910834.html
Copyright © 2011-2022 走看看