scope的作用
- 在controller和view之间打通数据
- 在不同应用的不同部分共享数据
- 事件
- 观察数据变动
scope的本质
function Scope() {
}
var scope = new Scope();
scope.aProperty = 1;
expect(scope.aProperty).toBe(1);
$watch $digest
function Scope() {
this.$$watchers = [];
}
Scope.prototype.$watch = function (watchFn, listenerFn) {
var watcher = {
watchFn: watchFn,
listenerFn: listenerFn
};
this.$$watchers.push(watcher);
};
Scope.prototype.$digest = function () {
this.$$watchers.forEach(function (watcher) {
watcher.listenerFn();
});
};
listenerFn执行时机，dirty-checking，当watchFn返回值变化了，执行listenerFn。原理是当前和上一次比，不一样就认为是dirty。
scope.counter = 0;
scope.$watch(function (scope) {
return scope.someValue;
}, function (newValue, oldValue, scope) {
scope.counter++;
});
scope.$digest();
expect(scope.counter).toBe(1);
scope.$digest();
expect(scope.counter).toBe(1);
scope.someValue = 'b';
expect(scope.counter).toBe(1);
实现：
Scope.prototype.$digest = function () {
var self = this;
var newValue, oldValue;
this.$$watchers.forEach(function (watcher) {
newValue = watcher.watchFn(self);
oldValue = watcher.last;
if (newValue !== oldValue) {
watcher.last = newValue;
watcher.listenerFn(newValue, oldValue, self);
}
});
};
- $digest遍历的不是scope上的属性，而是遍历$$watchers数组
- 每次$digest都会把$$watchers中的每一个watchFn都执行至少一次。
解决初始值undefined的问题
scope.counter = 0;
scope.$watch(function (scope) {
return scope.someValue;
}, function (newValue, oldValue, scope) {
scope.counter++;
});
scope.$digest();
expect(scope.counter).toBe(1);
实现：
function initWatchVal() { }
Scope.prototype.$watch = function (watchFn, listenerFn) {
var watcher = {
watchFn: watchFn,
listenerFn: listenerFn,
last: initWatchVal
};
this.$$watchers.push(watcher);
};
初始值触发的，newValue和oldValue的问题
Scope.prototype.$digest = function () {
var self = this;
var newValue, oldValue;
this.$$watchers.forEach(function (watcher) {
newValue = watcher.watchFn(self);
oldValue = watcher.last;
if (newValue !== oldValue) {
watcher.last = newValue;
watcher.listenerFn(newValue,
oldValue === initWatchVal ? newValue : oldValue,
self);
}
});
};
解决不设置listenerFn的问题
scope.$watch(watchFn);
scope.$digest();
Scope.prototype.$watch = function (watchFn, listenerFn) {
var watcher = {
watchFn: watchFn,
listenerFn: listenerFn || function () {},
last: initWatchVal
};
this.$$watchers.push(watcher);
};
解决调用链的问题
scope.name = 'Jane';
scope.$watch(function (scope) {
return scope.nameUpper;
}, function (newValue, oldValue, scope) {
if (newValue) {
scope.initial = newValue.substring(0, 1) + '.';
}
});
scope.$watch(function (scope) {
return scope.name;
}, function (newValue, oldValue, scope) {
if (newValue) {
scope.nameUpper = newValue.toUpperCase();
}
});
scope.$digest();
expect(scope.initial).toBe('J.');
解决：
Scope.prototype.$$digestOnce = function () {
var self = this;
var newValue, oldValue, dirty;
this.$$watchers.forEach(function (watcher) {
newValue = watcher.watchFn(self);
oldValue = watcher.last;
if (newValue !== oldValue) {
watcher.last = newValue;
watcher.listenerFn(newValue,
(oldValue === initWatchVal ? newValue : oldValue),
self);
dirty = true;
}
});
return dirty;
};
Scope.prototype.$digest = function () {
var dirty;
do {
dirty = this.$$digestOnce();
} while (dirty);
};
解决监听的死循环
scope.counterA = 0;
scope.counterB = 0;
scope.$watch(function (scope) {
return scope.counterA;
}, function (newValue, oldValue, scope) {
scope.counterB++;
});
scope.$watch(function (scope) {
return scope.counterB;
}, function (newValue, oldValue, scope) {
scope.counterA++;
});
TTL(Time To Live)
Scope.prototype.$digest = function () {
var ttl = 10;
var dirty;
do {
dirty = this.$$digestOnce();
if (dirty && !(ttl--)) {
throw "10 digest iterations reached";
}
} while (dirty);
};
能否减少循环次数？
function Scope() {
this.$$watchers = [];
this.$$lastDirtyWatch = null;
}
Scope.prototype.$digest = function () {
var ttl = 10;
var dirty;
this.$$lastDirtyWatch = null;
do {
dirty = this.$$digestOnce();
if (dirty && !(ttl--)) {
throw "10 digest iterations reached";
}
} while (dirty);
};
Scope.prototype.$$digestOnce = function () {
var self = this;
var newValue, oldValue, dirty;
forEach(this.$$watchers, function (watcher) {
newValue = watcher.watchFn(self);
oldValue = watcher.last;
if (newValue !== oldValue) {
self.$$lastDirtyWatch = watcher;
watcher.last = newValue;
watcher.listenerFn(newValue,
(oldValue === initWatchVal ? newValue : oldValue),
self);
dirty = true;
} else if (self.$$lastDirtyWatch === watcher) {
return false;
}
});
return dirty;
};
$watch嵌套问题
scope.aValue = 'abc';
scope.counter = 0;
scope.$watch(
function (scope) {
return scope.aValue;
},
function (newValue, oldValue, scope) {
scope.$watch(
function (scope) {
return scope.aValue;
},
function (newValue, oldValue, scope) {
scope.counter++;
}
);
}
);
scope.$digest();
expect(scope.counter).toBe(1);
解决方案：
Scope.prototype.$watch = function (watchFn, listenerFn) {
var watcher = {
watchFn: watchFn,
listenerFn: listenerFn || function () {},
last: initWatchVal
};
this.$$watchers.push(watcher);
this.$$lastDirtyWatch = null;
};
脏检查中的引用检查和值检查
脏检查中的NaN问题
