文章目录
浅谈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有很多内置的服务如:
l o c a t i o n 、 location、 location、http、 t i m e o u t 、 timeout、 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=""置为空