scope与digest

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问题