AngularJS学习之路——表达式（1）

表达式：

angularJS中广泛应用表达式，可以说是无处不在。

使用方法：{{ expression }}

表达式和eval非常相似，但这个表达式是由angularJS来处理，所以有下面几个特性：

• 所有表达式都在其所属的作用域内部执行，并且有权访问$scope；

• 当表达式发生TypeError和ReferenceError时，并不会抛出错误；

• 不能使用任何的流程控制功能；

• 可以接受过滤器或者过滤器链。

对表达式进行的任何操作，都会在其所属的作用域内部执行，因此可以在表达式内部调用那些限制在此作用域内的变量，并进行循环、函数调用、将变量应用到数学表达式中等操作。

如何手动解析angularJS那？

angularJS是由$parse这个内部服务来进行表达式运算，这个服务能够访问当前所处的作用域。并且还可以访问定义在$scope上的原始数据。

举个栗子

<div ng-app="app" ng-controller="MyController">
  <input type="text" ng-model="text">
  <h2>{{ parseValue }}</h2>
</div>

我们可以通过$watch去监听input文本框

angular.module('app',[])
.controller('MyController',function($scope,$parse){
  $scope.$watch('text',function(newVal,oldVal,scope){
    if( newVal != oldVal ){
      let parseFun = $parse( newVal );
      $scope.parseValue = parseFun(scope);
    }
  });
});

什么是$watch?

简单来说，$wtach是$scope对象上的一个方法，其作用就是监听数据的变化。

$watch方法会给Angular事件循环内的每个$digest调用装配一个脏值检查。如果在表达式上检测到变化，Angular总是会返回$digest循环。

$wtach方法

$watch函数本身接受两个必要参数和一个可选的参数：
必选参数 ：watchExpression 和 listener/callback；
可选参数 ：objectEquality

watchExpression

watchExpression可以是一个作用域对象的属性，或者是一个函数。在$digest循环中的每个$digest调用都会涉及它。
如果watchExpression是一个字符串，Angular会在$scope上下文中对它求值。如果它是一个函数，那么Angular会认为它会返回应该被监控的值。

listener/callback

作为回调的监听器函数，它只会在watchExpression的当前值与先前值不相等（除了首次运行初始化期间）时调用。
并且该回调函数接受三个返回值：newValue(新值) 、oldValue(旧值) 、scope(作用域)。

objectEquality

objectEquality是一个进行比较的布尔值，用来告诉Angular是否检查严格相等。

举个栗子：

...
$scope.name = 'Hello,World!';

$scope.$watch('name',function(newVal,oldVal,scope){
  console.log( newVal );
  console.log( oldVal );
})
...

大量的$watch会引起性能问题，所以我们最好在用完$watch之后将其销毁。$watch函数会给监听器返回一个注销函数，我们只要将其存到一个变量中，再次调用即可。

改写代码

...
$scope.name = 'Hello,World!';

let watch = $scope.$watch('name',function(newVal,oldVal,scope){
  console.log( newVal );
  console.log( oldVal );
});

/* 调用即可销毁 */
watch();
...

总结

• 表达式的使用方法;
• 手动解析AngularJS($parse、$watch);
• $watch的用法。