JavaScript 设计模式---MV*模式

本文主要是介绍JavaScript 设计模式---MV*模式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1 MVC

MVC是一种架构设计模式，它通过关注点分离鼓励改进应用程序组织。它强制将业务数据（Model）与用户界面（view）隔离，第三个组件（Control）仍然管理逻辑和用户输入。被称为模型-视图-编辑器（Model-View-Control-Editor）。AngularJS就使用了此模式。

• Model 代表特定于领域的数据，不了解用户界面（view（视图）和Controller（控制器））。当一个Model（模型）改变时，他会通知他的观察者。Model管理应用程序的数据，model不涉及用户界面，也不涉及表示层，而是代表应用程序可能需要的独特形式的数据。总而言之：Model(模型)主要与业务数据有关。

• View 描绘的是Model的当前转态。Observer模式用于让View了解Model什么时候更新或者修改。用户可以与View交互。包括读取和编辑（Model模型），即在Model获取或设置属性值。但是更新Model的实际任务其实是在Control（控制器）上。总而言之：View是应用程序数据的可视化表示。

• Control作用是处理用户交互（如按钮和点击等动作），为View做决定。当用户操作View时，他通常负责更新Model。可以认为Control在MVC中扮演一个角色：view策略模式的简易化，view在其判断力下降委托给Control（控制器）进行操作，这是策略模式的工作原理。当view认为合适时，view可以委托Control来处理用户事件。总而言之：Controller(控制器)管理应用程序中Model（模型）和View（视图）之间的逻辑和协调。

图1.0 MVC模式

2.MVVM

MVVM（模型-视图-视图模型）是一种基于MVC和MVP的架构模式，视图更清晰地将用户界面（ui）开发从应用程序的业务逻辑与行为中分离。这种模式的实现都要利用声明式数据绑定来实现将View（视图）工作从其他层分离。

• Model 表示应用程序将会使用特定领域数据或信息。有关特定领域数据的典型事例可能是用户账号（名字、头像、电子邮件）或一个音乐带（标题、年、专辑）。规则：Model保存着信息，但是通常不处理行为，不会格式化信息或影响数据在浏览器中显示的方式。数据格式化是有View来处理的，而行为被认为是业务逻辑，应该封装在于Model（模型）交互的另一层：ViewModel。规则例外 是验证，对于Model来说是可接受的，已验证用于定义或更新现有Model（模型）的数据。通常会使用Ajax调用服务端的服务来进行Model数据的读写。
• View 仅是与用户进行交互的应用程序的一部分。他们是一个交互的UI，描绘ViewModel的状态。View即可是主动也是被动。被动View只输出显示，并不接受任何用户输入，可能也没有真正的Model（模型）知识。主动View包含数据绑定、事件、行为，需要对ViewModel有了解，虽然这些行为可以被映射到属性，但View仍负责处理ViewModel的事件。View并不负责处理状态，他仅仅是让状态与ViewModel保持同步。
• ViewModel 可被作为一个专门的Control，充当数据转换器。将Model信息转变为View信息，还将命令从View传递到Model。ViewModel可以被看做Model而不是View，但他可以被处理大部分的View显示逻辑。ViewModel还会暴露一些方法，用于帮助保持View的状态，基于View上的操作来更新Model，并触发View上的事件。总之：ViewModel位于UI层的后面，他暴露了View所需的数据（从Model哪里），可以被视为View数据和操作的源头。

图2.0 MVVM模式

3.MVP

MVP(模型-视图-表示器)是MVC设计模式的一种衍生模式，专注于改进表示逻辑。P代表表示器这是个包含用于View（视图）的调用将委托给表示器，表示器是从View（视图）中解耦，通过接口与他对话。当Model（模型）变化时，监控Model（模型）和更新View（视图）。P将Model（模型）有效地绑定到View（视图），这是以前在MVC中Controller（控制器）的责任。 由View进行请求，表示器执行任何与用户请求有关的工作，并将数据回传给他们。表示器检索数据并操作数据，并确定应该如何在View（视图）中显示这些数据。在有些实现中，表示器还与服务层交互来持久化数据Model（模型）。Model（模型）可能会触发事件，表示器的角色是订阅他们，这样就可以更新View。这种被动架构中，没有直接数据绑定的概念。View（视图）暴露了setter设置器，表示器可以用它来设置数据。

图3.0 MVP模式

这篇关于JavaScript 设计模式---MV*模式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！