Javascript的MVC框架的理解

Author Avatar
高翔 2月 10, 2017

MVC模式是架构模式的一种,它不仅适用于开发软件,也适用于其他广泛的设计和组织工作

MVC模式是软件工程中一种软件架构模式,一般把软件模式分为三部分,模型(Model)+视图(View)+控制器(Controller);

模型:模型用于封装与应用程序的业务逻辑相关的数据以及对数据处理的方法。模型有对数据直接访问的权利。模型不依赖 “视图” 和 “控制器”, 也就是说 模型它不关心页面如何显示及如何被操作.

视图:视图层最主要的是监听模型层上的数据改变,并且实时的更新html页面。当然也包括一些事件的注册或者ajax请求操作(发布事件),都是放在视图层来完成。

控制器:控制器接收用户的操作,最主要是订阅视图层的事件,然后调用模型或视图去完成用户的操作;比如:当页面上触发一个事件,控制器不输出任何东西及对页面做任何处理; 它只是接收请求并决定调用模型中的那个方法去处理请求, 然后再确定调用那个视图中的方法来显示返回的数据

image

当你用手机查看一张你拍的照片的时候:

  1. 你的手点击屏幕(视图层View)上你想打开的那张照片
  2. 你手机的操作系统(控制层Controller)便会接收到你点击的这个事件,发出读取这张照片的指令
  3. 你手机的存储器(模型Model)收到读取的指令,便把这张照片从储存中取出来
  4. 存储器(Model)取出来这张照片后,屏幕(View)上便显示出来

对比MVC和MVVM

  • MVC:View(界面)触发事件–》Controller(业务)处理了业务,然后触发了数据更新–》不知道谁更新了Model的数据–》Model(带着数据)回到了View–》View更新数据
    • Controller: 把view的每个变化视作事件,然后给每个事件定义对数据的操作,使model层数据变化
    • MVVM:ViewModel大致是Controller的作用,但是它是双向数据流,完全解耦M和V层
      -ViewModel层把view上每个控件视作一个对象,在ViewModel上定义和控件数据绑定的数据对象以及对此数据对象的操作方法
      以数据绑定的方式进行数据更新,改变view或改变model层数据,都能改变这个数据对象,双向绑定,互相影响

待更新代码