Web下mvc模式的理解

文章主要讨论mvc优点和简单的例子帮助理解。

目录：

• 吐槽
• 概念
• 面试的时候
• 一个mvc事件的发生过程
• 例子

---

吐槽:

对于一个web小白想了解mcv模式，在百度上搜了一下，讲得都很概念化，很多都以android程序为例，也看得出就是三个文件夹下放分工明确的类，但是没有实例的话还是很难理解control和model之间的分工；

---

概念：

MVC 模式将应用分为模型、视图和控制器三个部分：

1. 视图：数据的展现。

   视图是用户看到并与之交互的界面。视图向用户显示相关的数据，并能接收用户的输入数据，但是它并不进行任何实际的业务处理。视图可以向模型查询业务状态，但不能改变模型。视图还能接受模型发出的数据更新事件，从而对用户界面进行同步更新。

2. 模型：应用对象。

   模型是应用程序的主体部分。 模型代表了业务数据和业务逻辑； 当数据发生改变时，它要负责通知视图部分；一个模型能为多个视图提供数据。由于同一个模型可以被多个视图重用，所以提高了应用的可重用性。

3. 控制器：逻辑处理、控制实体数据在视图上展示、调用模型处理业务请求。

   当 Web 用户单击 Web 页面中的提交按钮来发送 HTML 表单时，控制器接收请求并调用相应的模型组件去处理请求，然后调用相应的视图来显示模型返回的数据。

---

面试的时候，

面试官问：对mvc模式了解吗？

我：额 了解一点，（还好老子提前百度了）

面试官：那你讲讲它的原理和具体实现，

我：。。mvc分为model是业务层，view是视图层，control控制层，（厉害吧）

面试官：然后呢？

我：model就是业务逻辑，view展现数据，control嘛。。。额。。是他们的
桥梁。（嗯 都说了，应该不会往下问了吧）

面试官：它是怎么降低代码耦合性？还有什么其他优点？

我：（耦合性是什么？，what the fuck，）额。不知道，还有优点的话就令代码结构分明，容易修改，

面试官：嗯 那先这样，回去等我们通知好吗？

回来决定好好了解下mvc，看到一篇文章，顿时就觉得很好理解；出处：http://blog.youkuaiyun.com/lucifer19900724/article/details/48524209

---

一个mvc事件的发生过程：

　　1. 用户和应用产生交互。(view)
　　2. 控制器的事件处理器被触发。(control)
　　3. 控制器从模型中请求数据，并将其交给视图。(control-model)
　　4. 视图将数据呈现给用户。(control-view)
不用类库或框架就可以实现这种MVC架构模式。关键是要将MVC的每部分按照职责进行划分，将代码清晰地分割为若干部分，并保持良好的解耦。这样可以对每个部分进行独立开发、测试和维护。

---

例子：

一个这样的例子，在输入框输入数字，然后按按钮，xx的地方就显示加一后的结果：

一般简单的写法:

<input id="in" type="text" />
        <button onclick="increase()">加一显示</button>
        <label id="label">xx</label>
        <script>
            function increase(){
                var val=document.getElementById("in").value;
                if(!isNaN(val)){//判断是否数字
                    val++;
                    document.getElementById("label").innerHTML=val;
                }

            }
        </script>

---

但是这种写法没有分层思想，代码高度耦合，代码量一大就不理想,按照mvc的思想，应该怎么写呢

<input id="in" type="text" />
        <button id="btn">加一显示</button>
        <label id="label">xx</label>

        <script src="control.js"></script>
        <script src="model.js"></script>

view里面的不应包含事件，控件用id，然后外链js文件

---

control.js:

var ipt=document.getElementById("ipt");
var btn=document.getElementById("btn");
var label=document.getElementById("label");

btn.addEventListener('click',function(){
    if(!isNaN(ipt.value)){//判断
        var result=increase(ipt.value);
        label.innerHTML=result;//显示
    }

});

调用model的处理方法，然后获取返回的值，又在界面显示，control在这里就充当了一个梁，使得model与view没有任何联系

---

model.js:

function increase(val){
    val++;
    return val;
}

只包含业务处理方法和逻辑计算

---

mvc的架构使得代码解耦，各部分修改不会互相影响，层次分明，对于代码量多的管理和修改也变得容易，这里只讨论了一个简单的例子，思想就差不多是这样，但是代码逻辑一复杂，就会衍生出很多东西，只能慢慢去体会了。