AngularJS学习总结系列（一）

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*等。