快捷導(dǎo)航

淺析AngularJS中的生命周期和延遲處理

更新時(shí)間：2015年06月18日 11:45:30 投稿：goldensun

這篇文章主要介紹了淺析AngularJS中的生命周期和延遲處理,是AngularJS中較為核心的深層次內(nèi)容,需要的朋友可以參考下

這里，我們?cè)儆懻撘恍┏Ｓ玫母呒?jí)的控制反轉(zhuǎn)容器(Inversion of Control containers)：延遲加載(lazy-loading)，生命周期管理(lifetime management)，以及延遲的創(chuàng)建/處理(deferred creation/resolution)。

延遲加載(Lazy-Loading)

所謂延遲加載就是當(dāng)你需要用到對(duì)象時(shí)候才對(duì)其進(jìn)行實(shí)例化。許多依賴注入系統(tǒng)都會(huì)在一開始就創(chuàng)建組件，作為它的可依賴項(xiàng)目。不過有時(shí)候，直到在應(yīng)用中用到它們之前，你都不會(huì)想去實(shí)例化這些組件。Angular 中，一個(gè)很好的例子就是，當(dāng)你在配置的時(shí)候去設(shè)置一個(gè)行為，而該行為又會(huì)引用到一些還沒創(chuàng)建的組件。

假設(shè)你想攔截系統(tǒng)內(nèi)建的 $log 服務(wù)，因此你把它存在了 $rootScope 里面。當(dāng)然我不建議這樣做，不過這樣舉例比較簡(jiǎn)單有效。為了攔截，你在配置的時(shí)候用到了 $provide 然后調(diào)用修飾方法。如果這時(shí)你想直接引用 $rootScope 的話，由于循環(huán)引用你會(huì)拿到個(gè)異常。而解決案是通過 $injector 延遲加載 $rootScope 。

下面的代碼只會(huì)在 $rootScope 第一次被使用的時(shí)候才去加載它。

$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;
}]);

之后的調(diào)用都會(huì)拿到一樣的單例 $rootScope。這里有個(gè)可用例子。我之前好像聽過有個(gè)(不對(duì)的)說法(Angular 只支持單例) … 當(dāng)然不是真的。$injector 中的方法就是用來給你管理你的組件的生命周期的。

生命周期管理

生命周期涉及到你如何管理組件的實(shí)例。默認(rèn)情況，當(dāng)你注入一個(gè) Angular 的依賴，依賴注入就會(huì)幫你創(chuàng)建它的一個(gè)副本然后在你的應(yīng)用里面重用它。大多數(shù)情況下這確實(shí)是我們所期待的。而有些情況下，會(huì)要求同一組件的多個(gè)實(shí)例。假設(shè)下面的計(jì)數(shù)服務(wù):

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

你的應(yīng)用要跟蹤不同的計(jì)數(shù)器。而你注入該服務(wù)后，總會(huì)拿到一樣的計(jì)數(shù)器。這難道是 Angular 的限制？

當(dāng)然不是。重復(fù)一次，通過 $injector 服務(wù)你可以在任何時(shí)候創(chuàng)建一個(gè)新副本。下面的代碼用了兩個(gè)獨(dú)立的計(jì)數(shù)器:

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;
      };
    };
  }]);

你可以看到計(jì)數(shù)器都是被獨(dú)立的實(shí)例跟蹤的，這里是可用例子。如果你需要經(jīng)常生成新實(shí)例，你可以像這樣注冊(cè)服務(wù):

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

產(chǎn)生一個(gè)需要的實(shí)例就是那么簡(jiǎn)單，而且你可以用你的工廠組件來代替 $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();
    };
  }]);

你可以看看這個(gè)完整版本的可用例子。如你所見，用 Angular 的內(nèi)建依賴注入是完全有可能管理你組件的生命周期的。那延遲處理(deferred resolution)又怎樣呢 – 比如說，有些組件你需要在 Angular 已經(jīng)配置好之后引入，而且需要用它們的依賴來包裝起來。

延遲處理(Deferred Resolution)

我們已經(jīng)介紹了在 Angular 中可以延遲處理依賴的一種方法。當(dāng)你想包裝某些東西的時(shí)候，你可以調(diào)用 $injector 服務(wù)的 instantiate ，然后它可以通過參數(shù)嗅探來解決依賴，看起來就像用 $inject 的靜態(tài)屬性一樣，或者也可以通過檢查你傳給它的數(shù)組來實(shí)現(xiàn)的。也就是說，下面這個(gè)是完全有效寫法:

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

你還可以調(diào)用帶裝飾數(shù)組的方法。假設(shè)你有一個(gè)方法依賴于 $log 服務(wù)，你可以運(yùn)行時(shí)通過延遲處理來調(diào)用它，像下面這樣:

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

你可以看看這個(gè)可用例子(打開你的控制臺(tái)，看看你按下按鈕之后發(fā)生了什么)。

總結(jié)

綜上所述，Angular 的依賴注入提供了許多高級(jí)特性，你在商業(yè)應(yīng)用生產(chǎn)線上會(huì)希望并且經(jīng)常會(huì)用到它們。factories, services, 和 providers 的便捷讓 Angular 開發(fā)者常常產(chǎn)生錯(cuò)覺，認(rèn)為這里只有唯一選項(xiàng)可用。而神奇之處在于 $injector 服務(wù)，你可以用它生成所需的單例，創(chuàng)建新的組件或者動(dòng)態(tài)引用帶依賴的方法。

最后要注意的是，你客戶端代碼里面的注入即使在 Angular 之外也是可用的。我們來看一個(gè)在 Angular 之外包裝的，通過注入調(diào)用 $log 服務(wù)的例子，點(diǎn)這里。為什么要把 ‘ng' 傳入方法的數(shù)組？它是 Angular 的核心模塊，當(dāng)你包裝你的模塊的時(shí)候是會(huì)被隱式添加的，但是如果你的指令要生成自己的注入實(shí)例的時(shí)候，你就必須顯式添加了。

您可能感興趣的文章: