AngularJS源码解析3：RootScope的创建过程
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了AngularJS源码解析3：RootScope的创建过程，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含15686字，纯文字阅读大概需要23分钟。
内容图文
RootScopeProvider简介
RootScopeProvider是angularjs里面比较活跃的一个provider。它主要用来生成实例rootScope，它代表angularjs应用的根作用域。我们可以把它看成MVVM模式中的VM。
源代码如下：
function
$RootScopeProvider(){
var TTL = 10;
var $rootScopeMinErr = minErr(‘$rootScope‘);
var lastDirtyWatch = null;
this.digestTtl = function(value) {
if (arguments.length) {
TTL = value;
}
return TTL;
};
this.$get = [‘$injector‘, ‘$exceptionHandler‘, ‘$parse‘, ‘$browser‘,
function( $injector, $exceptionHandler, $parse, $browser) {.......
}];
}
在$RootScopeProvider构造函数中，有一个$get属性，它的值是一个数组，数组的最后的一项是一个函数function( $injector, $exceptionHandler, $parse, $browser) ，所有的代码都在这个方法中。angularJS内置的provider都有一个$get属性，此属性值主要是定义实例化provider对象的函数体，实例化时，会通过instanceinjector.invoke来调用。在$get属性上面还有一个digestTtl属性，这个属性是用来修改angularJS默认的dirty check次数的，angularJS默认是10次。接下来，我们来看下$get属性值中的实例化
$RootScopeProvider的函数体。
function
Scope() {
this.$id = nextUid();
this.$$phase = this.$parent = this.$$watchers =
this.$$nextSibling = this.$$prevSibling =
this.$$childHead = this.$$childTail = null;
this[‘this‘] = this.$root = this;
this.$$destroyed = false;
this.$$asyncQueue = [];
this.$$postDigestQueue = [];
this.$$listeners = {};
this.$$listenerCount = {};
this.$$isolateBindings = {};
}
Scope.prototype = {
constructor: Scope,
$new: function(isolate) {
.....
},
$watch: function(watchExp, listener, objectEquality) {
......
},
$watchCollection: function(obj, listener) {
var self = this;
var oldValue;
var newValue;
var changeDetected = 0;
var objGetter = $parse(obj);
var internalArray = [];
var internalObject = {};
var oldLength = 0;
function $watchCollectionWatch() {
newValue = objGetter(self);
var newLength, key;
if (!isObject(newValue)) {
if (oldValue !== newValue) {
oldValue = newValue;
changeDetected++;
}
} elseif (isArrayLike(newValue)) {
if (oldValue !== internalArray) {
oldValue = internalArray;
oldLength = oldValue.length = 0;
changeDetected++;
}
newLength = newValue.length;
if (oldLength !== newLength) {
changeDetected++;
oldValue.length = oldLength = newLength;
}
for (var i = 0; i < newLength; i++) {
if (oldValue[i] !== newValue[i]) {
changeDetected++;
oldValue[i] = newValue[i];
}
}
} else {
if (oldValue !== internalObject) {
oldValue = internalObject = {};
oldLength = 0;
changeDetected++;
}
newLength = 0;
for (key in newValue) {
if (newValue.hasOwnProperty(key)) {
newLength++;
if (oldValue.hasOwnProperty(key)) {
if (oldValue[key] !== newValue[key]) {
changeDetected++;
oldValue[key] = newValue[key];
}
} else {
oldLength++;
oldValue[key] = newValue[key];
changeDetected++;
}
}
}
if (oldLength > newLength) {
changeDetected++;
for(key in oldValue) {
if (oldValue.hasOwnProperty(key) && !newValue.hasOwnProperty(key)) {
oldLength--;
delete oldValue[key];
}
}
}
}
return changeDetected;
}
function $watchCollectionAction() {
listener(newValue, oldValue, self);
}
returnthis.$watch($watchCollectionWatch, $watchCollectionAction);
},
$digest: function() {
........
},
$destroy: function() {
......
},
$eval: function(expr, locals) {
.....
},
$evalAsync: function(expr) {
.......
},
$$postDigest : function(fn) {
........
},
$apply: function(expr) {
......
},
$on: function(name, listener) {
......
},
$emit: function(name, args) {
.......
},
$broadcast: function(name, args) {
......
}
};
var $rootScope = new Scope();
return $rootScope;
function beginPhase(phase) {
if ($rootScope.$$phase) {
throw $rootScopeMinErr(‘inprog‘, ‘{0} already in progress‘, $rootScope.$$phase);
}
$rootScope.$$phase = phase;
}
function clearPhase() {
$rootScope.$$phase = null;
}
function compileToFn(exp, name) {
var fn = $parse(exp);
assertArgFn(fn, name);
return fn;
}
function decrementListenerCount(current, count, name) {
do {
current.$$listenerCount[name] -= count;
if (current.$$listenerCount[name] === 0) {
delete current.$$listenerCount[name];
}
} while ((current = current.$parent));
}
function initWatchVal() {}
从代码中，可以看到。第一步，定义了一个构造函数function Scope(){}，第二步，定义了Scope的原型Scope.prototype = {}，第三步，new出来了一个Scope，赋值给了$rootScope，并return这个Scope实例对象。
通过第三步大家可以看出，angularJS默认会创建根作用域$rootScope，并作为$rootScopeprovider的实例对象返回。
第一步，初始化了Scope对象的一些属性值。
第二步，定义了一些方法。我们来详细讲解这些方法的作用：
$new: function(isolate) { var ChildScope, child; if (isolate) { child = new Scope(); child.$root = this.$root; // ensure that there is just one async queue per $rootScope and its children child.$$asyncQueue = this.$$asyncQueue; child.$$postDigestQueue = this.$$postDigestQueue; } else { ChildScope = function() {}; // should be anonymous; This is so that when the minifier munges// the name it does not become random set of chars. This will then show up as class// name in the web inspector. ChildScope.prototype = this; child = new ChildScope(); child.$id = nextUid(); } child[‘this‘] = child; child.$$listeners = {}; child.$$listenerCount = {}; child.$parent = this; child.$$watchers = child.$$nextSibling = child.$$childHead = child.$$childTail = null; child.$$prevSibling = this.$$childTail; if (this.$$childHead) { this.$$childTail.$$nextSibling = child; this.$$childTail = child; } else { this.$$childHead = this.$$childTail = child; } return child; },
此方法的作用是用来创建子作用域。
-
isolate变量的值决定是执行if语句的代码还是else语句的代码，如果isolate的值是true，那么就会创建一个独立的作用域。这个在我们创建指令，并且在创建指令的回调方法中有scope属性的情况下，会出现这种情况，当然还有其他别的特殊情况下也会这样。假如是独立作用域的话，会多一个$root属性，它的值默认指向rootscope。
-
如果isolate的值为false，则会定义一个空的构造函数ChildScope ，并且把此构造函数的prototype指向当前scope的实例对象，然后，new一个ChildScope 对象。
-
然后为生成的子作用域设置$parent属性为当前作用域，并且设置子作用域的一些默认的属性值，然后设置当前作用域的一些属性值为生成的子作用域。最后，返回这个新生成的子作用域child。
接下来，我们再来说说$watch方法：
$watch: function(watchExp, listener, objectEquality) { var scope = this, get = compileToFn(watchExp, ‘watch‘), array = scope.$$watchers, watcher = { fn: listener, last: initWatchVal, get: get, exp: watchExp, eq: !!objectEquality }; lastDirtyWatch = null; if (!isFunction(listener)) { var listenFn = compileToFn(listener || noop, ‘listener‘); watcher.fn = function(newVal, oldVal, scope) {listenFn(scope);}; } if (typeof watchExp == ‘string‘ && get.constant) { var originalFn = watcher.fn; watcher.fn = function(newVal, oldVal, scope) { originalFn.call(this, newVal, oldVal, scope); arrayRemove(array, watcher); }; } if (!array) { array = scope.$$watchers = []; } array.unshift(watcher); returnfunction() { arrayRemove(array, watcher); lastDirtyWatch = null; }; }
$watch方法有三个参数，第一个是监听表达式，可以是字符串也可以是方法，第二个是监听方法，第三个参数代表是否深度监听。
方法里面首先初始化一个get局部变量，初始化get的compileToFn函数其实是调用$parse实例对象来解析监听参数的，它会返回一个方法赋给get属性，这个方法会在dirty check里用到，用来获取监听表达式的值。$parse实例对象是$parseprovider实例化生成的。
接下来，初始化了一个watcher对象，此对象用来保存一些监听相关的信息：
- fn： 代表监听方法，当监听表达式有变化时，也就说值改变时会执行此方法
- last： 保存最后一次发生变化的监听表达式的值
- get： 保存一个监听表达式对应的方法，目的是用来获取表达式的值然后用来进行新旧对比，看是否有变化
- exp： 保存一个原始的监听表达式
- eq： 保存$watch方法的第三个参数，表示是否进行深度比较
然后会检查传递进来的监听方法是否为方法，如果不是，则通过parse方法解析生成一个方法listenFn ，然后通过包装这个listenFn方法生成一个方法watcher.fn
，此方法就是被称为监听方法，并且此方法体的内容就是执行刚才生成的方法listenFn，并默认传递当前作用域作为参数。
接着会检查监听表达式是否为字符串，如果是并且监听表达式的constant为true，就进入if语句，这代表监听表达式这个字符串是一个常量。那么，angular在处理这种监听的时候，执行完一次监听方法之后就会删除这个$watch。
最后，往当前作用域里的$$watchers数组中添加$watch对象，并返回一个方法。注意这里的返回值，利用JS的闭包保留了当前的watcher变量，这个返回值方法是用来删除监听用的。
接下来，我们来说说$digest方法
digest方法是dirty check的核心，它里面的代码是先执行$$asyncQueue队列中保存的表达式，然后开启一个traverseScopesLoop循环，来循环遍历$$watchers，如果watch与上一次的值不相同，也就是被改变了，就执行watch里的监听方法。假如ttl超过了angular默认设置的值，则dirth check结束。最后执行$$postDigestQueue队列里的表达式。
$digest: function() { var watch, value, last, watchers, asyncQueue = this.$$asyncQueue, postDigestQueue = this.$$postDigestQueue, length, dirty, ttl = TTL, next, current, target = this, watchLog = [], logIdx, logMsg, asyncTask; beginPhase(‘$digest‘); lastDirtyWatch = null; do { dirty = false; current = target; while(asyncQueue.length) { try { asyncTask = asyncQueue.shift(); asyncTask.scope.$eval(asyncTask.expression); } catch (e) { clearPhase(); $exceptionHandler(e); } lastDirtyWatch = null; } traverseScopesLoop: do { if ((watchers = current.$$watchers)) { length = watchers.length; while (length--) { try { watch = watchers[length]; if (watch) { if ((value = watch.get(current)) !== (last = watch.last) && !(watch.eq ? equals(value, last) : (typeof value == ‘number‘ && typeof last == ‘number‘ && isNaN(value) && isNaN(last)))) { dirty = true; lastDirtyWatch = watch; watch.last = watch.eq ? copy(value) : value; watch.fn(value, ((last === initWatchVal) ? value : last), current); if (ttl < 5) { logIdx = 4 - ttl; if (!watchLog[logIdx]) watchLog[logIdx] = []; logMsg = (isFunction(watch.exp)) ? ‘fn: ‘ + (watch.exp.name || watch.exp.toString()) : watch.exp; logMsg += ‘; newVal: ‘ + toJson(value) + ‘; oldVal: ‘ + toJson(last); watchLog[logIdx].push(logMsg); } } elseif (watch === lastDirtyWatch) { dirty = false; break traverseScopesLoop; } } } catch (e) { clearPhase(); $exceptionHandler(e); } } } if (!(next = (current.$$childHead || (current !== target && current.$$nextSibling)))) { while(current !== target && !(next = current.$$nextSibling)) { current = current.$parent; } } } while ((current = next)); if((dirty || asyncQueue.length) && !(ttl--)) { clearPhase(); throw $rootScopeMinErr(‘infdig‘, ‘{0} $digest() iterations reached. Aborting!\n‘ + ‘Watchers fired in the last 5 iterations: {1}‘, TTL, toJson(watchLog)); } } while (dirty || asyncQueue.length); clearPhase(); while(postDigestQueue.length) { try { postDigestQueue.shift()(); } catch (e) { $exceptionHandler(e); } } },
通过上面的代码，可以看出，里面的核心就是两个循环，外循环保证所有的model都能检测到（do{.....} while (dirty || asyncQueue.length);），内循环则是真正的检测每个watch（traverseScopesLoop: do{......}while((current = next));）。
watch.get方法的作用是计算监听表达式的值，然后用当前的值去跟旧值进行对比，假如不相等，也就是改变了，就执行监听方法。
注意这里的watch.eq，它的作用是是否进行深度检查，equals方法是angular里的方法，用来深度对比两个对象。这里的不相等有一个例外，那就是NaN === NaN，这个永远都是false，所以这里加了判断。
比较完之后，把新值传给watch.last，然后执行watch.fn，也就是监听方法，传递三个参数给它，分别是：最新计算的值，上次计算的值（如果是第一次，则传递新值），最后一个参数是当前作用域的实例对象。
内循环里面有一个设置外循环的条件值，那就是dirty = true，也就是说只要内循环执行了一次watch，则外循环还要继续执行，这是为了保证所有的model都能监测一次，虽然这个有点浪费性能，不过超过ttl设置的值，dirty check就会强制关闭，并抛出异常。
这里的watchLog日志对象是在内循环里，当ttl低于5的时候开始记录的。
当检查完一个作用域内的所有watch之后，则开始深度遍历当前作用域的子级作用域或者父级作用域，虽然这有些影响性能。它就是不断的查找当前作用域的子级，没有子级，则开始查找兄弟节点，最后查找它的父级，是一个深度遍历查找。只要next有值，则内循环一直执行。
不过内循环也有跳出的情况，那就是当前的watch跟最后一次检查的watch相等时，就退出内循环。
注意：这个内循环是一个label（标签）语句，这个可以在循环中执行跳出操作，就像上面的break traverseScopesLoop。
正常执行完两个循环之后，清除当前的阶段标识clearPhase();，然后开始执行postDigestQueue队列里的表达式。
接下来我们来说下$destroy方法
$destroy: function() { if (this.$$destroyed) return; var parent = this.$parent; this.$broadcast(‘$destroy‘); this.$$destroyed = true; if (this === $rootScope) return; forEach(this.$$listenerCount, bind(null, decrementListenerCount, this)); if (parent.$$childHead == this) parent.$$childHead = this.$$nextSibling; if (parent.$$childTail == this) parent.$$childTail = this.$$prevSibling; if (this.$$prevSibling) this.$$prevSibling.$$nextSibling = this.$$nextSibling; if (this.$$nextSibling) this.$$nextSibling.$$prevSibling = this.$$prevSibling; this.$parent = this.$$nextSibling = this.$$prevSibling = this.$$childHead = this.$$childTail = null; },
这个方法是用来销毁当前作用域的，原理主要是清空当前作用域内的一些属性，以免执行digest，$emit，$broadcast时会关联到。
里面的代码比较简单，先是通过foreach语句来遍历$$listenerCount属性，清空$$listeners，$$watchers，$$asyncQueue，$$postDigestQueue里面的值，然后再设置$parent，$$nextSibling，$$prevSibling，$$childHead，$$childTail为null。
接下来我们来说下$eval方法
此方法可以直接在angular程序里执行一个字符串表达式：
$eval: function(expr, locals) { return $parse(expr)(this, locals); },
它的源码其实就是通过parse方法把你传进去的字符串表达式解析成一个执行表达式的方法，然后传递当前作用域以及额外的参数执行此方法。
接下来我们来说下$evalAsync方法
evalAsync方法的作用就是延迟执行表达式，并且执行完成后，不管是否异常，都触发dirty check。
$evalAsync: function(expr) { if (!$rootScope.$$phase && !$rootScope.$$asyncQueue.length) { $browser.defer(function() { if ($rootScope.$$asyncQueue.length) { $rootScope.$digest(); } }); } this.$$asyncQueue.push({scope: this, expression: expr}); },
从上面的源码中可以看到，当前作用域内部有一个$$asyncQueue异步队列，它保存着所有需要延迟执行的表达式，此处的表达式可以是字符串也可以是方法，因为这个表达式最终会调用$eval方法。注意这里调用了$browser服务的defer方法，此方法是调用setTimeout来实现的，它的作用是延迟执行方法。
接下来我们来说下$postDigest方法
$$postDigest : function(fn) { this.$$postDigestQueue.push(fn); },
这个方法跟evalAsync不同的是，它不会主动触发digest方法，只是往postDigestQueue队列中添加执行表达式。它会在digest方法体内最后被执行，相当于在触发dirty check之后，我们可以执行别的一些逻辑。
接下来，我们来说下$apply方法
$apply: function(expr) { try { beginPhase(‘$apply‘); returnthis.$eval(expr); } catch (e) { $exceptionHandler(e); } finally { clearPhase(); try { $rootScope.$digest(); } catch (e) { $exceptionHandler(e); throw e; } } },
如果不在angularjs的上下文中执行js，但是想操作angular中的值，则必须使用此方法了。比如：在原生的DOM事件中执行想改变angular中某些model的值，这个时候就要使用$apply方法了。
代码中，首先让当前阶段标识变为$apply，然后执行$eval方法， 这个方法上面有讲到，最后执行$digest方法，使angular中的model改变。
接下来，我们来说说scope中的event模块，它提供$on，$emit，$broadcast三个方法：
$on方法
$on: function(name, listener) { var namedListeners = this.$$listeners[name]; if (!namedListeners) { this.$$listeners[name] = namedListeners = []; } namedListeners.push(listener); var current = this; do { if (!current.$$listenerCount[name]) { current.$$listenerCount[name] = 0; } current.$$listenerCount[name]++; } while ((current = current.$parent)); var self = this; returnfunction() { namedListeners[indexOf(namedListeners, listener)] = null; decrementListenerCount(self, 1, name); }; },
这个方法是用来绑定事件的，里面用到了两个实例变量$$listeners, $$listenerCount,分别用来保存事件,以及事件数量计数。
分析上面的代码，可以看出每当绑定一个事件的时候，都会向$$listeners对象中添加name的属性，属性值就是事件回调函数。注意这里有个事件计数器，只要有父级，则也给父级的$$listenerCount添加name的属性，并且把name的值+1。最后这个方法返回一个取消事件的方法，在方法中会先设置$$listeners中name的属性值为null，然后调用decrementListenerCount使该事件的计数器-1。
$emit方法
$emit: function(name, args) { var empty = [], namedListeners, scope = this, stopPropagation = false, event = { name: name, targetScope: scope, stopPropagation: function() {stopPropagation = true;}, preventDefault: function() { event.defaultPrevented = true; }, defaultPrevented: false }, listenerArgs = concat([event], arguments, 1), i, length; do { namedListeners = scope.$$listeners[name] || empty; event.currentScope = scope; for (i=0, length=namedListeners.length; i<length; i++) { if (!namedListeners[i]) { namedListeners.splice(i, 1); i--; length--; continue; } try { namedListeners[i].apply(null, listenerArgs); } catch (e) { $exceptionHandler(e); } } if (stopPropagation) return event; scope = scope.$parent; } while (scope); return event; },
这个方法是用来触发$on绑定的事件的。原理就是循环$$listeners，检查它里面是否有值，有的话，则执行。然后依次往上检查父级，这个方法有点类似浏览器的事件冒泡机制。
上面的代码比较简单，首先定义一个事件对象的变量event，然后开启一个循环，只要scope中有值，则一直执行。这个方法的事件链是向上传递的，不过如果在事件回调函数中执行stopPropagation方法，则会停止向上传递事件。
$broadcast方法
$broadcast: function(name, args) { var target = this, current = target, next = target, event = { name: name, targetScope: target, preventDefault: function() { event.defaultPrevented = true; }, defaultPrevented: false }, listenerArgs = concat([event], arguments, 1), listeners, i, length; while ((current = next)) { event.currentScope = current; listeners = current.$$listeners[name] || []; for (i=0, length = listeners.length; i<length; i++) { if (!listeners[i]) { listeners.splice(i, 1); i--; length--; continue; } try { listeners[i].apply(null, listenerArgs); } catch(e) { $exceptionHandler(e); } } if (!(next = ((current.$$listenerCount[name] && current.$$childHead) || (current !== target && current.$$nextSibling)))) { while(current !== target && !(next = current.$$nextSibling)) { current = current.$parent; } } } return event; }
这个是$emit的升级版，广播事件。它既能向上传递事件，也能向下传递事件，还能平级传递事件。核心原理就是利用深度遍历当前作用域。
代码跟$emit差不多，不同的是，这个方法是不断的取next值，而next的值则是通过深度遍历它的子级节点，兄弟节点，父级节点，并依次查找可用的名为name的事件回调函数。$broadcast方法不能常用，因为性能不是很理想。
angular是通过观察者模式，把一个model绑定到多个view中的。
如何知道model发生了变化，其实就是通过上面代码中的$watch和$digest（我们称这两个操作为脏值检测）。
如果model是深层次嵌套的结构，我们是通过对象的深比较，来知道model的某个属性是不是变化了。
上面代码中的ttl是什么意思呢？假设a和b两个方法互相watch对方，这时，a变化了，b就会变化，b变化了，a就会变化，形成一个死循环，angular内部就是通过ttl（默认为10）的值来判定，如果一个对象的值发生10次检测的过程还在变化，那么angular会强制停止，并抛出一个异常。
angular在双向绑定的时候，是如何支持表达式的呢？其实就是通过angular自带的编译器$parser对表达式进行解析做到的。
加油！
原文：http://www.cnblogs.com/chaojidan/p/4272172.html
内容总结
以上是互联网集市为您收集整理的AngularJS源码解析3：RootScope的创建过程全部内容，希望文章能够帮你解决AngularJS源码解析3：RootScope的创建过程所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。