w3ctech

[译] AngularJS内幕详解之 Scope

在AngularJS的代码库中呈现出了大量有趣的设计,最有趣的两个例子是scope的工作方式和directives(指令)的表现。

有的人第一次接触AngularJS时就被告知directives是和DOM交互,或供9号彩票你 随意操作DOM,就像jQuery. 这立马变得非常复杂,试想,scopes, directives 和controllers相互作用.

复杂的设置之后,9号彩票你 开始学习它先进的思想:the digest cycle,独立的scope、内嵌以及指令中不同的链接函数。这些已经非常负责,这篇文章不会涉及指令,但会在后续的文章中写到。

这篇文字将带9号彩票你 跳过AngularJS 的scopes和AngularJS应用生命周期的各种坑,同时提供有趣信息的深度阅读。

(门槛是高的,但scope是很难解释的。如果在此惨遭失败,至少9号彩票我 会抛出几个重要的点。)

如果这个图表看起来非常的费解,那么这篇文章很适合9号彩票你 。

01-mindbender

(Image credit) (View large version)

(免责声明:这篇文字是基于 AngularJS version 1.3.0

AngularJS 用scopes分离指令和DOM的通信。scopes也存在于controller层。scopes 是普通的JavaScript对象,AngularJS没有过多的操作。只是添加了“一串”带有一个或两个$符号前缀的内部属性。其中以$$开头的常常不是必须的,经常用它们作代码气味,可以避免更深入的理解digest循环。

在AngualrJS 俚语中,scope”不是9号彩票你 平时思考Javascript代码或编程的scope。scope通常适用于维持一段代码块的上下文、变量等。通常情况下,scope用来包含一段代码中的上下文、变量等。

(在大多数语言中,变量维持在一个用花括号({})或代码块定义的虚拟袋中,这就是大家所说的块级作用域.相比之下,Javascript 使用的是词法作用域,大致意思是使用函数或者全局对象定义虚拟袋而不是代码块。虚拟袋可以嵌套9号彩票更多 小的袋子。....)

下面用一个简单的例子来解释函数

function eat (thing) {
   console.log('Eating a ' + thing);
}

function nuts (peanut) {
   var hazelnut = 'hazelnut';

   function seeds () {
      var almond = 'almond';
      eat(hazelnut); // I can reach into the nuts bag!
   }

   // Almonds are inaccessible here.
   // Almonds are not nuts.
}

9号彩票我 不在赘述这个问题,因为这不是人们谈论AngularJS时的scope,如果9号彩票你 喜欢了解9号彩票更多 9号彩票关于 JavaScript语言上下文的scope请参考“Where Does this Keyword Come From?

在Angular的条款中,scope也是结合上下文的。AngularJS中,一个scope跟一个元素关联(以及所有它的子元素),而一个元素不是必须直接跟一个scope关联。元素通过以下三中方式被分配一个scope:

1、scope通过controller或者directive创建在一个element上(指令不总是引入新的scope)

<nav ng-controller='menuCtrl'>

2、如果一个scope不存在于元素上,那么它将继承它的父级scope

<nav ng-controller='menuCtrl'>
   <a ng-click='navigate()'>Click Me!</a> <!-- also <nav>'s scope -->
</nav>

3、如果一个元素不是某个ng-app的一部分,那么它不属于任何scope。

<head>
   <h1>Pony Deli App</h1>
</head>
<main ng-app='PonyDeli'>
   <nav ng-controller='menuCtrl'>
      <a ng-click='navigate()'>Click Me!</a>
   </nav>
</main>

为了弄清楚元素的scope,试着由内到外递归9号彩票我 刚刚列出的3条元素规则??? 它创建了一个新的scope?那是它的scope,它有父级吗?检查它的父级是某个ng-app的一部分吗?。遗憾的是---没有scope

9号彩票你 可以用充满魔力的开发者9号彩票工具 轻松的找出元素的scope。

在介绍digest如何工作以及内部如何表现前,9号彩票我 会剖析scope的一些属性来介绍某些概念。9号彩票我 也会让9号彩票你 知道9号彩票我 如何获取这些属性。首先,打开 Chrome 并导航到9号彩票我 正在使用的一个 angular应用程序。然后,9号彩票我 将审查一个元素并打开开发者9号彩票工具 。

(9号彩票你 知道$0能让9号彩票你 获得最后一个选中的元素吗?$1让9号彩票你 能访问前一个被选中的元素等。9号彩票我 想9号彩票你 会经常用到$0,尤其是使用 AngularJS工作时。)

对于每一个DOM元素, 用 angular.element 9号彩票包装 跟使用jQuery 或 jqLite, jQuery 的 迷9号彩票你 版是一样的。 一旦被9号彩票包装 , 9号彩票你 通过 scope() 函数得到的结果 —— 9号彩票你 猜对了!—— 就是跟元素关联的 AngularJS scope。结合$0,9号彩票我 发现自己经常使用下面的命令。

angular.element($0).scope()

(当然,如果9号彩票你 使用jQuery,那么 $($0).scope() 也会达到一样的效果。不管 jQuery 是否可用, angular.element 一直可用。)

然后9号彩票我 能审查该 scope, 确定该 scope 是9号彩票我 预期的, 确定属性的值是否跟9号彩票我 预期的匹配。让9号彩票9号彩票我 们 来看看一个典型的scope中可访问的特殊属性, 它们以一个或多个 $ 符号开头。

for(o in $($0).scope())o[0]=='$'&&console.log(o)

这就足够了,9号彩票我 将遍历所有的属性,

下面,9号彩票我 列出了由该命令产生的属性,按功能分组。让9号彩票9号彩票我 们 从基本的开始,它仅仅提供scope导航。

  • $id scope 的唯一标识

  • $root 根scope

  • $parent 父级scope, 如果 scope == scope.$root 则为 null

  • $$childHead 第一个子 scope, 如果没有则为 null

  • $$childTail 最后一个子scope, 如果没有则为 null

  • $$prevSibling 前一个相邻节点 scope, 如果没有则为 null

  • $$nextSibling 下一个相邻节点 scope, 如果没有则为 null

这没什么惊喜, 浏览 scope 没什么意思。有时候访问 $parent 看起来是得当的, 但是有更好的、低耦合的方式来处理父级通信而不是紧紧的与人为的scope绑定在一起。 比如说 使用事件监听器,下面9号彩票9号彩票我 们 将讲到。

下面介绍的属性允许9号彩票9号彩票我 们 发布事件和订阅事件。这个模式叫发布/订阅

  • $$listeners 在scope上注册事件监听器。

  • $on(evt, fn) 注册一个名为evt,监听器为fn的事件。

  • $emit(evt, args) 发送事件 evt, 在scope 链上冒泡,在当前scope 以及所有的 $parents 上触发,包括 $rootScope。

  • $broadcast(evt, args) 发送事件 evt, 在当前scope 以及它 所有的 children 上触发。

当事件触发的时候, 事件监听器传递 event 对象和其它参数到 $emit 或者 $broadcast 函数。有很多方式为 scope 上的事件传递值。

指令可以通过事件来告知一些重要的事情发生了。查看下面的指令示例,一个按钮被点击后,告知9号彩票你 喜欢吃什么类型的食物。

angular.module('PonyDeli').directive('food', function () {
   return {
      scope: { // I'll come back to directive scopes later
         type: '=type'
      },
      template: 'I want to eat some {{type}}!',
      link: function (scope, element, attrs) {
         scope.eat = function () {
            letThemHaveIt();
            scope.$emit('food.order, scope.type, element);
         };

         function letThemHaveIt () {
            // Do some fancy UI things
         }
      }
   };
});

9号彩票我 为事件添加了命名空间,9号彩票你 也应该这么做。它可以防止命名冲突,9号彩票你 可以清楚的知道事件的来源或者9号彩票你 正在订阅的是什么事件。如果9号彩票你 对分析数据感兴趣或者想追踪 food 的元素点击,可以用 Mixpanel。这确实很有意义,并且没有理由污染9号彩票你 的指令或者控制器。9号彩票你 可以用一个指令来处理 food 点击的分析和追踪,这是一个很好的自足的方式。

angular.module('PonyDeli').directive('foodTracker', function (mixpanelService) {
   return {
      link: function (scope, element, attrs) {
         scope.$on('food.order, function (e, type) {
            mixpanelService.track('food-eater', type);
         });
      }
   };
});

这个9号彩票服务 的实现是不贴切的,因为它仅仅是对Mixpanel的客户端API的封装。 它的HTML看起来应该像下面的样子, 9号彩票我 用了一个 controller 来维护所有的实物类型。ng-app指令很好的9号彩票帮助 AngularJS 自动启动9号彩票我 的程序。为了完善这个例子,9号彩票我 添加了一个 ng-repeat指令来渲染9号彩票我 所有的 food 而不是重复自身。这只是通过 foodTypes 循环,在 foodCtrl 的scope 中是可以访问的。

<ul ng-app='PonyDeli' ng-controller='foodCtrl' food-tracker>
   <li food type='type' ng-repeat='type in foodTypes'></li>
</ul>

angular.module('PonyDeli').controller('foodCtrl', function ($scope) {
   $scope.foodTypes = ['onion', 'cucumber', 'hazelnut'];
});

完整的项目例子托管在 CodePen

表面上看是一个很好的例子,但9号彩票你 应该思考是否需要一个事件给其它人订阅。也许一个9号彩票服务 就行。这种情况。9号彩票你 可以用另一种方式。 9号彩票你 会问自己9号彩票你 需要事件因为9号彩票你 不知道谁会订阅food.order,这意味着使用事件更加面向未来。9号彩票你 也会说 food 追踪指令没有理由存在,因为它没有跟 DOM ,甚至是 scope 交互, 只是监听了一个事件,9号彩票你 可以使用 service 替换它。

在刚刚的情况下,这两种说法都是对的。当9号彩票更多 的组件需要 food.order-aware 时,才会感觉事件的做法更清晰。事实上,事件很有用,当9号彩票你 真的需要桥接两个 scope 的间隙时,其它的因素就不那么重要了。

正如9号彩票9号彩票我 们 所见,在本文即将到来的第二部分更加仔细的审查指令,在 scope 间通信时事件甚至不是必要的。一个子 scope 可以它的父scope读取,通过父scope绑定它,它也可以更新这些值。

(很少情况下通过事件来9号彩票帮助 子 scope 与 父 scope 更好的通信。)

同级之前往往很难相互通信, 经常通过它们共同的父级scope 来通信。通常从 $rootScope 开始广播,然后在9号彩票你 希望的相邻节点监听,如下:

<body ng-app='PonyDeli'>
   <div ng-controller='foodCtrl'>
      <ul food-tracker>
         <li food type='type' ng-repeat='type in foodTypes'></li>
      </ul>
      <button ng-click='deliver()'>I want to eat that!</button>
   </div>
   <div ng-controller='deliveryCtrl'>
      <span ng-show='received'>
         A monkey has been dispatched. You shall eat soon.
      </span>
   </div>
</body>

angular.module('PonyDeli').controller('foodCtrl', function ($rootScope) {
   $scope.foodTypes = ['onion', 'cucumber', 'hazelnut'];
   $scope.deliver = function (req) {
      $rootScope.$broadcast('delivery.request', req);
   };
});

angular.module('PonyDeli').controller('deliveryCtrl', function ($scope) {
   $scope.$on('delivery.request', function (e, req) {
      $scope.received = true; // deal with the request
   });
});

这个例子也放在 CodePen

渐渐的,9号彩票你 将对事件和9号彩票服务 越来越熟悉。9号彩票我 想告诉9号彩票你 ,当9号彩票你 期望视图模块改变来响应事件,9号彩票你 应该使用 event, 当9号彩票你 不期望视图模块改变,9号彩票你 应该使用 service。有时候响应是这两种的混合:一个动作触发了一个事件,事件调用了一个 service, 或者 service 从 $rootScope广播了一个事件。这视情况而定,并且9号彩票你 应该这样分析,而不是随意使用一个9号彩票方法 。

如果9号彩票你 有两个组件通过 $rootScope 通信,9号彩票你 可能更喜欢使用 $rootScope.$emit (而不是 $broadcast)和 $rootScope.$on。这种方式下, 事件只会在 $rootScope.$$listeners 之间传播, 那些9号彩票你 知道没有该事件的监听器的后代的 $rootScope上,不会循环浪费时间。

angular.module('PonyDeli').factory("notificationService", function ($rootScope) {
   function notify (data) {
      $rootScope.$emit("notificationService.update", data);
   }

   function listen (fn) {
      $rootScope.$on("notificationService.update", function (e, data) {
         fn(data);
      });
   }

   // Anything that might have a reason
   // to emit events at later points in time
   function load () {
      setInterval(notify.bind(null, 'Something happened!'), 1000);
   }

   return {
      subscribe: listen,
      load: load
   };
});

CodePen

事件跟9号彩票服务 已经差不多了,让9号彩票9号彩票我 们 移步到一些其它的属性。

了解这个恐怖的过程是认识 AngularJS的关键。

AngularJS 基于它的数据绑定的特性,通过循环脏检测来追踪变化并且在变化时触发事件。这比听起来简单。事实上, 它就是这样简单。让9号彩票9号彩票我 们 快速的浏览一下 $digest 循环的核心组件。 首先,有一个 scope.$digest 9号彩票方法 ,通过递归检测scope 和它的后代们的变化。

  1. $digest()
    执行 $digest 循环脏检测

  2. $$phase digest 循环的当前阶段, [null, '$apply', '$digest'] 中的一个。

9号彩票你 需要小心触发 digest,因为当9号彩票你 已经在一个 digest 阶段而尝试这么做, 会因为一些无法解释的现象导致 AngularJS 出错。

让9号彩票9号彩票我 们 看看 文档里9号彩票关于 $digest怎么说

Processes all of the watchers of the current scope and its children. Because a watcher’s listener can change the model, the $digest() keeps calling the watchers until no more listeners are firing. This means that it is possible to get into an infinite loop. This function will throw 'Maximum iteration limit exceeded.' if the number of iterations exceeds 10.

Usually, you don’t call $digest() directly in controllers or in directives. Instead, you should call $apply() (typically from within a directives), which will force a $digest().


它处理当前scope 及其 后代们的所有的 watchers。因为 watcher 的监听器可以改变 model,$digest() 持续调用 watcher 直到没有监听器被触发。这意味着可能进入死循环。如果迭代超过10次,这个函数会抛出异常 'Maximum iteration limit exceeded'。

通常,9号彩票9号彩票我 们 在控制器或指令中不直接调用 $digest。相反,9号彩票你 应该调用$apply() (通常在一个指令里) 用来强制执行一个 $digest()。

所以,一个 $digest 处理所有的 watcher,处理这些 watcher时,这些watcher触发,直到没有别的触发 watcher。为了9号彩票9号彩票我 们 理解这个循环,仍然有两个问题需要解答。

  • "watcher" 是什么鬼?!
  • 什么触发 $digest?!

这两个问题的答案因复杂度差异很大,但是9号彩票我 会尽量为9号彩票你 解释清楚。9号彩票我 将介绍 watcher,让9号彩票你 有个自己的看法。

如果9号彩票你 读过这一步,9号彩票你 或许已经知道什么事 watcher了。9号彩票你 或许使用过 scope.$watch,甚至用过scope.$watchCollection。$$watchers 属性有用 scope 上所有的 watcher。

  • $watch(watchExp, listener, objectEquality) 为scope添加一个 watch 监听器

  • $watchCollection watch 数组元素或对象属性

  • $$watchers 保持所有的 watch 与 scope 的关联

    watcher 是AngularJS的数据绑定功能的很重要的一面, 但是为了触发这些 watcher,AngularJS 需要9号彩票9号彩票我 们 的9号彩票帮助 。否则,它不能有效的更新数据绑定的变量为正确值。思考下面的例子:

<body ng-app='PonyDeli'>
   <ul ng-controller='foodCtrl'>
      <li ng-bind='prop'></li>
      <li ng-bind='dependency'></li>
   </ul>
</body>

angular.module('PonyDeli').controller('foodCtrl', function ($scope) {
   $scope.prop = 'initial value';
   $scope.dependency = 'nothing yet!';

   $scope.$watch('prop', function (value) {
      $scope.dependency = 'prop is "' + value + '"! such amaze';
   });

   setTimeout(function () {
      $scope.prop = 'something else';
   }, 1000);
});

9号彩票9号彩票我 们 有初始值 'initial value',9号彩票9号彩票我 们 期望第二行 HTML 变为 'prop is "something else"! 惊喜发生在1秒后,对吗? 甚至更有趣的是,9号彩票你 至少期待第一行变为'something else'!为什么不是呢?这是个 watcher 吗?

实际上,9号彩票你 在 HTML 标签上的一系列操作都是以创建 watcher 结束。这种情况下,每个 ng-bind 指令创建一个 watcher,当 prop、 dependency 变化时它会更新 HTML <li>。

这样,9号彩票你 现在可以把9号彩票你 的代码想象成3个 watcher,每个 ng-bind 指令的watcher, 还有一个在控制器中的。AngularJS如何知道 timeout 执行后的属性变化?9号彩票你 应该想起 AngularJS 更新属性时,可以在 timeout 回调时添加一个手动的 digest。

setTimeout(function () {
   $scope.prop = 'something else';
   $scope.$digest();
}, 1000);

9号彩票我 放置了一个没有 $digest 的例子在 CodePen,以及 timeout有 $digest的。9号彩票你 可以用$timeout service 替换 setTimeout,它提供了一些错误处理,并且会执行 $apply()。

$timeout(function () {
   $scope.prop = 'something else';
}, 1000);
  • $apply(expr) 解析和计算一个表达式,然后在 $rootScope 上执行 $digest 循环

为了在每个 scope 上执行 digest, $apply 提供了很好的错误处理功能。如果9号彩票你 尝试调优性能, 使用 $digest 或许能够保证, 但是在9号彩票我 了解 AngularJS 内部工作原理而感觉良好之前, 9号彩票我 会远离它。实际上很少时候需要手动调用 $digest();$apply 总是更好的选择。

现在9号彩票9号彩票我 们 回到第二个问题上来。

  • 什么触发了 $digest?!

Digest的内部触发在AngularJS代码库中具有重要地位。它们的要么直接被触发,要么是调用 $apply() 触发,就像9号彩票9号彩票我 们 在 $timeout 9号彩票服务 里看到的。不管是AngularJS中的核心还是边缘的指令都会触发digest。 digest 触发9号彩票你 的 watcher, watcher更新9号彩票你 的 UI。这是基本的思路。

9号彩票你 可以从 AngularJS wiki里面找到9号彩票关于 好的实践资源,链接在文章底部。

9号彩票我 已经解释了 watcher 和 $digest 循环如何相互交互。下面,9号彩票我 将列出一些与 $digest 循环相关的属性,它们可以在 scope 上找到。 这些可以9号彩票帮助 9号彩票你 在 AngularJS 编译时解析文本表达式, 或者在 digest 循环的不同阶段执行一小段代码。

在最后的部分,来聊聊 scope 的性能。尽管有时候9号彩票你 可能要用 $new 声明自己的scope, 但它们使用内部手段处理 scope 的生命周期。

  • $$isolateBindings 独立 scope 绑定(例如:{ options: '@megaOptions' })

  • $new(isolate) 创建一个子 scope 或者一个独立的 scope, 它不继承自它们的父级。

  • $destroy 从 scope 链里移除该 scope; scope 和后代们不会收到事件, watcher 也不再被触发。

  • $$destroyed scope 是否被销毁。

独立的scope?这是什么鬼?这个系列的第二部分将讨论指令,它包括独立的scope,嵌入,link 函数,编译器,指令控制器等。Wait for it!

扩展阅读

Here are some additional resources you can read to extend your comprehension of AngularJS.

w3ctech微信

扫码关注w3ctech微信9号彩票公众号

共收到0条回复