浅析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 相关文章推荐
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
javascript实现切换td中的值
Dec 05 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
javascript每日必学之继承
Feb 23 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
vue制作抓娃娃机的示例代码
Apr 17 Javascript
element中el-container容器与div布局区分详解
May 13 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 Javascript
vue a标签点击实现赋值方式
Sep 07 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
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
让您的菜单不离网站
2006/10/03 Javascript
不错的新闻标题颜色效果
2006/12/10 Javascript
js no-repeat写法 背景不重复
2009/03/18 Javascript
能说明你的Javascript技术很烂的五个原因分析
2011/10/28 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
Javascript的比较汇总
2016/07/25 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
python k-近邻算法实例分享
2014/06/11 Python
跟老齐学Python之编写类之二方法
2014/10/11 Python
python中引用与复制用法实例分析
2015/06/04 Python
Python文件常见操作实例分析【读写、遍历】
2018/12/10 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
python多线程与多进程及其区别详解
2019/08/08 Python
python列表的逆序遍历实现
2020/04/20 Python
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
营销与策划应届生求职信
2013/11/04 职场文书
购房协议书范本
2014/04/11 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
JS Canvas接口和动画效果大全
2021/04/29 Javascript
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技