常用软件架构思想

  • MVVM
  • MVC

  • Flux

    一、什么是MVVM

    MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离，把Model和View关联起来的就是ViewModel。
    ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model
    View 和 Model 之间的同步工作完全是自动的，无需人为干涉（由viewModel完成）
    因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

  • 模型Model

    • 模型是指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（以数据为中心）。
  • 视图View
    • 就像在MVC和MVP模式中一样，视图是用户在屏幕上看到的结构、布局和外观（UI）。
  • 视图模型ViewModel
    • 视图模型是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器，也没有MVP模式的presenter，有的是一个绑定器。在视图模型中，绑定器在视图和数据绑定器之间进行通信。
  • 绑定器
    • 声明性数据和命令绑定隐含在MVVM模式中。在Microsoft解决方案堆中，绑定器是一种名为XAML的标记语言。绑定器使开发人员免于被迫编写样板式逻辑来同步视图模型和视图。在微软的堆之外实现时，声明性数据绑定技术的出现是实现该模式的一个关键因素

MVVM - 图1

二、什么是MVC

  1. M - Model ：数据保存
  2. V - View : 用户界面
  3. C - Controller ： 业务逻辑
  • 用户操作—> View (负责接受用户的输入操作)—>Controller（业务逻辑处理）—>Model（数据持久化）—>View（将结果通过View反馈给用户）

MVC有两个很明显的问题：

  1. m层和v层直接打交道，导致这两层耦合度高
  2. 因为所有逻辑都写在c层，导致c层特别臃肿

1544595003941.png

三、MVVM模式的优点

  1. 低耦合：MVVM模式中，数据是独立于UI的，ViewModel只负责处理和提供数据，UI想怎么显示数据都由UI自己决定，ViewModel不涉及任何和UI相关的事，即使控件改变（input换成p）,ViewModel几乎不需要更改任何代码，专注自己的数据处理就可以了
  2. 自动同步数据:ViewModel通过双向数据绑定把View层和Model层连接了起来，View和Model这两者可以自动同步。程序员不需要手动操作DOM, 不需要关注数据状态的同步问题，MVVM 统一管理了复杂的数据状态维护
  3. 可重用性：你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
  4. 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。

  5. 可测试：ViewModel里面是数据和业务逻辑，View中关注的是UI，这样的做测试是很方便的，完全没有彼此的依赖，不管是UI的单元测试还是业务逻辑的单元测试，都是低耦合的

    四、MVVM和MVC的区别

  6. mvc 中 Controller演变成 mvvm 中的 viewModel

  7. mvvm 通过数据来驱动视图层的显示而不是节点操作。
  8. mvc中Model和View是可以直接打交道的，造成Model层和View层之间的耦合度高。而mvvm中Model和View不直接交互，而是通过中间桥梁ViewModel来同步
  9. mvvm主要解决了:mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

    五、Flux

    Flux 是一种架构思想，专门解决软件的结构问题。它跟MVC 架构是同一类东西，但是更加简单和清晰。

首先，Flux将一个应用分成四个部分：

  • View： 视图层
  • Action（动作）：视图层发出的消息（比如mouseClick）。然后在mouseClick中将出现数据从应用程序发送到store的有效信息负载。可以将其理解为用户的某个操作而做出的反应，是改变store数据的唯一方法
  • Dispatcher（派发器）：用来接收Actions、执行回调函数
  • Store（数据层）：用来存放应用的状态，一旦发生变动，就提醒Views要更新页面

Flux 的最大特点，就是数据的”单向流动”。

  1. 用户访问 View
  2. View 发出用户的 Action
  3. Dispatcher 收到 Action，要求 Store 进行相应的更新
  4. Store 更新后，发出一个”change”事件
  5. View 收到”change”事件后，更新页面1553223019430.png