js 监视html发生变化,angularJS中的$watch方法监听作用域

对于$watch来说 有两种不同方式的监听，原因是由于不同数据类型的存在(基本类型：数字，字符串；和 引用数据类型)对于不同的数据类型监听的方式和方法不同。

对于基本数据类型，若使用一次赋值操作，这个基本数据类型变量就会“真正”被复制一次，然而对于引用类型，在进行赋值的时，仅仅是将赋值的变量指向这个引用类型。

对于基本数据类型编写的方式为：

change count: {{count}}

angular.module("watchModule",[])

.run(["$rootScope",function ($rootScope) {

$rootScope.count = 0;

$rootScope.name = "leikeke";

$rootScope.$watch("name",function () {

$rootScope.count++;

})

}])

7GLOIN@O_V8_XS_KJG30R(F.png

然而要对一个引用类型进行监视时，特别是在实际中常见的数组对象，情况就会有所不同。

{{item.value}}

change count: {{count}}

angular.module("watchModule",[])

.run(["$rootScope",function ($rootScope) {

$rootScope.count = 0;

$rootScope.items = [

{ "value":1 },

{ "value":2 },

{ "value":3 },

{ "value":4 }

];

$rootScope.$watch("items",function () {

$rootScope.count++;

})

}])

对inout框中的数据进行修改count的值始终得不到修改：

RHTF@3HGWDFD1@JC`65FQ~F.png

这个时候我们就需要了解$watch()方法的第三个参数，在上面的例子中我们知道$watch()可以接受两个参数，第一个就是需要监控的属性，第二个参数就是在监视属性发生变化时需要回调的方法，而第三个参数在默认情况下是false；在默认情况下，即不显示指明第三个参数或者将其指明为false时，我们进行的监听为"引用监听"(reference watch),也就是只要监听的对象引用没有发生变化，就不算他发生变化。

若将第三个参数改为true，此时进行的监视则为”全等监视“(equality watch)。此时，只要只要监视的属性发生变化，$watch就会执行相应的回调方法。

{{item.value}}

change count: {{count}}

angular.module("watchModule",[])

.run(["$rootScope",function ($rootScope) {

$rootScope.count = 0;

$rootScope.items = [

{ "value":1 },

{ "value":2 },

{ "value":3 },

{ "value":4 }

];

$rootScope.$watch("items",function () {

$rootScope.count++;

},true)

}])

FL6V~2W1534WA9{@FK{H7V0.png

既然全等监视如此好，为什么不用全等监视呢？是由于性能消耗问题。

在进行全等时，需要遍历整个监视对象，然后在每次$degist之前使用angular.copy()将整个对象深复制一遍，然后在运行之后用angular.equal()将前后的对象进行对比。因而性能消耗严重。

除了上述的两种方式，在ng1.1.4版本之后，新增加了一个$watchCollection()方法来针对数组(集合)进行监视，它的性能介于上两种方式之间，即它不会对数组中的每一项的属性进行监视，但可以对数组的项目增减作出反应。即改变数组的value属性值，$watch()不会作出反应，但如果在数组上push或pop一个元素，$watch()就会执行回调方法。

作用域监视解除

这需要我们关注$watch()的返回值，该方法调用完毕后返回另一个方法，只需调用返回的方法即可解除作用与监视。

change count: {{count}}

angular.module("watchModule",[])

.run(["$rootScope",function ($rootScope) {

$rootScope.count = 0;

$rootScope.name = "leikeke";

var unbindWatcher = $rootScope

.$watch("name",function (newValue,oldValue) {

if(newValue == "luckey"){

unbindWatcher();

}

$rootScope.count++;

},true)

}])

在此案例中，最初的文本内容发生改变时count会累加，但但文本值为 ”luckey“时，我们调用的$watch()返回的方法unbindWatcher()解除了作用域监视，所以再次改变时count不再累加。