MVC 架构

Posted 2021-05-01 小谢backup

随着现代浏览器功能越来越强大，特性越来越丰富，用 javascript 建立成熟的网络应用不仅仅是可行的，也越来越受到欢迎。根据 HTTP Archive 的趋势，已部署的 JavaScript 代码大小在一年内增长了 45%。

随着 JavaScript 越来越流行，我们的客户端应用程序也比以前要复杂得多。应用程序开发需要许多开发者的合作，编写可维护、可重用的代码在新的网络应用时代显得至关重要，包含丰富客户端特性的 Chrome 应用也不例外。

设计模式对于编写可维护、可重用代码是十分重要的。模式是一种可重用的解决方案，适用于软件设计中经常遇到的问题——在我们的情况中即编写 Chrome 应用。我们建议开发者将应用分解为一系列互相独立的组件，遵循 MVC 模式。

最近几年，一系列 JavaScript 的 MVC 框架已经开发出来，例如 backbone.js、ember.js、AngularJS、Sencha、Kendo UI 以及更多。尽管它们都有自己独特的优势，它们中的每一个都遵循某种形式的 MVC 模式，并且以鼓励开发者编写结构更清晰的 JavaScript 代码为目标。

MVC 模式概述

MVC 在标准 JavaScript 之上提供了架构上的优势——它帮助您编写更有条理，因而更容易维护的代码。这一模式已经在多种语言及几代程序员下使用并经过广泛的测试。

MVC 包含三个组成部分：

模型（Model）

模型是应用程序数据对象存储的位置。模型并不了解有关视图与控制器的任何细节。当模型更改时，通常它会通知其监听者更改已发生。

要进一步理解它，让我们使用待办事项列表应用作为例子，它是一个简单的单页面应用，可以跟踪您的任务列表。

这里模型就代表和每一件待办事项相关联的属性，例如描述与状态。当新的待办事项创建时，它将在模型的一个实例中储存。

视图（View）

视图就是展现给用户的内容以及用户与应用交互的方式。视图使用 html、CSS、JavaScript 实现，经常还会用到模板。您的 Chrome 应用的这一部分能够访问 DOM。

例如，在以上的待办事项网络应用中，您可以创建一个视图，漂亮地向您的用户展现待办事项列表。用户也可以通过某些输入格式键入新的待办事项，然而视图并不知道如何更新模型，因为这是控制器的工作。

控制器（Controller）

控制器用来作出决定，同时也是模型与视图之间的桥梁。当模型更改时控制器更新视图，同时它向视图添加事件监听器，当用户操纵视图时更新模型。

在待办事项网络应用中，当用户选中项目将它标记为已完成时，单击事件将转发至控制器。控制器修改模型，将项目标记为已完成。如果数据需要持久保存，它将同时向服务器发出一个异步保存的请求。在富客户端网络应用开发，例如 Chrome 应用中，保持数据在本地持久存储也是至关重要的。在这种情况下，控制器也要进行处理，将数据保存到客户端存储区，例如文件系统 API。

有一些 MVC 设计模式的变体，例如 MVP（模型——视图——呈现器）及 MVVP（模型——视图——视图模型）。即使是所谓的 MVC 设计模式本身，在传统的 MVC 模式与各种编程语言中的现代解释之间也有一些变化。例如，某些基于 MVC 的框架会让视图监听模型中的更改，但是另一些会让控制器处理视图更新。该文章的重点不在比较各种实现，而是在于关注点分离及其对于编写现代网络应用的重要性。

如果您有兴趣了解更多，我们推荐 Addy Osmani 的在线图书：学习 JavaScript 设计模式（英文）。

综上所述，MVC 模式给应用开发者带来了模块化并使以下几项成为可能：

1）可重用与可扩展的代码

2）事务逻辑与视图逻辑的分离

3）允许负责不同组件（例如用户界面层与核心逻辑）的开发者同时工作。

4）更容易维护。