Angularjs全局变量被作用域监听的正确姿势  更新时间:2016年02月06日 15:55:42   投稿:mrr   这篇文章主要介绍了Angularjs全局变量被作用域监听的正确姿势的相关资料,需要的朋友可以参考下 如果你只想知道结论: $scope.$watch($rootScope.xxx,function(newVal,oldVal){ //do something }) 马上就有人问为什么不是: $rootScope.$watch(“xxx”,function(newVal,oldVal){ //do something }) 从我最近的一个bug来说说为什么要用第一种方式。 逻辑如图,一开始我使用了 $rootScope.$watch 的写法。因为 angularjs 在 $rootScope 上的 watch 一旦注册全局有效。而我的这个全局变量恰好是订单信息,也就是说不同的 controller 对他都是有改动的,每一次改动就会触发 $rootScope.$watch 进入别的 controller。可以类比看一下 $rootScope 上的 $broadcast 会全局出发的。 其实这并不是唯一的方式,查一下angular 源码不难找到 watch 方法源码不分有如下代码: return function deregisterWatch() { if (arrayRemove(array, watcher) >= 0) { incrementWatchersCount(scope, -1); } lastDirtyWatch = null; }; 这段代码告诉我们,手动清理 watch 是可行的。例如: var watcher = $rootScope.$watch(“xxx”,function(){}); //手动清除 watcher watcher(); 还是很简单对吧,以上方法同样可以用于 scope 上的 watch。 研究到这里的时候,觉得有点问题,那我在 $scope 会被清理么?于是呼,继续翻源码,我在 $destroy 方法里面找到如下代码: // Disable listeners, watchers and apply/digest methods this.$destroy = this.$digest = this.$apply = this.$evalAsync = this.$applyAsync = noop; this.$on = this.$watch = this.$watchGroup = function() { return noop; }; this.$$listeners = {}; 以上代码是本文给大家介绍的Angularjs全局变量被作用域监听的正确姿势,希望大家有所帮助,本文写的不好还请各位大侠多多指教。 您可能感兴趣的文章: 实例讲解JavaScript预编译流程 JavaScript 详解预编译原理 JavaScript运行过程中的“预编译阶段”和“执行阶段” 通过JSP的预编译消除性能瓶颈 JavaScript防止全局变量污染的方法总结 AngularJS基于provider实现全局变量的读取和赋值方法 JS全局变量和局部变量最新解析 浅谈JavaScript的全局变量与局部变量 javascript中局部变量和全局变量的区别详解 浅析JavaScript预编译和暗示全局变量 angularjs 全局变量 作用域 监听 相关文章 Angular的$http的ajax的请求操作(推荐) 这篇文章主要介绍了Angular的$http的ajax的请求操作的相关资料,需要的朋友可以参考下 2017-01-01 学习Angularjs分页指令 这篇文章主要和大家一起学习Angularjs分页指令,代码很详细,文章结构紧凑,感兴趣的小伙伴们可以参考一下 2016-07-07 AngularJS入门教程之表单校验用法示例 这篇文章主要介绍了AngularJS表单校验用法,结合实例形式分析了AngularJS各种常见的表单校验功能及使用技巧,需要的朋友可以参考下 2016-11-11 Angularjs 依赖压缩及自定义过滤器写法 这篇文章主要介绍了Angularjs 依赖压缩及自定义过滤器写法,非常不错,具有参考借鉴价值,需要的朋友可以参考下 2017-02-02 AngularJS 限定$scope的范围实例详解 这篇文章主要介绍了AngularJS 限定$scope的范围实例详解的相关资料,需要的朋友可以参考下 2017-06-06 AngularJS过滤器详解及示例代码 本文主要介绍AngularJS过滤器,这里整理了详细的资料和提供了示例代码及实例效果图,有兴趣的小伙伴可以参考下 2016-08-08 AngularJS表格详解及示例代码 本文主要讲解AngularJS表格的知识内容,这里整理了基础资料,并附代码和示例效果图,有兴趣的小伙伴可以参考下 2016-08-08 Angular2使用SVG自定义图表(条形图、折线图)组件示例 这篇文章主要介绍了Angular2使用SVG自定义图表(条形图、折线图)组件,涉及Angular结合svg进行图表绘制的相关操作技巧,需要的朋友可以参考下 2019-05-05 举例讲解AngularJS中的模块 这篇文章主要介绍了AngularJS中的模块,文中讲到了其应用模块和控制器模块的例子,需要的朋友可以参考下 2015-06-06 AngularJS基础 ng-keydown 指令简单示例 本文主要介绍AngularJS ng-keydown 指令,在这里帮大家整理了ng-keydown 指令的基础资料,并附有代码,有需要的朋友可以参考下 2016-08-08 最新评论

如果你只想知道结论:

$scope.$watch($rootScope.xxx,function(newVal,oldVal){
//do something
})

马上就有人问为什么不是:

$rootScope.$watch("xxx",function(newVal,oldVal){
//do something
})

从我最近的一个bug来说说为什么要用第一种方式。

逻辑如图,一开始我使用了 $rootScope.$watch 的写法。因为 angularjs 在 $rootScope 上的 watch 一旦注册全局有效。而我的这个全局变量恰好是订单信息,也就是说不同的 controller 对他都是有改动的,每一次改动就会触发 $rootScope.$watch 进入别的 controller。可以类比看一下 $rootScope 上的 $broadcast 会全局出发的。

其实这并不是唯一的方式,查一下angular 源码不难找到 watch 方法源码不分有如下代码:

return function deregisterWatch() {
if (arrayRemove(array, watcher) >= 0) {
incrementWatchersCount(scope, -1);
}
lastDirtyWatch = null;
};

这段代码告诉我们,手动清理 watch 是可行的。例如:

var watcher = $rootScope.$watch("xxx",function(){});
//手动清除 watcher 
watcher();

还是很简单对吧,以上方法同样可以用于 scope 上的 watch。

研究到这里的时候,觉得有点问题,那我在 $scope 会被清理么?于是呼,继续翻源码,我在 $destroy 方法里面找到如下代码:

// Disable listeners, watchers and apply/digest methods
this.$destroy = this.$digest = this.$apply = this.$evalAsync = this.$applyAsync = noop;
this.$on = this.$watch = this.$watchGroup = function() { 
return noop; 
};
this.$$listeners = {};

以上代码是本文给大家介绍的Angularjs全局变量被作用域监听的正确姿势,希望大家有所帮助,本文写的不好还请各位大侠多多指教。

您可能感兴趣的文章:

  • 实例讲解JavaScript预编译流程
  • JavaScript 详解预编译原理
  • JavaScript运行过程中的“预编译阶段”和“执行阶段”
  • 通过JSP的预编译消除性能瓶颈
  • JavaScript防止全局变量污染的方法总结
  • AngularJS基于provider实现全局变量的读取和赋值方法
  • JS全局变量和局部变量最新解析
  • 浅谈JavaScript的全局变量与局部变量
  • javascript中局部变量和全局变量的区别详解
  • 浅析JavaScript预编译和暗示全局变量
张贴在3