js 怎么实现watch方法

JavaScript019

js 怎么实现watch方法,第1张

var a = {name : 'kong'}

a.watch("name", function(id, oldVal, newVal){

console.log(id + '属性由' + oldVal + '变为' + newVal)

return newVal

})

a.name = 'zhang'

delete a.name

a.name = 'wang'

//输出name由kong变为zhang

//name由undefined变为wang

a.unwatch('name')

//取消监听该属性

$watch 方法在用的时候主要是手动的监听一个对象,但对象发生变化时触发某个事件。

需要被检测的对象,可以是以下任意一种:

1.某个数据,监测这个数据的值是否发生变化;

2.一条angular表达式,监测表达式的结果是否发生变化;

3.函数(),监测函数的返回值是否发生变化;

注意:以上都是字符串格式,并且都是在 $scope 作用域下执行的。

监听到变化时执行的函数。

1.newValue: watchObj的新的值;

2.oldValue: watchObj的旧的值;

3.scope: 就是当前控制器的 $scope ;

注意:函数或者表达式不是在 $scope 作用域下执行的,所以,如果是需要调用当前作用域下的某个函数,应该是 scope.watchCallback

布尔值,是否深度监听。

ifDeep值设置为true, 那么angular会检测被监控对象的每个属性是否发生了变化。

1.$watch 单一的变量

2.$watch 多个变量

3.$watch对象或数组

4.$watch 函数的返回结果

1. $observe 是angular指令中link函数第三个参数 ( attrs ) 的一个方法. 只能在指令的link函数中使用它. 它是通过 $evalAsync 函数实现监控的。

2. $watchGroup 是用来监听一组表达式。数组中任意表达式的变化都会触发监听函数。

3. $watchCollection 用来监听一个对象(包括数组), 当这个对象的任意属性发生变化时,触发监听函数。和 $watch 一样,第一次参数可以是一个返回一个对象的函数。

4. $observe, $watch, $watchGroup, $watchCollection 都返回一个移除监听的函数。当需要取消监听的时候,直接调用。

1. $parse,$eval 这两个函数都可以解析表达式的值。它们的区别在于 $parse 是一个服务,可以注入使用。 $eval 是 $scope 对象上的一个方法,我们只能在能访问 $scope 的场景下使用它。

2. $evalAsync 和 $eval 一样用来解析表达式的值。但它并不会立刻计算表达式的值,而是将表达式缓存起来,等到下一次 $digest (脏检查 )的时候执行。以获取更好的性能。