2-1~3 AngularJS特性之:MVC

内容简介

  • 为什么需要mvc?

  • 前端mvc的困难在哪里?

  • AngularJS语境下的mvc是如何实现的?


1. 为什么需要mvc

  • 代码规模越来越大,切分职责是大势所趋。

  • 为了复用:很多逻辑是一模一样的。

  • 为了后期维护方便:修改一块功能不影响其它功能。

MVC只是手段,终极目标是模块化和复用

2. 前端mvc的困难

2-1~3 AngularJS特性之:MVC_第1张图片
enter description here
  • 操作DOM的代码必须等待整个页面加载完毕

  • 多个JS文件之间如果出现相互依赖,程序员必须自己解决。

  • JS原型继承也给前端编程带来了很多困难。

3. AngularJS语境下的mvc是如何实现的

  • Controller

    • Controller的实现方式一


      2-1~3 AngularJS特性之:MVC_第2张图片
      enter description here

    问题 :如果“视图1”和“视图2”根本没有任何逻辑关系,“控制器”的角色就会很尴尬。

    • Controller的实现方式二


      2-1~3 AngularJS特性之:MVC_第3张图片
      enter description here

问题:如果“控制器1”和“控制器2”里面有2个方法是一样的怎么办?

一般的做法如下(错误的

2-1~3 AngularJS特性之:MVC_第4张图片
enter description here

  • Controller的实现方式三


    2-1~3 AngularJS特性之:MVC_第5张图片
    enter description here

通常把通用的东西抽成一个公用的service,让Controller去调用它而不是继承它。

Controller使用过程的注意点

  • 不要试图去复用Controller,一个Controller只负责一小块视图。
  • 不要在Controller中操作DOM,这不是控制器的职责。
  • 不要在Controller中做数据格式化,ng有很好用的表单控件。
  • 不要在Controller中做数据过滤操作,ng有$filter服务。
  • 一般Controller是不会相互调用的,控制器之间的交互会通过事件进行。
  • Model

  • View

利用 Directive实现View复用

2-1~3 AngularJS特性之:MVC_第6张图片
enter description here

AngularJS的MVC是借助于$scope实现的!!!

4. 神奇的$scope

  • $scope是一个POJO(Plan old JavaScript Object)。

  • $scope提供了一些工具和方法$watch()/$aply()。

  • $scope是表达式的执行环境(或者叫作用域)。

  • $scope是一个树型结构,与DOM标签平行

  • 子$scope对象会继承父$scope上的 属性和方法

  • 每一个Angular应用只有一个根$scope对象(一般位于ng-app上)。

  • $scope可以传播事件,类似DOM事件,可以向上也可以向下。

  • $scope不仅是mvc的基础,也是后面实现双向数据绑定的基础。

  • 可以使用angular.element($0).scope()进行调试。

5. $scope的生命周期

2-1~3 AngularJS特性之:MVC_第7张图片
enter description here

你可能感兴趣的:(2-1~3 AngularJS特性之:MVC)