MVC是一种设计模式，它将应用划分为3个部分：数据（模型）、展现层（视图）和用户交互层（控制器）。换句话说，一个事件的发生是这样的过程：

    1. 用户和应用产生交互。

    2. 控制器的事件处理器被触发。

    3. 控制器从模型中请求数据，并将其交给视图。

    4. 视图将数据呈现给用户。

    现在来看一个真实的例子，图1-1 展示了在Holla 中如何发送新的聊天消息。
 

    图1-1:从Holla中发送一个新的聊天消息

    1. 用户提交一个新的聊天消息。

    2. 控制器的事件处理器被触发。

    3. 控制器创建了一个新的聊天模型（Chat Model）记录。

    4. 然后控制器更新视图。

    5. 用户在聊天窗口看到新的聊天消息。

    我们不用类库或框架就可以实现这种MVC架构模式。关键是要将MVC的每部分按照职责进行划分，将代码清晰地分割为若干部分，并保持良好的解耦。这样可以对每个部分进行独立开发、测试和维护。

    下面来详细讲解MVC中的各个组成部分。

    模型

    模型用来存放应用的所有数据对象。比如，可能有一个User模型，用以存放用户列表、它们的属性及所有与模型有关的逻辑。

    模型不必知晓视图和控制器的细节，模型只需包含数据及直接和这些数据相关的逻辑。任何事件处理代码、视图模板，以及那些和模型无关的逻辑都应当隔离在模型之外。将模型和视图的代码混在一起，是违反MVC架构原则的。模型是最应该从你的应用中解耦出来的部分。

    当控制器从服务器抓取数据或创建新的记录时，它就将数据包装成模型实例。也就是说，我们的数据是面向对象的（object oriented），任何定义在这个数据模型上的函数或逻辑都可以直接被调用。[page]
    因此，不要这样做：

    var user = users[“foo”];

    destroyUser（user）；

    而要这样做：

    var user = User.find（“foo”）；

    user.destroy（）；

    第1段代码没有命名空间的概念，并且不是面向对象的。如果在应用中定义了另一个destroyUser（） 函数的话，两个函数就会产生冲突。我们应当确保全局变量和函数的个数尽可能少。在第2段代码中，destroy（） 函数是存放在命名空间User 的实例中的，User中存放了所有的记录。当然这只是理想状况，因为我们控制了全局变量的个数，更好地避免了潜在的冲突，这种代码更加清晰，而且非常容易做继承，类似destroy（） 的这种函数就不用在每个模型中都定义一遍了。

    视图

    视图层是呈现给用户的，用户与之产生交互。在Javascript应用中，视图大都是由HTML、CSS 和Javascript模板组成的。除了模板中简单的条件语句之外，视图不应当包含任何其他逻辑。

    实际上，和模型类似，视图也应当从应用的其他部分中解耦出来。视图不必知晓模型和控制器中的细节，它们是相互独立的。将逻辑混入视图之中是编程的大忌。

    这并不是说MVC不允许包含视觉呈现相关的逻辑，只要这部分逻辑没有定义在视图之内即可。我们将视觉呈现逻辑归类为“视图助手”（helper）：和视图有关的独立的小型工具函数。

    来看下面的例子，其在视图中包含了逻辑，这是一个反例，平时不应当这样做：

    // template.html

    ${ formatDate（this.date） }

    在这段代码中，我们把formatDate（） 函数直接插入视图中，这违反了MVC的原则，结果导致标签看上去像大杂烩一样不可维护。可以将视觉呈现逻辑剥离出来放入视图助手中，正如下面的代码就避免了这个问题，可以让这个应用的结构满足MVC.

    // helper.js

    var helper = {};

    helper.formatDate = function（）{ /* … */ };

    // template.html

    ${ helper.formatDate（this.date） }[page]
    此外，所有视觉呈现逻辑都包含在helper变量中，这是一个命名空间，可以防止冲突并保持代码清晰、可扩展。

    不要太在意视图和模板的细节，本小节的目的只是简单介绍视图和MVC架构模式之间的联系。

    控制器

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

    不用使用类库和框架也能实现控制器，下面这个例子就是使用简单的jQuery 代码来实现的：

    var Controller = {};

    // 使用匿名函数来封装一个作用域

    （Controller.users = function（$）{

    var nameClick = function（）{

    /* … */

    };

    // 在页面加载时绑定事件监听

    $（function（）{

    $（“#view .name”）。click（nameClick）；

    }）；

    }）（jQuery）；

    我们创建了users控制器，这个控制器是放在Controller变量下的命名空间。然后，我们使用了一个匿名函数封装了一个作用域，以避免对全局作用域造成污染。当页面加载时，程序给视图元素绑定了click事件的监听。

    正如你所看到的，控制器并不依赖类库或框架。然而，为了构建需要的一个完整的MVC框架，我们需要将模型从视图中抽离出来。

免责声明：本网站（http://www.ciotimes.com/）内容主要来自原创、合作媒体供稿和第三方投稿，凡在本网站出现的信息，均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性，但不保证有关资料的准确性及可靠性，读者在使用前请进一步核实，并对任何自主决定的行为负责。本网站对有关资料所引致的错误、不确或遗漏，概不负任何法律责任。
本网站刊载的所有内容（包括但不仅限文字、图片、LOGO、音频、视频、软件、程序等）版权归原作者所有。任何单位或个人认为本网站中的内容可能涉嫌侵犯其知识产权或存在不实内容时，请及时通知本站，予以删除。