tembel yükleme javascript

Question

Tembel yükleme js veya ondemand yükleme için bu 3 yol arasındaki temel fark nedir ve neden?

komut 1:

$.getScript = function(url, callback, cache){ 
    $.ajax({ 
     type: "GET", 
     url: url, 
     success: callback, 
     dataType: "script", 
     cache: cache 
    }); 
}; 

script2:

function require(file, callback) { 
    var script = document.getElementsByTagName('script')[0], 
     newjs = document.createElement('script'); 

    // IE 
    newjs.onreadystatechange = function() { 
     if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') { 
      callback(); 
     } 
    }; 

    // others 
    newjs.onload = function() { 
     callback(); 
    }; 

    newjs.src = file; 
    script.parentNode.insertBefore(newjs, script); 
} 

document.getElementById('id').onclick = function() { 
    require('ondemand.js', function() { 
     extraFunction('loaded from the parent page'); 
     document.body.appendChild(document.createTextNode('done!')); 
    }); 
}; 

Script3:

$L = function (c, d) { 
    for (var b = c.length, e = b, f = function() { 
      if (!(this.readyState 
        && this.readyState !== "complete" 
        && this.readyState !== "loaded")) { 
       this.onload = this.onreadystatechange = null; 
       --e || d() 
      } 
     }, g = document.getElementsByTagName("head")[0], i = function (h) { 
      var a = document.createElement("script"); 
      a.async = true; 
      a.src = h; 
      a.onload = a.onreadystatechange = f; 
      g.appendChild(a) 
     }; b;) i(c[--b]) 
}; 

Answer 1

1. senaryoyu yüklemek için ajax kullanır. Daha spesifik olarak, bazı js'leri yüklemek ve tarayıcıya sunmak için XHR'yi kullanır. Engelleme yapılmadı. Aynı başlangıç ​​politikasını hala uyguluyor.
2. <script/> öğesini oluşturarak yeni bir .js dosyasını enjekte etmek için üstbilgiyi değiştirir. Bu ayrıca tarayıcıyı sayfa yükünü engellemez.
3. Aynı şey # 2 ile aynı, ancak bir dizi komut dosyasını destekliyor gibi görünüyor. Ayrıca, engellemeye neden olmayan, asenkron olarak doğru olarak ayarlanır. For döngüsü daha kafa karıştırıcı çünkü çok daha anonim yöntemler yaratıyor.

Answer 2

1. bir XMLHTTPRequest ve eval() onunla komut alır görünüyor. Komut dosyası aynı iletişim kuralı/etki alanı/bağlantı noktasında barındırılmamışsa, bu çalışmaz.

2. ve 3. ikisi de aynı şeyi yapar gibi görünür: <script src="the script url"></script> öğesi oluştururlar, onload olaylarını buna bağlar ve sayfaya eklerler. Komut, yüklendikten sonra tarayıcı tarafından yürütülür ve onload olayı tetiklenir.

Answer 3

Eğer adı verilen bu yeni kütüphane head.js

bazı ilginç fikirler ve apis var denemelisiniz .. o yardımcı olur.

veya yapabileceğiniz şey, betik dosya adlarınızı almak için normal xhr isteğini kullanmak ve dom'a eklemek için böyle bir yöntem kullanmaktır. Ayrıca, removeScript bölümünü de ekledim.

addScript = function(file) 
{ 
    var headID = document.getElementsByTagName("head")[0];   
    var newScript = document.createElement('script'); 
    newScript.type = 'text/javascript'; 
    newScript.src = file; 
    headID.appendChild(newScript); 
}; 
removeScript = function(file) 
{ 
    var headID = document.getElementsByTagName("head")[0].children; 
    for(var i in headID) 
     if(headID[i].tagName == "SCRIPT") 
      if(headID[i].getAttribute('src') == file) 
       headID[i].parentNode.removeChild(headID[i]); 
} 

Eğer yok jquery gibi bir kütüphane sunucudan html veya komut işaretlemeyi almak ve dom içine insert bunu 'de) (api .html kullanabilirsiniz şey hakkında endişelenmenize gerek kullanıyorsanız

Answer 4

1. ajax ile komut alır ve eval() 'ın içeriği
2. head elemanı içine script elemanını takın ve (2), ancak kabul etmek ve senaryo url'nin dizi olarak
3. aynı yüklendiğinde geri rapor ler ve
yolu daha karmaşık yazılır

(2) ve (3) hem bu özelliği desteklemiyorsa aşağıdaki 3.x, Firefox örneğin (eski tarayıcılarla uyumlu olmayabilir ve onreadystatechange kanca kullanmak). Sadece XHR'yi gerektirdiğinden, muhtemelen en sağlam, uyumluluk açısından en mantıklı olan (1).Ancak kodda hatalar alırsanız, bu şekilde yüklersiniz, hata sadece "eval'd kodunda" ortaya çıktığı ve belirli bir dosya/satırda bulunmadığı için çok yardımcı olmayabilir. Bu, tembel yükleme genellikle bir optimizasyon şey, dedi, bu yüzden sadece hata ayıklama sırasında komut dosyalarını normal olarak veya diğer 2 yöntemlerden herhangi biriyle ekleyebilirsiniz.