AngularJS 中的脏数据检查

Rana Hasnain Khan 2022年5月31日
AngularJS 中的脏数据检查

我们将介绍如何在 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 应该采用两个参数,wExplistener。我们可以在 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,输入的值会显示出来。

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn