Neden anonim fonksiyon tanımlama ve değişken olarak bir WordPress kullanmak uzatır mısın?

SORU

29 NİSAN 2012, Pazar

Neden anonim fonksiyon tanımlama ve değişken olarak bir WordPress kullanmak uzatır mısın?

Backbone.js bu ekran mükemmel peepcode demo kodu inceliyorum. Bu, omurga kodu jQuery nesne geçirilen tüm isimsiz bir fonksiyon içine alınır:

(function($) {
  // Backbone code in here
})(jQuery);

Kendi omurga kodum, kodum şal jQuery DOM sadece yaptım 'hazır' olay:

$(function(){
  // Backbone code in here
});

Asıl mesele yaklaşımın avantajı nedir? Bu şekilde yapmak o zaman hemen bir WordPress kullanmak nesne işlevi bağımsız değişken olarak geçirilen ile yürütülen bir anonim işlev, etkili bir jQuery nesnesi $ sağlanması oluşturur. Bu bir WordPress kullanmak için bağlı olduğunu güvence altına almak için tek nokta '$' veya bunu yapmak için başka sebepler de var mı?

CEVAP

29 NİSAN 2012, Pazar

Göstermiş olduğunuz iki kod blokları yaptıkları zaman içinde önemli ölçüde farklıdır. Birbirinden özel değildir. Aynı amaca hizmet etmiyorlar.

JavaScript Modülleri


(function($) {
  // Backbone code in here
})(jQuery);

Bu "" desen, hemen çağırma işlevi ile uygulanmaktadır. JavaScript bir Modül.

Bu kodu amacı sağlamak için "modüler", gizlilik ve saklama kodu için.

Bu uygulama hemen (jQuery) arama parantez tarafından çağrılan bir işlevdir. JQuery parantez geçerken amacı genel değişkeni için yerel kapsama sağlamaktır. Bu $ değişken ararken havai miktarını azaltmaya yardımcı olur, ve bazı durumlarda minifiers için optimizasyon / daha iyi sıkıştırma sağlar.

Hemen fonksiyonları yürütmesini, hemen yürütülür. Fonksiyon tanımı tam olarak işlevi yürütülür.

jQuery "" fonksiyonu . DOMReady

Bu "DOMReady" fonksiyon: 14**. bir WordPress kullanmak için bir takma ad


$(function(){
  // Backbone code in here
});

jQuery "" işlev DOM JavaScript kodu. tarafından manipüle edilmeye hazır olduğunda yürütür DOMReady.

Modülleri Omurga Kodu vs DOMReady

Omurga kodunuzu jQuery DOMReady fonksiyon içinde tanımlamak için kötü formu ve uygulama performansı için zararlı. Bu işlev, DOM yükledi ve manipüle edilmeye hazır olana kadar adlı değil. Tarayıcı DOM ayrıştırılmış kadar nesneleri tanımlamak daha önce en az bir kez bekliyor demektir.

DOMReady dışında bir işlev Omurga nesneleri tanımlamak için daha iyi bir fikirdir. Ben, diğerleri arasında, benim kod için saklama ve gizlilik sağlayabilir, böylece JavaScript Modül desen bu içinde yapmayı tercih ederim. "Açığa Modülü" desen (yukarıda ilk bağlantıya bakınız) modül benim. dışında ihtiyacım olan parçalara erişim sağlamak için kullanmaya eğilimlidir

DOMReady işlevi dışında nesneleri tanımlama ve referans için bir yol sağlayarak, tarayıcınızın JavaScript, kullanıcı deneyimi sonunda potansiyel hız işleme üzerinde bir başlangıç almak için izin vermiş olursunuz. Ayrıca kodu bir şeyler hareket yaptığında işler daha DOMREady fonksiyonları oluşturma hakkında endişe etmeden hareket ettirebilirsiniz olarak daha esnek hale getirir.

Muhtemel Omurga nesneleri başka bir yerde define olsa DOMReady bir işlevi, hala, kullanmak için gidiyoruz. Bu nedenle pek çok Omurga uygulamaları bir şekilde DOM işlemek için ihtiyaç vardır. Bunu yapmak için, DOM hazır olana kadar beklemeniz gerekir, bu nedenle DOMReady işlevi o tanımlandıktan sonra uygulama başlatmak için kullanmanız gerekir.

Web etrafında örnekler bol bulabilirsiniz, ama burada çok temel bir uygulama, Modül ve DOMReady işlevini kullanarak:



// Define "MyApp" as a revealing module

MyApp = (function(Backbone, $){

  var View = Backbone.View.extend({
    // do stuff here  
  });

  return {
    init: function(){
      var view = new View();
      $("#some-div").html(view.render().el);
    }
  };

})(Backbone, jQuery);



// Run "MyApp" in DOMReady

$(function(){
  MyApp.init();
});

Bunu Paylaş: