AngularJS双向数据绑定的源码分析

所谓双向数据绑定，概念上为数据模型到视图的绑定，以及视图到数据模型的绑定。容易理解的说法就是从界面的操作能实时反映到数据，数据的变更能实时展现到界面。

目前对于双向数据绑定的实现有这么几种流派
脏值检测，例如AngularJS
Getter/Setter，例如Vue.js
对于Getter/Setter实现的数据双向绑定来说，核心在于重定义model的getter与setter方法，在数据变动的时候重新渲染页面。两种方式各有优劣。当我们使用Getter/Setter的时候，每次修改数值都会激活刷新模版的方法，而脏值检测则可以在完成所有数值变动后，统一刷新到Dom。但是当监听元素变多的时候，watcher列表会变得很长，查询变动的数据元素将耗费更多的资源。AngularJS双向数据绑定源码分析

源码版本 Angular-1.5.0 angular.js

在Angular当中，有个贯穿始终的对象$scope。Scope本质为一个构造函数,而$scope就是Scope的实例。源码16028行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.$$watchersCount = 0;
this.$$isolateBindings = null;
}在Scope的原型(Scope.prototype)中共定义了13个函数。其中有两个函数对双向数据绑定起着至关重要的作用：监视对象属性。
$watch
$digest
$watch和$digest是同一个硬币的两面。它们二者同时形成了$digest循环的核心：对数据的变化做出反应。可以使用$watch函数为scope添加一个监视器。当这个scope中有变化发生时，监视器便会提醒你。
$watch 源码16247行
$watch: function(watchExp, listener, objectEquality, prettyPrintExpression) {
var get = $parse(watchExp);

if (get.$$watchDelegate) {
return get.$$watchDelegate(this, listener, objectEquality, get, watchExp);
}
var scope = this,
array = scope.$$watchers,
watcher = {
fn: listener,
last: initWatchVal,
get: get,
exp: prettyPrintExpression || 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);
incrementWatchersCount(this, 1);

return function deregisterWatch() {
if (arrayRemove(array, watcher) >= 0) {
incrementWatchersCount(scope, -1);
}
lastDirtyWatch = null;
};
}为了监视一个变量的变化，可以使用$scope.$watch函数。这个函数的前两个，它指明了要观察什么(watchExp)，在变化时要发生什么(listener)。$scope.name = 'Morph_Zhou';

$scope.$watch( function( ) {
return $scope.name;
}, function( newValue, oldValue ) {
console.log('$scope.name was updated!');
} );在Scope中有一个对象数组$$watchers，里面保存着我们定义的所有的监视器对象watcher。$watch函数将会返回一个deregisterWatch函数。这意味着如果我们使用$scope.$watch对一个变量进行监视，我们也可以在以后通过调用某个函数来停止监视。

另外一个是$digest函数。它迭代了所有绑定到scope中的监视器，然后进行监视并运行相应的监听函数。

$digest 源码16607行$digest: function() {
var watch, value, last, fn, get,
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) {
get = watch.get;
if ((value = 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;
fn = watch.fn;
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.$$watchersCount && 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);
}
}
}$digest函数将会在$rootScope中被$scope.$apply所调用。它将会在$rootScope中运行digest循环，然后向下遍历每一个作用域并在每个作用域上运行循环。在简单的情形中，digest循环将会触发所有位于$$watchers变量中的所有watchExp函数，将它们和最新的值进行对比，如果值不相同，就会触发监听器。当digest循环运行时，它将会遍历所有的监听器然后再次循环，只要这次循环发现了”脏值”，循环就会继续下去。如果watchExp的值和最新的值不相同，那么这次循环就会被认为发现了“脏值”。
实际上双向数据绑定的功能远远不止这么一些，这里仅仅是极尽简化的版本。如果想实现一个功能较为齐全的，可以参考慕课网上大漠穷秋的一节课程当中的要求。首先我们先要模仿Angular设置自己的scope，我们只需要简单的实现一下$watch,以及$digest方法。$watch函数需要接受两个参数，watchExp和listener。当$watch被调用时，我们需要将它们push进入到Scope的$$watcher数组中。如果没有提供listener，我们会将listener设置为一个空函数，这样一来我们可以$watch所有的变量。接下来我们将会创建$digest。我们需要来检查旧值是否等于新的值，如果二者不相等，监听器就会被触发。我们会一直循环这个过程，直到二者相等。

var Scope = function() {
this.$$watchers = [];
};

Scope.prototype.$watch = function(watchExp, listener) {
this.$$watchers.push({
watchExp: watchExp,
listener: listener || function() {}
});
};

Scope.prototype.$digest = function() {
var dirty;

do {
dirty = false;

for (var i = 0; i < this.$$watchers.length; i++) {
var newValue = this.$$watchers[i].watchExp(),
oldValue = this.$$watchers[i].last;

if (oldValue !== newValue) {
this.$$watchers[i].listener(newValue, oldValue);

dirty = true;

this.$$watchers[i].last = newValue;
}
}
} while (dirty);
};

如果我们把$digest函数绑定到一个input元素的keyup事件上。var $scope = new Scope();

$scope.name = 'Morph_Zhou';

var element = document.querySelectorAll("input");

element[0].onkeyup = function() {
$scope.name = element[0].value;

$scope.$digest();
};

$scope.$watch(function() {
return $scope.name;
}, function(newValue, oldValue) {
console.log('Input value updated - it is now ' + newValue);

element[0].value = $scope.name;
});

var updateScopeValue = function updateScopeValue() {
$scope.name = 'Morph_Gaming';
$scope.$digest();
};使用上面的代码，无论何时我们改变了input的值，$scope中的name属性都会相应的发生变化。

笔记：scope本质是一个构造函数，在该构造函数中有一个对象数组$$watchers，里面保存这我们定义的监听器对象watcher。
watcher，从设计模式的角度讲，称为监听器、观察者。用户调用$scope.watch()函数，其实是生成一个watcher对象，该对象的数据结构可简化为 {watchExp:"",listener:fn||function(){} }，正好对应$scope.watch()函数的参数。然后生成的watcher对象会被push进Scope的$$watcher数组中。当用户与html页面交互触发事件时，会调用$digest()函数。digest循环将会触发位于$$watchers变量中的所有watchExp函数