SORU
17 Kasım 2014, PAZARTESİ


AngularJS - $Kaldır olay dinleyicileri yok?

https://docs.angularjs.org/guide/directive

Bu olay dinleyerek, bellek sızıntıları neden olabilecek olay dinleyicilerini kaldırmak. Dinleyiciler kayıtlı kapsam ve unsurları otomatik olarak temizlerken onlar yok, ama eğer kayıtlı bir dinleyici üzerinde bir hizmet, ya da kayıtlı bir dinleyici bir DOM düğüm değil mi silinmiş Olmak Zorundasınız Temizle kendini ya da risk tanıtan bir bellek sızıntısı.

En iyi Uygulama: Direktifler kendilerini sonra temizlemek gerekir. Öğe kullanabilirsiniz.('$yok...') veya kapsamı.$('$yok...') Direktifi kaldırıldığında temizleme fonksiyonunu çalıştırmak için.

Soru:

Talimatımı içinde element.on "click", (event) -> bir:

  1. Direktif yok olduğunda, çöp toplama önlemek için element.on herhangi bir bellek başvurular var mı?
  2. Açısal belgeler $destroy yayılan olay olay dinleyicilerini kaldırmak için bir işleyici kullanmam gerektiğini belirtiyor. destroy() olay dinleyicileri kaldırıldı sanıyordum, bu durum böyle değil mi?

CEVAP
19 Kasım 2014, ÇARŞAMBA


Olay dinleyicileri

Önemli iki tür olduğunu anlamak için öncelikle "olay dinleyicileri":

  1. Kapsam olay dinleyicileri $on:) kayıtlı

    $scope.$on('anEvent', function (event, data) {
      ...
    });
    
  2. Olay işleyicileri için örnek on bind:) elemanlara bağlı

    element.on('click', function (event) {
      ...
    });
    

kapsam. $$() yok

$scope.$destroy() çalıştırıldığında kapsam dolar tüm dinleyicileri $on ile kayıtlı kaldıracaktır.

Olacaktırdeğilikinci tür DOM öğeleri veya herhangi bir bağlı olay işleyicileri kaldırmak.

Bu $scope.$destroy() direktifin bağlantı işlevi içinde örnek el ile arama işleyicisi örneğin yoluyla bağlı ** 19, ne de DOM öğesi kendisini kaldırmak anlamına gelir.


eleman.() çıkarın

remove jqLite bir yöntem (veya jQuery AngularjS önce yüklenen bir WordPress kullanmak bir yöntem) ve standart DOM Öğesi bir Nesne üzerinde kullanılabilir olduğunu unutmayın.

element.remove() element ve çocukların tüm DOM birlikte kaldırılacak çalıştırıldığında tüm olay işleyicileri örneğin yoluyla bağlı element.on.

Olacaktırdeğilkapsam $elemanı ile ilgili yok.

Bunu daha da karmaşık hale getirmek için de bir WordPress kullanmak bir olay $destroy denir. Üçüncü taraf öğeleri kaldırmak veya bunları el ile kaldırın jQuery kütüphaneleri ile çalışırken bazen, bu durumda temiz gerçekleştirmek için gerekebilir:

element.on('$destroy', function () {
  scope.$destroy();
});

Bir yönerge ne yaparsın "" . yok

Bu yönerge bağlıdır "". yok

Normal bir durumda bir yönerge ng-view geçerli görünümü değişiklikleri nedeniyle tahrip olmasıdır. Bu durumda ng-view Direktif ilişkili $kapsam yok, üst kapsam tüm başvuruları sever ve öğe üzerinde remove() arayacak.

Bu görünüm, bağlantı, bu bir Direktif varsa ng-view ile yok olduğunda işlev anlamına gelir:

scope.$on('anEvent', function () {
 ...
});

element.on('click', function () {
 ...
});

Her iki olay dinleyicileri otomatik olarak silinecektir.

Ancak, önemli görülen JS bellek sızıntısı desen elde varsa bu dinleyicilerin içinde kod hala bellek sızıntıları neden olabilir, örneğin bir notcircular references.

Hatta bir yönerge bir görünüm şeyler var, değişen yok elde bu normal durumda elle temizlemek gerekebilir.

Örneğin, eğer $rootScope: bir dinleyici kayıtlı

var unregisterFn = $rootScope.$on('anEvent', function () {});

scope.$on('$destroy', unregisterFn);

Bu $rootScope hiç uygulama süresi sırasında tahrip olduğu için gereklidir.

Aynı ise otomatik olarak kapsam $özelleştirmeler gerekli temizleme işlemini yapmaz o pub/sub başka bir uygulama kullanıyorsanız, ya da eğer Direktifi hizmetleri için geri geçer gider.

Başka bir durum$interval/$timeoutiptal etmek olacaktır:

var promise = $interval(function () {}, 1000);

scope.$on('$destroy', function () {
  $interval.cancel(promise);
});

Eğer yönergesi geçerli görünümü dışında örneğin öğeleri için olay işleyicileri ekler, el ile o kadar temiz gerekir:

var windowClick = function () {
   ...
};

angular.element(window).on('click', windowClick);

scope.$on('$destroy', function () {
  angular.element(window).off('click', windowClick);
});

Bu yönerge, "" Açısal, ng-view ng-if. örneğin, tarafından yok edilir, ne bazı örnekler vardı

Eğer özel direktifler varsa vs DOM elemanlarının yaşam döngüsü yönetin. tabii ki daha karmaşık olacak.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Glyn Dewis

    Glyn Dewis

    25 AĞUSTOS 2007
  • Randall P Studios

    Randall P St

    27 AĞUSTOS 2009
  • Rootjunky.com

    Rootjunky.co

    22 EKİM 2011