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