AngularJS学习总结(一)
主要内容是对angularjs的简单介绍以及前端MVC模式的讲解
1、AngularJS简介
AngularJS是一款由Google公司开发维护的前端MVC框架,其克服了HTML在构建应用上的诸多不足,从而降低了开发成本,提升了开发效率。
2、AngularJS特点
AngularJS与jQuery是有一定的区别的,jQuery更准确来说只是一个类库(类库指的是一系列函数的集合),以DOM做为驱动(核心),而AngularJS则是一个框架(诸多类库的集合),以数据和逻辑做为驱动(核心)。
框架对开发的流程和模式做了约束,开发者遵照约束进行开发,更注重实际的业务逻辑。
AngularJS有着诸多特性,最为核心的是:模块化、双向数据绑定、语义化标签[指的是angular 的指令]、依赖注入等。
与之类似的框架还有BackBone、KnockoutJS、Vue、React等。
现阶段三大主流框架:
Angular google公司开发
Vue.js 个人团队开发
React facebook 开发
3、MVC模式 :
1)定义:
MVC是一种开发模式,由模型(Model)、视图(View)、控制器(Controller)3部分构成,采用这种开发模式为合理组织代码提供了方便、降低了代码间的耦合度、功能结构清晰可见。它是一个存在于服务器表达层的模型,它将应用分开,改变应用之间的高度耦合。用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。
2)MVC 模式结构
MVC 模式将应用分为模型、视图和控制器三个部分:
【1】视图:数据的展现。(通常视图是依据模型数据创建的。)
视图是用户看到并与之交互的界面。视图向用户显示相关的数据,并能接收用户的输入数据,但是它并不进行任何实际的业务处理。视图可以向模型查询业务状态,但不能改变模型。视图还能接受模型发出的数据更新事件,从而对用户界面进行同步更新。
【2】模型:应用对象。(通常模型对象负责在数据库中存取数据。)
模型是应用程序的主体部分。 模型代表了业务数据和业务逻辑; 当数据发生改变时,它要负责通知视图部分;一个模型能为多个视图提供数据。由于同一个模型可以被多个视图重用,所以提高了应用的可重用性。
【3】控制器:处理输入,逻辑处理、控制实体数据在视图展示、调用模型处理业务请求。一般用做连接模型和视图的桥梁。
通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据。当 Web 用户单击 Web 页面中的提交按钮来发送 HTML 表单时,控制器接收请求并调用相应的模型组件去处理请求,然后调用相应的视图来显示模型返回的数据。
3)优点
- 耦合性低
- 重用性高
- 生命周期成本低,MVC使开发和维护用户接口的技术含量降低。
- 部署快
- 可维护性高
- 有利软件工程化管理
4)缺点
- 没有明确的定义
- 不适合小型,中等规模的应用程序
- 增加系统结构和实现的复杂性
- 视图与控制器间的过于紧密的连接
- 视图对模型数据的低效率访问
- 一般高级的界面工具或构造器不支持模式
【注意】
MVC更多应用在后端开发程序里,后被引入到前端开发中,由于受到前端技术的限制便有了一些细节的调整,进而出现了很多MVC的衍生版(子集)如MVVM、MVW、MVP、MV*等。