2018/11/15浅谈MVC、MVP、MVVM之间的区别以及初探AngularJS心得

浅谈MVC、MVP、MVVM

以下仅是个人的理解，也许不正确，只是方便自己在开发中加深项目架构模式的认识

1、MVC-Model、View、Controller

简单通俗的来说：
Model就是模型，存放数据的模型、需要操作的数据或信息
View 就是视图，指html+css绘制出来的页面视图
Controller 就是控制器，说白就是JS逻辑处理函数

三者如何联系？

1、view 视图层如果发生交互，例如用户点击，那么这个点击指令就会发送给控制器
2、控制器接受到视图传来的指令，执行了一系列处理函数，将最后的结果传递给Model
3、数据模型接受到新的数据，便更新在视图中
这三层是紧密联系在一起的，但又是互相独立的，每一层内部的变化不影响其他层。每一层都对外提供接口（Interface），供上面一层调用。这样一来，软件就可以实现模块化，修改外观或者变更数据都不用修改其他层，大大方便了维护和升级。

来自 <http://www.ruanyifeng.com/blog/2007/11/mvc.html> 

2、MVP

MVP模型只是将控制器层换成了Presenter

具有两个特点
1、视同层可以跟Presenter双向通信，Presenter可以跟Model双向通信
2、View 与 Model 禁止通信
因此 View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里

3、MVVM

MVVM与MVP大致相同，唯一需要注意的特点就是增加了双向绑定

ViewModel上其实有一层Controller，来处理视图与视图模型之前复杂的逻辑交互，View的变动，自动反映在 ViewModel，反之亦然。它吸收了MVC与MVP的有优点。是目前最流行的项目架构模式
Angular 和 Ember 都采用这种模式。

来自 <http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html> 

从这些片面的角度上可以区分他们，但有时候很难彻底的区别他们之间的差异
只能从实际开发中不断积累经验并总结，才能到真正体会到各种模式之间不同的差异
因此，还得加油呀….

AngularJS的学习

Ng简介

AngularJS是一个开发动态Web应用的框架。它让你可以使用HTML作为模板语言并且可以通过扩展的HTML语法来使应用组件更加清晰和简洁。它的创新之处在于，通过数据绑定和依赖注入减少了大量代码，而这些都在浏览器端通过JavaScript实现，能够和任何服务器端技术完美结合。以下简称ng

详情查阅：来自 http://www.angularjs.net.cn/tutorial/1.html

这些基础概念很重要

1、ng-app:ng其中的一个指令，也是使用ng开发必须用到的一个指令， ng-app 指令定义了 AngularJS 应用程序的根元素。ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
2、ng-controller： 控制着应用程序中的数据，是一个常规的javascript对象，其实就是一个函数对象
3、scope：scope是一个javascript对象，拥有属性和方法，应用在html和controller中，在html中使用 直接{{变量}} 无需加上scope前缀

可以这样来理解 AngularJS应用

• View 视图 就是html元素加css组成展示 model 数据模型 存放着当前视图中可操作的数据 例如name

• controller 控制器 就是js处理函数的逻辑 而如果你修改了视图，scope里的属性发生改变就会触发控制器相应的逻辑，从而使数据模型更新 同样如果在控制器里改变了或定义了scope的属性，那么视图就会发生变化
  所以在我看来AngularJS既是MVC模型又是MVVM模型

这里总结一下： ng-app 用于定义ng应用程序，表明在页面加载是告诉浏览器这是一个angularJS应用程序
ng-controller 用于定义一个控制器，personCtrl实际上是一个js函数，在这个控制器下有一个作用域scope：

• 表示当前的逻辑作用范围，在控制器中就可以使用scope来保存或处理页面中数据模型model
• scope是一个js对象，在scope上定义的属性和方法可以直接在html视图中使用，
• 同时在视图中使用ng-model可以创建一个变量绑定到scope对象作用域上，这样就能实现视图与控制器之前的紧密联系
• scope 的范围只能在当前的控制器中，因此在一个控制器用scope定义的属性或方法不能在其他的控制器里使用 在angular中有一个rootScope根作用域，意思在一个控制器里用rootScope定义的属性和方法都能在ng-app作用范围内使用，
• 定义rootScope时跟scope一样都是一个对象在控制器里当作一个参数传递。

**

编写自定义指令

    app.directive("myFirstDirective",function(){
    	return {
					   template:"<h1>Hello,AngularJs</h1>",
 						restrict:"ECMA",//指定在html中用什么方式使用此指令 
			     // E 元素方式 <my-first-directive></my-first-directive>
 				// C class类名方式 <div class="my-first-directive"></div>
 				// M 注释方式 不显示在浏览器中
 				// A 添加属性方式 <div my-first-directive></div>
 				// 注意:在directive函数内些编写自定义指令名是以驼峰命名，
 				// 而在html实际使用此指令时是以 - 分开各单词例如：myFirstDirective->my-first-directive
 			}})

自定义过滤器，同自定义指令类似，使用方法与自带的过滤器使用方法相同

app.filter("reverse",function(){
 				return function(text){ //返回一个函数执行执行后 ng自动传入当前需要的过滤的字符串
 					return text.split('').reverse().join("");
 					// 返回一个反转之后的字符串
 				} 			})

Service ：service 是什么？

• 在ng 中 service 就是一个函数或者对象，ng有很多内置的服务如：
  $location、$http、$timeout、$intreval等
  说白就是封装的一些常用的函数方法更方便的调用
  因此我们就可以自定义一些服务，自己封装一些函数或者对象供日常开发使用

这里重点介绍自定义服务以及在控制器中使用自定义服务、如何在自定义过滤器中使用自定义服务。

强大的 ng-model

ng-model 指令 绑定 HTML 元素 到应用程序数据,ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定,从而实现双向数据绑定。
ng-model 指令也可以：
• 为应用程序数据提供类型验证（number、email、required）。
• 为应用程序数据提供状态（invalid、dirty、touched、error）。
• 为 HTML 元素提供 CSS 类。

根据以上的demo就可以实现简单的表单判断，包括错误提示和css样式提示
绑定 HTML 元素到 HTML 表单。 其实所有这些都是基于双向绑定的原理实现的

遇到的错误

在html中使用ng-app=“myApp” 而在script中没有注册var app=angular.module(“myApp”,[]); 所以发生了注入错误，因此要么加上以上语句，要么把ng-app=""置为空