$scope.$watch(string|function, listener, objectEquality, prettyPrintExpression)

change

$scope.update = function() {
 $scope.name = 'tom'
}

实际上，当用户点击之后，angular内部还会执行$scope.$apply()，从而触发$digest遍历递归，最终触发界面重绘。

手动调用$apply

但是有些情况下，我们不可能直接使用angular内部指令，有两种情况我们需要手动调用$apply，一种是调用angular内置的语法糖，比如$http, $timeout，另一种是我们没有使用angular内部机制去更新了$scope，比如我们用$element.on('click', () => $scope.name = 'lucy')。也就是说“异步”和“机制外”修改$scope属性值之后，我们都要手动调用$apply，虽然我们在调用$timeout的时候，没有手写$apply，但实际上它内部确实调用了$apply:

function($timeout) {
 // 当我们通过on('click')的方式触发某些更新的时候，可以这样做
 $timeout(() => {
  $scope.name = 'lily'
 })
 // 也可以这样做
 $element.on('click', () => {
  $scope.name = 'david'
  $scope.$apply()
 })
}

但是，一定要注意，在递归过程中，绝对不能手动调用$apply，比如在ng-click的函数中，比如在$watch的回调函数中。

伪代码实现

通过上面的讲解，你可能已经对angular里面的脏检查已经了解了，但是我们还是希望更深入，用代码来把事情说清楚。我这里不去抄写angular的源码，而是自己写一段伪代码，这样更有助于理解整个机制。

import { isEqual } from 'lodash'

class Scope {
 constructor() {
  this.$$dirty = true
  this.$$count = 0
  this.$$watchers = []
 }
 $watch(property, listener, deepEqual) {
  let watcher = {
   property,
   listener,
   deepEqual,
  }
  this.$$watchers.push(watcher)
 }
 $digest() {
  if (this.$$count >= 10) {
   throw new Error('$digest超过10次')
  }

  this.$$watchers.forEach(watcher => {
   let newValue = eval('return this.' + watcher.property)
   let oldValue = watcher.oldValue
   if (watcher.deepEqual && isEqual(newValue, oldValue)) {
    watcher.dirty = false
   } 
   else if (newValue === oldValue) {
    watcher.dirty = false
   }
   else {
    watcher.dirty = true
    eval('this.' + watcher.property + ' = ' newValue)
    watcher.listener(newValue, oldValue) // 注意，listener是在newValue赋值给$scope之后执行的
    watcher.oldValue = newValue
   }
   // 这里的实现和angular逻辑里面有一点不同，angular里面，当newValue和oldValue都为undefined时，listener会被调用，可能是angular里面在$watch的时候，会自动给$scope加上原本没有的属性，因此认为是一次变动
  })
  
  this.$$count ++

  this.$$dirty = false
  for (let watcher of this.$$watchers) {
   if (watcher.dirty) {
    this.$$dirty = true
    break
   }
  }

  if (this.$$dirty) {
   this.$digest()
  }
  else {
    this.$patch()
    this.$$dirty = true
    this.$$count = 0
  }
 }
 $apply() {
  if (this.$$count) {
   return // 当$digest执行的过程中，不能触发$apply
  }
  this.$$dirty = true
  this.$$count = 0
  this.$digest()
 }
 $patch() {
  // 重绘界面
 }
}

function ControllerRegister(controllerTemplate, controllerFunction) {
 let $scope = new Scope()
 $paser(controllerTemplate, $scope) // 解析controller的模板，把模板中的属性全部都解析出来，并且把这些属性赋值给$scope
 controllerFunction($scope) // 在controllerFunction内部可能又给$scope添加了一些属性，注意，不能在运行controllerFunction的时候调用$scope.$apply()

 let properties = Object.keys($scope) // 找出$scope上的所有属性
 // 要把$scope上的一些内置属性排除掉 
 properties = properties.filter(item => item.indexOf('$') !== 0) // 当然，这种排除方法只能保证在用户不使用$作为属性开头的时候有用

 properties.forEach(property => {
  $scope.$watch(property, () => {}, true)
 })

 $scope.$digest()
}

上述内容就是angular脏检查原理及伪代码实现，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。