转载mvc套餐

M-模型

  模型用来存放应用的所有数据对象。比如，可能有一个User模型，用以存放用户列表、他们的属性及所有与模型有关的逻辑。模型不必知道视图和控制器的逻辑。任何事件处理代码、视图模板，以及那些和模型无关的逻辑都应当隔离在模型之外。将模型的代码和视图的代码混在一起，是违反MVC架构原则的。模型是最应该从应用中解耦出来的部分。
当控制器从服务器抓取数据或创建新的记录时，它就将数据包装成模型实例。也就是说，我们的数据是面向对象的，任何定义在这个数据模型上的函数或逻辑都可以直接被调用。

V-视图

  视图层是呈现给用户的，用户与之产生交互。在JavaScript应用中，视图大都是由HTML、CSS、JavaScript模板组成的。除了模板中简单的条件语句之外，视图不应当包含任何其他逻辑。将逻辑混入视图之中是编程的大忌，这并不是说MVC不允许包含视觉呈现相关的逻辑，只要这部分逻辑没有定义在视图之内即可。我们将视觉呈现逻辑归类为“视图助手”（helper）：和视图相关的独立的小工具函数。

C-控制器

  控制器是模型和视图之间的纽带。控制器从视图获取事件和输入，对它们（很可能包含模型）进行处理，并相应地更新视图。当页面加载时，控制器会给视图添加事件监听，比如监听表单提交或按钮点击。然后，当用户和你的应用产生交互时，控制器中的事件触发器就开始工作了。

  在网页交互中，可以这样理解：

1.用户点击了表格中的数据

2.触发了点击事件，数据变成可编辑的状态（这个时候会出现一个文本框，但是里面还没有数据）

3.第2步的点击事件从存放数据的模型中把数据放到文本框中，形成一种数据由不可编辑到可编辑的一种效果

举个例子：

<select id="drinkSelect">
    <option value="coffee">coffee</option>
    <option value="milk">milk</option>
    <option value="juice">juice</option>
</select>
<p id="theColorOfDrink"></p>

<script type="text/javascript">
document.getElementById("drinkSelect").onchange = function() {
    var color;
    var colorOfDrink = {
        "coffee":"brown",
        "milk":"white",
        "juice":"orange"
    };
    color = colorOfDrink[this.value];
    document.getElementById("theColorOfDrink").innerHTML = color;
}
</script>

上面程序会把选中的饮料的颜色显示出来，如果用MVC，就是这个样子：

<select id="drinkSelect">
    <option value="coffee">coffee</option>
    <option value="milk">milk</option>
    <option value="juice">juice</option>
</select>
<p id="theColorOfDrink"></p>

<script type="text/javascript">
//showDrinkColor is Controller
var showDrinkColor = {
    start:function(){
        this.view.start();
    },
    set:function(drinkName){
        this.model.setDrink(drinkName);
    }
};
//Model
showDrinkColor.model = {
    colorOfDrink:{
        "coffee":"brown",
        "milk":"white",
        "juice":"orange"
    },
    selectedDrink:null,
    setDrink:function(drinkName){
        this.selectedDrink = this.colorOfDrink[this.selectedDrink]?drinkName:null;
        this.onchange();
    },
    onchange:function(){
        showDrinkColor.view.update();
    },
    getDrinkColor:function(){
        return this.selectedDrink?this.colorOfDrink[this.selectedDrink]:"white";
    }
};
//View
showDrinkColor.view = {
    start:function(){
        document.getElementById("drinkSelect").onchange = this.onchange;
    },
    onchange:function(){
        showDrinkColor.set(document.getElementById("drinkSelect").value);
    },
    update:function(){
        document.getElementById("theColorOfDrink").innerHTML = showDrinkColor.model.getDrinkColor();
    }
};
showDrinkColor.start();
</script>