还是先构造一个例子便于断点追踪, 我们知道通过Scope可以创建一个可监听的数据对象。
我们可以先看一下该示例都是做了什么
- 因为与Scope 相关的$RootScopeProvider是按照模块的方式进行引入的， 所以采用了页面渲染后再引入Scope测试用例（此处只是为了调试源码）
- new一个person对象在其上挂载属性及监听方法。
- 创建一个继承person数据的child对象， 用于查看scope的继承原理。
<div ng-app="myApp" ng-controller="myCtrl">
{{msg}}
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.msg = "hello word";
setTimeout(function () {
test3()
}, 0)
});
function test3() {
let person = new Scope();
person.name = 'dada'
person.age = 18;
person.like = ['food', 'song', 'beauty'];
person.$watch(function (scope) {
return scope.age;
}, function () {
console.log('the value changed')
})
person.$digest();
let child = person.$new();
child.name = 'xiaohua';
child.like.push('other');
console.log(person.name);
person.age = 16;
person.$digest();
console.log(child.like);
console.log(child.age);
}
scope
scope采用的是观察者模式，主要是通过digest阶段循环遍历观察队列进行新旧值的比较，如果发生变化则执行其回调函数
function Scope() {
this.$id = nextUid();
this.$$phase = this.$parent = this.$$watchers =
this.$$nextSibling = this.$$prevSibling =
this.$$childHead = this.$$childTail = null;
this.$root = this;
this.$$destroyed = false;
this.$$listeners = {};
this.$$listenerCount = {};
this.$$isolateBindings = null;
}
原型链上的方法如下图所示
scope2.png
$watch
watch代码如下： 创建一个watcher对象，将其推入到待观察队列中， 返回解绑函数。
$watch: function(watchExp, listener, objectEquality) {
var get = $parse(watchExp);
if (get.$$watchDelegate) {
return get.$$watchDelegate(this, listener, objectEquality, get);
}
var scope = this,
array = scope.$$watchers,
watcher = {
fn: listener,
last: initWatchVal,
get: get,
exp: watchExp,
eq: !!objectEquality
};
lastDirtyWatch = null;
if (!isFunction(listener)) {
watcher.fn = noop;
}
if (!array) {
array = scope.$$watchers = [];
}
// we use unshift since we use a while loop in $digest for speed.
// the while loop reads in reverse order.
array.unshift(watcher);
return function deregisterWatch() {
arrayRemove(array, watcher);
lastDirtyWatch = null;
};
}
$digest
-
如果是根作用域且applyAsyncId说明以进入到待检测阶段（通过
digest），无需触发下面的循环更新。
-
$digest采用双层循环进行实现， 外层循环通过dirty为true进行判断。 内层循环遍历scope上的watcher数组，如果存在变化则将dirty设为true。
为什么要采用双层循环而不是只遍历一次watcher数组执行变更呢， 这是因为在一次watcher变更的过程中，监听函数执行后会伴随着数据的变更从而引起再次的watcher变化。 -
lastDirtyWatch的作用， 假设这样一个例子scope中有100个watcher对象， 只有第一个watche发生了变更， 如果没有lastDirtyWatch的情况下， 第一次循环100次后dirty会变为true， 这时会进入第二次100次的循环一共需要200次。 而在有lastDirtyWatch的情况下第二次比较了第一个watcher后就会退出循环， 即101次
-
ttl用来防止watcher嵌套变更而引起死循环
$digest: function() {
var watch, value, last,
watchers,
length,
dirty, ttl = TTL,
next, current, target = this,
watchLog = [],
logIdx, logMsg, asyncTask;
beginPhase('$digest');
// Check for changes to browser url that happened in sync before the call to $digest
$browser.$$checkUrlChange();
if (this === $rootScope && applyAsyncId !== null) {
// If this is the root scope, and $applyAsync has scheduled a deferred $apply(), then
// cancel the scheduled $apply and flush the queue of expressions to be evaluated.
$browser.defer.cancel(applyAsyncId);
flushApplyAsync();
}
lastDirtyWatch = null;
do { // "while dirty" loop
dirty = false;
current = target;
while (asyncQueue.length) {
try {
asyncTask = asyncQueue.shift();
asyncTask.scope.$eval(asyncTask.expression, asyncTask.locals);
} catch (e) {
$exceptionHandler(e);
}
lastDirtyWatch = null;
}
traverseScopesLoop:
do { // "traverse the scopes" loop
if ((watchers = current.$$watchers)) {
// process our watches
length = watchers.length;
while (length--) {
try {
watch = watchers[length];
// Most common watches are on primitives, in which case we can short
// circuit it with === operator, only when === fails do we use .equals
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, null) : value;
watch.fn(value, ((last === initWatchVal) ? value : last), current);
if (ttl < 5) {
logIdx = 4 - ttl;
if (!watchLog[logIdx]) watchLog[logIdx] = [];
watchLog[logIdx].push({
msg: isFunction(watch.exp) ? 'fn: ' + (watch.exp.name || watch.exp.toString()) : watch.exp,
newVal: value,
oldVal: last
});
}
} else if (watch === lastDirtyWatch) {
// If the most recently dirty watcher is now clean, short circuit since the remaining watchers
// have already been tested.
dirty = false;
break traverseScopesLoop;
}
}
} catch (e) {
$exceptionHandler(e);
}
}
}
// Insanity Warning: scope depth-first traversal
// yes, this code is a bit crazy, but it works and we have tests to prove it!
// this piece should be kept in sync with the traversal in $broadcast
if (!(next = (current.$$childHead ||
(current !== target && current.$$nextSibling)))) {
while (current !== target && !(next = current.$$nextSibling)) {
current = current.$parent;
}
}
} while ((current = next));
// `break traverseScopesLoop;` takes us to here
if ((dirty || asyncQueue.length) && !(ttl--)) {
clearPhase();
throw $rootScopeMinErr('infdig',
'{0} $digest() iterations reached. Aborting!\n' +
'Watchers fired in the last 5 iterations: {1}',
TTL, watchLog);
}
} while (dirty || asyncQueue.length);
clearPhase();
while (postDigestQueue.length) {
try {
postDigestQueue.shift()();
} catch (e) {
$exceptionHandler(e);
}
}
},
$new
$new方法有两种作用域方式，一种可继承父作用的、一种为独立作用域（传参设为true）。
$new: function(isolate, parent) {
var child;
parent = parent || this;
if (isolate) {
child = new Scope();
child.$root = this.$root;
} else {
// Only create a child scope class if somebody asks for one,
// but cache it to allow the VM to optimize lookups.
if (!this.$$ChildScope) {
this.$$ChildScope = createChildScopeClass(this);
}
child = new this.$$ChildScope();
}
child.$parent = parent;
child.$$prevSibling = parent.$$childTail;
if (parent.$$childHead) {
parent.$$childTail.$$nextSibling = child;
parent.$$childTail = child;
} else {
parent.$$childHead = parent.$$childTail = child;
}
// When the new scope is not isolated or we inherit from `this`, and
// the parent scope is destroyed, the property `$$destroyed` is inherited
// prototypically. In all other cases, this property needs to be set
// when the parent scope is destroyed.
// The listener needs to be added after the parent is set
if (isolate || parent != this) child.$on('$destroy', destroyChildScope);
return child;
}
将ChildScope.prototype 设置为parent，在new一个新实例时会将proto指向parent 也就实现继承
function createChildScopeClass(parent) {
function ChildScope() {
this.$$watchers = this.$$nextSibling =
this.$$childHead = this.$$childTail = null;
this.$$listeners = {};
this.$$listenerCount = {};
this.$id = nextUid();
this.$$ChildScope = null;
}
ChildScope.prototype = parent;
return ChildScope;
}
网友评论