2-1~3 MVC

2-1~3 MVC

内容简介

• 为什么需要mvc？

• 前端mvc的困难在哪里？

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

---

1. 为什么需要mvc

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

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

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

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

2. 前端mvc的困难

 

1487141651282.jpg

 

• 操作DOM的代码必须等待整个页面加载完毕

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

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

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

• Controller

  • Controller的实现方式一
    

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

  • Controller的实现方式二
    

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

一般的做法如下（错误的）

• Controller的实现方式三
  

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

Controller使用过程的注意点

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

• Model

• View

利用 Directive实现View复用

 

1487144166528.jpg

 

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的生命周期

 

1487146227181.jpg