MVC模式 和 MVVM模式

MVC模式

模型 - 视图 - 控制器或MVC,MVC是普遍的叫法,是一种软件设计模式,用于开发Web应用程序。模型- 视图 - 控制器模式是由以下三部分组成:

  • 模型/Model - 一个负责维护数据模式的最低水平。

  • 视图/View - 负责显示所有或数据到用户的部分。

  • 控制器/Controller - 软件代码控制Model和View之间的相互作用。

MVC是受欢迎的,因为它隔离了应用逻辑从用户界面层和支持的关注点分离。这里的控制器接收用于该应用程序的所有请求,制备视图所需要的任何数据。视图,使用制备的控制器,产生一个最终像样的响应的数据。 MVC抽象可以用图形表示如下。

AngularJS MVC

模型 - model

模型是负责管理应用程序的数据。它响应来自视图的请求,同时也响应指令从控制器进行自我更新。

视图 - view

在一个特定的格式的演示数据,由控制器决定触发显示数据。它们是基于脚本的模板系统,如JSP,ASP,PHP,非常容易使用AJAX技术的集成。

控制器 - controller

控制器负责响应于用户输入并执行交互数据模型对象。控制器接收到输入,它验证输入,然后执行修改数据模型的状态的业务操作

MVVM模式

下图不仅概括了MVVM模式(Model-View-ViewModel),还描述了在Vue.js中ViewModel是如何和View以及Model进行交互的。 
这里写图片描述

ViewModel是Vue.js的核心,它是一个Vue实例。Vue实例是作用于某一个HTML元素上的,这个元素可以是HTML的body元素,也可以是指定了id的某个元素。

当创建了ViewModel后,双向绑定是如何达成的呢?

首先,我们将上图中的DOM Listeners和Data Bindings看作两个工具,它们是实现双向绑定的关键。 
从View侧看,ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化,如果有变化,则更改Model中的数据; 
从Model侧看,当我们更新Model中的数据时,Data Bindings工具会帮我们更新页面中的DOM元素。

Hello World示例

 

posted @ 2018-08-01 16:48  幻城love  阅读(191)  评论(0编辑  收藏  举报