表达式：
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的用法。
网友评论