MVC思想

作者: 深沉的简单 | 来源:发表于2017-05-24 22:46 被阅读64次

MVC思想
MVC思想
MVC思想
从MVC到MVVM
DAY07-Sping04
PHP常用的显示与逻辑分离思想
MVC 设计思想
关于架构思想的看法
11 - 使用mvc处理对应的路由
Servlet开发基础

理解javascript中的MVC

MVC模式是软件工程中一种软件架构模式，一般把软件模式分为三部分，模型(Model)+视图(View)+控制器(Controller);

模型：模型用于封装与应用程序的业务逻辑相关的数据以及对数据处理的方法。模型有对数据直接访问的权利。模型不依赖 "视图" 和 "控制器", 也就是说模型它不关心页面如何显示及如何被操作.

视图：视图层最主要的是监听模型层上的数据改变，并且实时的更新html页面。当然也包括一些事件的注册或者ajax请求操作(发布事件),都是放在视图层来完成。

控制器：控制器接收用户的操作，最主要是订阅视图层的事件，然后调用模型或视图去完成用户的操作;比如：当页面上触发一个事件，控制器不输出任何东西及对页面做任何处理; 它只是接收请求并决定调用模型中的那个方法去处理请求, 然后再确定调用那个视图中的方法来显示返回的数据。

没有使用mvc模式的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <title>javascript demo no mvc</title>  
</head>   
<body>   
    <h3>JavaScript no MVC</h3>  
    <div>  
        <select name="" id="setAnimal">  
            <option value="cat">cat</option>  
            <option value="fish">fish</option>  
            <option value="bird">bird</option>  
        </select>  
        <p id="whatDoesThisAnimalDo"></p>  
    </div>  
      
    <script type="text/javascript">   
        document.getElementById('setAnimal').onchange = function(){  
            var thisAnimalDoes;  
            switch(this.value){  
                case 'cat':   
                    thisAnimalDoes = 'cat meows';  
                    break;  
                case 'fish':  
                    thisAnimalDoes = 'fish swims';  
                    break;  
                case 'bird':  
                    thisAnimalDoes = 'bird fies';  
                    break;  
                default:   
                    thisAnimalDoes = 'wuff?';  
            }  
              
            document.getElementById('whatDoesThisAnimalDo').innerHTML = thisAnimalDoes;  
        };  
    </script>   
      
</body>   
</html>

采用mvc模式例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>javascript demo mvc</title>
</head>
<body>
<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>
    <p id="whatDoesThisAnimalDo"></p>
</div>



<script type="text/javascript">
// controller
Animal = {
    start: function() {
        this.view.start();
    },
    set: function(animalName) {
        this.model.setAnimal(animalName);
    }
};

// model
Animal.model = {
    animalDictionary: {
        cat: 'meows',
        fish: 'swims',
        bird: 'flies'
    },

    currentAnimal: null,

    setAnimal: function(animalName) {
        this.currentAnimal = this.animalDictionary[animalName] ? animalName : null;
        this.onchange();
    },

    onchange: function() {
        Animal.view.update();
    },

    getAnimalAction: function() {
        return this.currentAnimal ? this.currentAnimal + " " + this.animalDictionary[this.currentAnimal] : 'wuff?';
    }
};


// view
Animal.view = {
    start: function() {
        document.getElementById('setAnimal').onchange = this.onchange;
    },

    onchange: function() {
        Animal.set(document.getElementById('setAnimal').value);
    },

    update: function() {
        document.getElementById('whatDoesThisAnimalDo').innerHTML = Animal.model.getAnimalAction();
    }
};

Animal.start();

</script>

</body>
</html>

效果