浅析AngularJS中的生命周期和延迟处理


Posted in Javascript onJune 18, 2015

这里,我们再讨论一些常用的高级的控制反转容器(Inversion of Control containers):延迟加载(lazy-loading),生命周期管理(lifetime management),以及延迟的创建/处理(deferred creation/resolution)。
 
延迟加载(Lazy-Loading)

所谓延迟加载就是当你需要用到对象时候才对其进行实例化。许多依赖注入系统都会在一开始就创建组件,作为它的可依赖项目。不过有时候,直到在应用中用到它们之前,你都不会想去实例化这些组件。Angular 中,一个很好的例子就是,当你在配置的时候去设置一个行为,而该行为又会引用到一些还没创建的组件。

假设你想拦截系统内建的 $log 服务,因此你把它存在了 $rootScope 里面。当然我不建议这样做,不过这样举例比较简单有效。为了拦截,你在配置的时候用到了 $provide 然后调用修饰方法。如果这时你想直接引用 $rootScope 的话,由于循环引用你会拿到个异常。而解决案是通过 $injector 延迟加载 $rootScope 。

下面的代码只会在 $rootScope 第一次被使用的时候才去加载它。

 

$provide.decorator(, [, ,
   ($delegate, $injector) {
     log = $delegate.log.bind($delegate);
    $delegate.log = (msg) {
       rs = $injector.get();
       (rs.logs === undefined) {
        rs.logs = [];
      }
      rs.logs.push(msg);
      log(msg);
    };
     $delegate;
}]);

之后的调用都会拿到一样的单例 $rootScope。 这里有个可用例子。我之前好像听过有个(不对的)说法(Angular 只支持单例) … 当然不是真的。$injector 中的方法就是用来给你管理你的组件的生命周期的。

生命周期管理

生命周期涉及到你如何管理组件的实例。默认情况,当你注入一个 Angular 的依赖,依赖注入就会帮你创建它的一个副本然后在你的应用里面重用它。大多数情况下这确实是我们所期待的。而有些情况下,会要求同一组件的多个实例。假设下面的计数服务:

 
 

Counter($log) {
  $log.log();
}
 
angular.extend(Counter.prototype, {
  count: 0,
  increment: () {
    .count += 1;
     .count;
  }
});
 
Counter.$inject = [];
 
app.service(, Counter);

你的应用要跟踪不同的计数器。而你注入该服务后,总会拿到一样的计数器。这难道是 Angular 的限制?

当然不是。重复一次,通过 $injector 服务你可以在任何时候创建一个新副本。下面的代码用了两个独立的计数器:
 

app.run([, , ,
   (rs, c, i) {
    rs.count = c.count;
    rs.update = c.increment;
    rs.update2 = () {
       c = i.instantiate(Counter);
      rs.count2 = c.count;
      rs.update2 = () {
        c.increment();
        rs.count2 = c.count;
      };
    };
  }]);

你可以看到计数器都是被独立的实例跟踪的,这里是可用例子。如果你需要经常生成新实例,你可以像这样注册服务:
 

app.factory(, [,
   (i) {
     {
      getCounter: () {
         i.instantiate(Counter);
      }
    };
  }]);

产生一个需要的实例就是那么简单,而且你可以用你的工厂组件来代替 $injector:
 

app.run([, ,
   (rs, cf) {
     c1 = cf.getCounter(),
      c2 = cf.getCounter();
    rs.count = c1.count;
    rs.update = c1.increment;
    rs.count2 = c2.count;
    rs.update2 = () {
      rs.count2 = c2.increment();
    };
  }]);

你可以看看这个完整版本的可用例子。如你所见,用 Angular 的内建依赖注入是完全有可能管理你组件的生命周期的。那延迟处理(deferred resolution)又怎样呢 ? 比如说,有些组件你需要在 Angular 已经配置好之后引入,而且需要用它们的依赖来包装起来。

延迟处理(Deferred Resolution)

我们已经介绍了在 Angular 中可以延迟处理依赖的一种方法。当你想包装某些东西的时候,你可以调用 $injector 服务的 instantiate ,然后它可以通过参数嗅探来解决依赖,看起来就像用 $inject 的静态属性一样,或者也可以通过检查你传给它的数组来实现的。也就是说,下面这个是完全有效写法:
 

$injector.instantiate(['dependency', Constructor]);

你还可以调用带装饰数组的方法。假设你有一个方法依赖于 $log 服务,你可以运行时通过延迟处理来调用它,像下面这样:

 

myFunc = [, ($log) {
  $log.log();
}];
$injector.invoke(myFunc);

你可以看看这个可用例子(打开你的控制台,看看你按下按钮之后发生了什么)。
 
总结

综上所述,Angular 的依赖注入提供了许多高级特性,你在商业应用生产线上会希望并且经常会用到它们。factories, services, 和 providers 的便捷让 Angular 开发者常常产生错觉,认为这里只有唯一选项可用。而神奇之处在于 $injector 服务,你可以用它生成所需的单例,创建新的组件或者动态引用带依赖的方法。

最后要注意的是,你客户端代码里面的注入即使在 Angular 之外也是可用的。我们来看一个在 Angular 之外包装的,通过注入调用 $log 服务的例子,点这里。为什么要把 ‘ng' 传入方法的数组?它是 Angular 的核心模块,当你包装你的模块的时候是会被隐式添加的,但是如果你的指令要生成自己的注入实例的时候,你就必须显式添加了。

Javascript 相关文章推荐
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
js Dialog 实践分享
Oct 22 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
vue中锚点的三种方法
Jul 06 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
typescript编写微信小程序创建项目的方法
Jan 29 Javascript
Node.js事件驱动
Jun 18 #Javascript
详解AngularJS的通信机制
Jun 18 #Javascript
javascript背景时钟实现方法
Jun 18 #Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 #Javascript
javascript随机显示背景图片的方法
Jun 18 #Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 #Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 #Javascript
You might like
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
Prototype框架详解
2015/11/25 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
Python采集腾讯新闻实例
2014/07/10 Python
python实现解数独程序代码
2017/04/12 Python
Python Flask基础教程示例代码
2018/02/07 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
PyTorch预训练的实现
2019/09/18 Python
Python使用re模块验证危险字符
2020/05/21 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
金宝贝童装官网:Gymboree
2016/08/31 全球购物
护士试用期自我鉴定
2014/02/08 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
导游欢送词
2015/01/31 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL
MySQL 逻辑备份 into outfile
2022/05/15 MySQL
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python