迹忆客 专注技术分享

我们将介绍如何在 AngularJs 中进行脏数据检查。

在 AngularJS 中实现脏数据检查

AngularJS 对双向数据绑定的 $scope 变量执行脏数据检查。Ember.js 通过以编程方式修复 setter 和 getter 来执行双向数据绑定，但在 Angular 中，脏数据检查允许它查找可能可用或不可用的变量。

# AngularJs
$scope.$watch( wExp, listener, objEq );

$scope.$watch 函数用于我们想要查看变量何时被更改。我们必须选择三个参数来应用这个函数：wExp 是我们想要观看的内容，listener 是我们希望它在更新时执行的操作，以及我们想要检查变量还是对象。

当我们想要检查一个变量时，我们可以在使用这个函数时跳过这个。让我们看一个例子，如下所示。

#AngularJs
$scope.newName = 'Subhan';

$scope.$watch( function( ) {
    return $scope.name;
}, function( newVal, oldVal ) {
    console.log('$scope.newName is updated!');
} );

Angular 会将你的 watcher 函数保存在 $scope 中。你可以通过将 $scope 记录到控制台来检查这一点。

在 $watch 中，我们还可以使用字符串代替函数。这也将与函数的工作方式相同。

当我们在 Angular 源代码中添加一个字符串时，代码将是：

#AngularJs
if (typeof wExp == 'string' && get.constant) {
  var newFn = watcher.fn;
  watcher.fn = function(newVal, oldVal, scope) {
    newFn.call(this, newVal, oldVal, scope);
    arrayRemove(array, watcher);
  };
}

通过应用此代码，wExp 将被设置为一个函数。这将使用具有我们选择的名称的变量指定我们的侦听器。

AngularJS 中的 $watchers 函数

所有选定的观察者都将存储在 $scope 中的 $$watchers 变量中。当我们检查 $$watchers 时，你会发现一个对象数组，如下所示。

#AngularJs
$$watchers = [
    {
        eq: false,
        fn: function( newVal, oldVal ) {},
        last: 'Subhan',
        exp: function(){},
        get: function(){}
    }
];

unRegWatch 函数由 $watch 函数返回。这表明如果我们想将初始的 $scope.$watch 分配给一个变量，我们可以通过命令它停止观察来轻松实现这一点。

只需确认我们已经打开并查看了在断开观察程序之前记录的第一个 $scope。

AngularJS 中的 $scope.$apply 函数

当我们尝试运行 controller/directive/etc. 时，Angular 会运行一个函数，我们在其中调用 $scope.$watch。在管理 rootScope 中的 $digest 函数之前，$apply 函数将运行我们选择的函数。

Angular $apply 函数如下：

#AngularJs
$apply: function(expr) {
    try {
      beginPhase('$apply');
      return this.$eval(expr);
    } catch (e) {
      $exceptionHandler(e);
    } finally {
      clearPhase();
      try {
        $rootScope.$digest();
      } catch (e) {
        $exceptionHandler(e);
        throw e;
      }
    }
}

AngularJS 中的 expr 参数

当使用 $scope.$apply 时，有时 Angular 或者我们会通过一个函数，expr 参数就是那个函数。

在使用此功能时，我们不会发现需要最频繁地使用 $apply。让我们看看当 ng-keydown 使用 $scope.$apply 时会发生什么。

要提交指令，我们使用以下代码。

#AngularJs
var EventNgDirective = {};
forEach(
  keydown keyup keypress submit focus blur copy cut paste'.split(' '),
  function(newName) {
    var newDirectiveName = newDirectiveNormalize('ng-' + newName);
    EventNgDirective[newDirectiveName] = ['$parse', function($parse) {
      return {
        compile: function($element, attr) {
          var fn = $parse(attr[directiveName]);
          return function ngEventHandler(scope, element) {
            element.on(lowercase(newName), function(event) {
              scope.$apply(function() {
                fn(scope, {$event:event});
              });
            });
          };
        }
      };
    }];
  }
);

此代码将遍历可以触发的不同类型的事件，生成一个名为 ng(eventName) 的新指令。当涉及指令的编译功能时，事件处理程序被记录在元素上，其中事件包含指令的名称。

当这个事件被触发时，Angular 将运行 $scope.$apply，为其提供一个运行函数。

这就是 $scope 值将如何使用元素值更新的方式，但此绑定只是单向绑定。这样做的原因是我们应用了 ng-keydown，它允许我们仅在应用此事件时进行更改。

结果，得到了一个新的值！

我们的主要目标是实现双向数据绑定。为了实现这个目标，我们可以使用 ng-model。

为了使 ng-model 发挥作用，它同时使用 $scope.$watch 和 $scope.$apply。

我们给出的输入将通过 ng-model 加入事件处理程序。此时，调用了 $scope.$watch！

$scope.$watch 在指令的控制器中被调用。

#AngularJs
$scope.$watch(function ngModelWatch() {
    var value = ngModelGet($scope);

    if (ctrl.$modelValue !== value) {

        var formatters = ctrl.$formatters,
            idx = formatters.length;

        ctrl.$modelValue = value;
        while(idx--) {
            value = formatters[idx](value);
        }

        if (ctrl.$viewValue !== value) {
            ctrl.$viewValue = value;
            ctrl.$render();
        }
    }

    return value;
});

当设置 $scope.$watch 时仅使用一个参数时，我们选择的函数将被应用，即使它是否已更新。ng-model 中的函数检查模型和视图是否同步。

如果不同步，该函数会给模型一个新值并更新它。当我们在 $digest 中运行这个函数时，这个函数允许我们通过返回新值来知道新值是什么。

为什么监听器没有被触发

让我们回到示例中的点，我们在与我们描述的类似的函数中取消注册了 $scope.$watch 函数。我们现在可以承认没有收到有关更新 $scope.name 的通知的原因，即使我们已经更新了它。

正如我们所知，$scope.$apply 由 Angular 在每个指令控制器函数上运行。当我们估计了指令的控制器功能时，$scope.$apply 函数将仅在一个条件下运行 $digest。

这意味着我们在 $scope.$watch 函数能够执行之前取消了它的注册，因此它被调用的可能性很小甚至没有。

AngularJS 中的 $digest 函数

你可以通过 $scope.$apply 在 $rootScope 上调用此函数。我们可以在 $rootScope 上运行摘要循环，然后它将越过范围并运行摘要循环。

摘要循环将触发我们在 $$watchers 变量中的所有 wExp 函数。它将根据最后一个已知值检查它们。

如果结果是否定的，监听器将被触发。

在摘要循环中，当它运行时，它会循环两次。一次，它将在观察者之间循环，然后再次循环，直到循环不再是脏。

当 wExp 和最后一个已知值不相等时，我们说循环是脏的。通常这个循环会运行一次，如果运行十次以上就会报错。

Angular 可以在任何可能改变模型值的东西上运行 $scope.$apply。

你必须运行 $scope.$apply(); 当我们在 Angular 之外更新了 $scope。这将通知 Angular 范围已更新。

让我们设计一个基本版本的脏数据检查。

我们希望保存的所有数据都将在 Scope 函数中。我们将在函数上扩展对象以复制 $digest 和 $watch。

因为我们不需要评估与 Scope 有关的函数，所以我们不会使用 $apply。我们将直接使用 $digest。

这就是我们的 Scope 的样子：

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

Scope.prototype.$watch = function( ) {

};

Scope.prototype.$digest = function( ) {

};

$watch 应该采用两个参数，wExp 和 listener。我们可以在 Scope 中设置值。

当 $watch 被调用时，我们将它们发送到先前存储在 Scope 中的 $$watcher 值中。

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

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

Scope.prototype.$digest = function( ) {

};

在这里，我们会注意到 listener 设置为一个空函数。

当没有提供 listener 时，你可以按照此示例轻松为所有变量注册 $watch。

现在我们将运行 $digest。我们可以检查旧值和新值是否相等。

如果监听器尚未被触发，我们也可以触发它。为此，我们将循环直到它们相等。

dirtyChecking 变量帮助我们实现了这个目标，无论值是否相等。

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

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

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

    do {
            dirtyChecking = false;

            for( var i = 0; i < this.$$watchers.length; i++ ) {
                var newVal = this.$$watchers[i].wExp(),
                    oldVal = this.$$watchers[i].last;

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

                    dirtyChecking = true;

                    this.$$watchers[i].last = newVal;
                }
            }
    } while(dirtyChecking);
};

现在，我们将设计一个新的范围示例。我们将把它分配给 $scope;然后，我们将注册一个 watch 函数。

然后我们将更新它并消化它。

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

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

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

    do {
            dirtyChecking = false;

            for( var i = 0; i < this.$$watchers.length; i++ ) {
                var newVal = this.$$watchers[i].wExp(),
                    oldVal = this.$$watchers[i].last;

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

                    dirtyChecking = true;

                    this.$$watchers[i].last = newVal;
                }
            }
    } while(dirtyChecking);
};


var $scope = new Scope();

$scope.newName = 'Subhan';

$scope.$watch(function(){
    return $scope.newName;
}, function( newVal, oldVal ) {
    console.log(newVal, oldVal);
} );

$scope.$digest();

我们已经成功实现了脏数据检查。当我们观看控制台时，你将观察其日志。

#AngularJs
Subhan undefined

以前，未定义 $scope.newName。我们已经为 Subhan 修复了它。

我们将把 $digest 函数连接到输入上的 keyup 事件。通过这样做，我们不必自己指定它。

这意味着我们也可以实现双向数据绑定。

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

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

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

    do {
            dirtyChecking = false;

            for( var i = 0; i < this.$$watchers.length; i++ ) {
                var newVal = this.$$watchers[i].wExp(),
                    oldVal = this.$$watchers[i].last;

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

                    dirtyChecking = true;

                    this.$$watchers[i].last = newVal;
                }
            }
    } while(dirtyChecking);
};


var $scope = new Scope();

$scope.newName = 'Subhan';

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

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

    $scope.$digest();
};

$scope.$watch(function(){
    return $scope.newName;
}, function( newVal, oldVal ) {
    console.log('Value updated In Input - The new value is ' + newVal);

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

var updateScopeValue = function updateScopeValue( ) {
    $scope.name = 'Butt';
    $scope.$digest();
};

使用这种技术，我们可以轻松地更新输入的值，如 $scope.newName 中所示。你也可以调用 updateScopeValue，输入的值会显示出来。