深入理解AngularJs－scope（二）

深入理解AngularJs－scope（一）中，我们对AngularJs的脏检测及其触发、异步任务队列进行了学习。紧接上一篇文章 深入理解AngularJs－scope（一），我们来看看scope对以下两个特性的实现。

1. scope的继承机制和 isolated scope;
2. 依赖于scope的事件系统: $on, $broadcast, $emit;

scope的继承机制

　　在上一篇文章中，我们创建了scope类，并在scope.prototype上实现了脏检测和异步任务相关的各个方法。

　　现在，我们来看看AngularJs中，scope之间是如何通过继承联系在一起的，如何从parentScope上获取properties。实际上，得益于javascript的原型继承机制，要实现scope的继承相当的简单，代码如下：

 Scope.prototype.$new = function(isolated, parent) {
     var child;
     parent = parent || this;

     if(isolated) {
         child = new Scope();
         child.$root = parent.$root;
         child.$$asyncQueue = parent.$$asyncQueue;
         child.$$postDigestQueue = parent.$$postDigestQueue;
         child.$$applyAsyncQueue = parent.$$applyAsyncQueue;
     } else {
         var ChildScope = function() {};
         ChildScope.prototype = this;
         child = new ChildScope();
     }

     parent.$$children.push(child);

     child.$$watchers = []; // shadow这个prop,使成为每个scope独立拥有这个prop
     child.$$listeners = {}; // shadow这个prop, 存储包含自定义事件键值对的对象
     child.$$children = []; // shadow这个prop,使成为每个scope独立拥有这个prop
     child.$parent = parent; // 缓存parentScope, 以便让scope上的其他method能够使用它，比如$destroy

     return child;
 };

　　在我们使用AngularJs进行开发时，$new方法的调用无处不在。大部分情况下并不需要我们手动调用，只是指令自己做了创建scope的工作。

　　$new方法有两个参数：

　　　　isolated－布尔值，表示新建的scope是不是 isolated scope(孤立的scope)。

　　　　parent－支持传入一个其他scope来作为 AngularJs scope机制中的parentScope。　　　　

　　AngularJs中的scope分为两种，一种是普通scope，如上面代码13行所示，普通scope的prototype指向parentScope, 故能够通过原型链获取到parentScope上的properties。

　　　　　　　　　　　　　　　　  另一种是isolated(孤立) scope, isolated是通过 Scope构造函数创建，它的protorype是指向scope构造函数的，并不是parentScope，所以不能从原型链访问parentScope的properties。

　　代码19行至22对新scope的$$watchers、$$listeners、$$children、$parent进行了初始化，因为这些属性是每个scope实例自己拥有、自己维护的。

scope的事件系统：订阅／发布

　　AngularJs 也为开发者提供了一套事件系统供开发者进行事件的绑定和触发，基于 publish／subscribe 设计模式。其中包含3个核心方法：$on, $emit, $broadcast。

　　$on: 在scope上绑定自定义事件，即向scope的$$listeners数组中插入listener回调函数。返回事件销毁函数。

 Scope.prototype.$on = function(eventName, listener) {
     var listeners = this.$$listeners[eventName];

     if(!listeners) {
         this.$$listeners[eventName] = listeners = [];
     }

     listeners.push(listener);

     return function(eventName) {
         var index = listeners.indexOf(listener);

         if(index >= 0) {
             listeners[index] = null;
         }
     };
 };

　　$emit: 沿着scope -> parentScope 向上发射事件，执行对应的回调函数。

Scope.prototype.$emit = function(eventName) {
            var propagationStopped = false;
            var event = {
                name: eventName,
                targetScope: this,
                stopPropagation: function() {
                    propagationStopped = true;
                },
                preventDefault: function() {
                    event.defaultPrevented = true;
                }
            };

            //  把event和additionalArgs拼接成新数组，通过apply方法传入listener, 使参数获取方式正常
            var listenerArgs = [event].concat(_.tail(arguments));
            var scope = this;

            do {
                event.currentScope = scope;
                scope.$$fireEventOnScope(eventName, listenerArgs);
                scope = scope.$parent;  // 通过改变scope引用 实现向上传播的关键代码
            } while (scope && !propagationStopped);

            event.currentScope = null;

            return event;
        };

　　 $broadcast: 向下广播事件，并触发对应的回调函数。$broadcast有一点特殊，一旦开始向下广播，就不能中断。

         Scope.prototype.$broadcast = function(eventName) {
             var event = {
                 name: eventName,
                 targetScope: this,
                 preventDefault: function() {
                     event.defaultPrevented = true;
                 }
             };

             //  把event和additionalArgs拼接成新数组，通过apply方法传入listener, 使参数获取方式正常
             var listenerArgs = [event].concat(_.tail(arguments));

             this.$$everyScope(function(scope) {
                 event.currentScope = scope;
                 scope.$$fireEventOnScope(eventName, listenerArgs);
                 return true;
             });

             event.currentScope = null;

             return event;
         };    

这两篇用到的工具函数我都放在后面，由于事件系统的代码比较简单，就不再做过多说明。

工具方法1: $$fileEventOnScope

 /*  $emit 和 $broadcast中 提取出的 fire event listener函数
     angularjs源码没有这个方法，其中只是重复了这些代码, 本书作者提出了重复代码
  */
         Scope.prototype.$$fireEventOnScope = function(eventName, listenerArgs) {

             var listeners = this.$$listeners[eventName] || [];
             var i = 0;

             while(i < listeners.length) {
                 if(listeners[i] === null) {
                     listeners.splice(i, 1);
                 } else {
                     try {
                         listeners[i].apply(null, listenerArgs);
                     } catch(e) {
                         console.error(e);
                     }
                     i++;
                 }
             }

             return event;
         };

工具方法2: $$everyScope

 /* 为使$digest循环能够递归child scope上的watchers的工具方法
     这个方法还用于实现$broadcast
     */
 Scope.prototype.$$everyScope = function(fn) {
         if(fn(this)) {
             return this.$$children.every(function(child) {
                 return child.$$everyScope(fn);
             });
         } else {
             return false;
         }
 };    

总结：

　　这两篇文章提供了与scope相关的脏检测，$watch, 异步任务，继承机制，事件系统的代码及一点补充分析。弄明白了这些机制是如何实现的，当你在开发工作中用到这些东西时，一定会多一份自信，多一份游刃有余。希望这两篇文章能够帮助到正在使用angular1.x开发的朋友。如有错误，请不吝指出～！谢谢～