Dinamik yük bir JavaScript dosyası

SORU

21 AĞUSTOS 2008, PERŞEMBE

Dinamik yük bir JavaScript dosyası

Ne kadar güvenilir ve dinamik yük bir JavaScript dosyası olabilir mi? Bu ne zaman o modülü veya bileşeni uygulamak için 'bileşen dinamik olarak isteğe bağlı tüm gerekli JavaScript Kütüphanesi komut dosyaları yükleyecektir. başlatıldı kullanılabilir

İstemci bileşeni kullanan değil yük için gerekli tüm kütüphane komut dosyaları (ve el ile Ekle <script> etiketleri kendi web sayfası). bu bileşen sadece 'ana' bileşeni komut dosyası.

Nasıl ana akım JavaScript kütüphaneleri (Prototype, DV, vb) başarırız?Bu araçlar birden çok JavaScript dosyaları birleştirme bir 'inşa' komut dosyası sürümü? yeniden dağıtılabilir tek yapmak Yoksa yan herhangi bir dinamik yükleme yapıyorlar 'kütüphane' komut?

Bu soruya ek olarak:bir şekilde bir dinamik olarak eklenen JavaScript dosyası yüklendikten sonra olay işlemek için var mı?Prototip document.observe belge-geniş olaylar için vardır. Örnek:

document.observe("dom:loaded", function() {
  // initially hide all containers for tab content
  $$('div.tabcontent').invoke('hide');
});

Script bir öğe için kullanılabilir olaylar nelerdir?

CEVAP

28 EKİM 2008, Salı

Dinamik script etiketleri yazabilirsiniz (Prototype):

new Element("script", {src: "myBigCodeLibrary.js", type: "text/javascript"});

Buradaki sorun bune zamanharici bir komut dosyası tamamen dolu.

Biz genellikle çok bir sonraki satıra bağlı kodu gibi bir şey yazmak gibi

if (iNeedSomeMore){
  Script.load("myBigCodeLibrary.js");  // includes code for myFancyMethod();
  myFancyMethod();                     // cool, no need for callbacks!
}

Geri aramaları gerek kalmadan komut bağımlılıkları enjekte etmek için akıllı bir yol yoktur. Sadece senaryo üzerinden çekmek zorundasenkron AJAX isteğive küresel düzeyde script eval.

Eğer Prototip kullanırsanız Senaryo.yük yöntem bu gibi görünüyor:

var Script = {
  _loadedScripts: [],
  include: function(script){
    // include script only once
    if (this._loadedScripts.include(script)){
      return false;
    }
    // request file synchronous
    var code = new Ajax.Request(script, {
      asynchronous: false, method: "GET",
      evalJS: false, evalJSON: false
    }).transport.responseText;
    // eval code on global level
    if (Prototype.Browser.IE) {
      window.execScript(code);
    } else if (Prototype.Browser.WebKit){
      $$("head").first().insert(Object.extend(
        new Element("script", {type: "text/javascript"}), {text: code}
      ));
    } else {
      window.eval(code);
    }
    // remember included script
    this._loadedScripts.push(script);
  }
};

Bunu Paylaş: