创建你自己的AngularJS-第一部分 Scopes （4）

NaNs

在JavaScript中，NaN（Not-a-Number）与它自己是不相等的。这听起来可能会有点奇怪，但是确实如此，为此我们如果在我们的dirty检查函数中不显示的处理NaN，那么如果一个监听器有一个NaN的值，那么它将永远是dirty的。

因为我们在基于值的dirty检查是使用的Lo-Dash的isEqual函数，而它已经为我们处理了这种情况。但是基于引用的检查就需要我们自己来处理了。使用下面的测试用例可以描述这种情况：

test/scope_spec.js

---

it("correctly handles NaNs",function(){
  scope.number = 0/0; // NaN
  scope.counter = 0;

  scope.$watch(
    function(scope) { return scope.number },
    function(newValue,oldValue,scope){
      scope.counter++;
    }
  );
  
  scope.$digest();
  expect(scope.counter).toBe(1);

  scope.$digest();
  expect(scope.counter).toBe(1);
});

我们监视一个为NaN的值，并当它发生改变时使计数器自增。我们期望计数器在第一次$digest时增加一次然后就保持不变。但是当我们运行测试用例我们得到的却是"到达TTL"的异常。因为NaN永远和最后一个值不等，这样scope也就一直处于不稳定的状态。

让我们通过调整$$areEqual函数来修复这个问题：

src/scope.js

---

Scope.prototype.$$areEqual = function(newValue,oldValue,valueEq){
  if(valueEq){
    return _.isEqual(newValue,oldValue);
  }else{
    return newValue === oldValue || 
        (typeof newValue === 'number' && 
            typeof oldValue === 'number' &&
            isNaN(newValue) && isNaN(oldValue));
  }
}

现在监视器在有NaN时也将会如预期的那样运行了。

到这里基于值的检查就已经实现了，现在让我们把焦点放到应用程序代码与scope交互的方式上来。

$eval - Scope的上下文

在scope的上下文中,你可以执行一些方法。在这些方法中最简单的就是$eval。它接受一个函数作为参数，并立即执行这个函数，而这个函数的参数就是scope本身。　然后它返回该函数返回的任何值。$eval也可以接收第二个可选的参数，它换按原样传给函数。

这里有几个单元测试说明如何使用$eval：

test/scope_spec.js

---

it("executes $eval'ed function and returns result",function(){
  scope.aValue = 42;

  var result = scope.$eval(function(scope){
    return scope.aValue;
  });
  expect(result).toBe(42);
});

it("passes the second $eval argument straight throught",function(){
  scope.aValue = 42;

  var result = scope.$eval(function(scope,arg){
    return scope.aValue + arg;
  },2);
  
  expect(result).toBe(44);
});

实现$eval是很简单的:

src/scope.js

---

Scope.prototype.$eval = function(expr,locals){
  return expr(this,locals);
};

那么以这样迂回的方式来调用一个函数的目的是什么？一个可能是使用$eval能够更明确的是专门在处理scope里面的代码。$eval也为$apply建立一个模块，这个是我们接下来将要看到的。

然而，也许最有趣的使用$eval只有当我们开始讨论表达式而不是原始的函数时候.就像$watch，你可以给$eval一个字符串表达式。它将编译表达式并在scope的上下文中执行。我们将在这本书的第二部分中实现了这一功能。

$apply -- 在digest循环中集成外部代码

可能在scope中最有名的方法就是$apply。它被认为是Angular标准的集成外部库的方法。之所以会这样是因为，$apply接受一个函数作为参数。它使用$eval执行这个函数然后调用$digest从而推动digest循环。这里有一个测试用例：

test/scope_spec.js

---

it("executes $apply'ed function and starts the digest",function(){
  scope.aValue = 'someValue';
  scope.counter = 0;

  scope.$watch(
    function(scope){ return scope.aValue },
    function(newValue,oldValue,scope){
      scope.counter++;
    }
  );
  scope.$digest();
  expect(scope.counter).toBe(1);

  scope.$apply(function(scope){
    scope.aValue = 'someOtherValue';
  });
  expect(scope.counter).toBe(2);
});

我们有一个监视器用来监视scope.aValue并增加一个计数器。我们测试当$apply被调用时监视器是否立即被执行。

这里需要简单的实现来让测试通过：

src/scope.js

---

Scope.prototype.$apply = function(expr){
  try{
    return this.$eval(expr);
  }finally{
    this.$digest();
  }
};

为了即便提供的函数抛出异常digest也会执行，我们将$digest的调用放到finally块。

$apply的好处在于我们能够执行一些Angular不知道的代码。这些代码可能依然需要scope的内容并且只要我们将这些代码使用$apply包裹我们就能确定scope上的监视器能够感知它们发生的变化。当人们需要集成代码到Angular的生命周期，那就是使用$apply。