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>
  • 相关阅读:
    MySQL表的各种类型
    MySQL的慢查询使用与分析
    推荐一款Windows下的桌面倒数日软件
    C语言 复习指南
    C语言函数指针、回调函数
    VSCode环境配置 for C and C++
    JAVA编程基础&面试题
    MarkDown支持的十六进制颜色列表
    短路运算符、位运算总结
    Let's Encrypt的HTTPS证书在阿里云OSS内部署
  • 原文地址:https://www.cnblogs.com/hellowzd/p/4910834.html
Copyright © 2011-2022 走看看