2010-05-05 14 views
15

Js dosyalarını eşzamansız olarak yüklemek için birkaç farklı sözdizimi göründüğünü fark ettim ve ikisi arasında herhangi bir fark olup olmadığını ya da ikisi de aynı şekilde çok işlevli olup olmadığını merak ediyordum. Sanırım aynı şekilde çalışıyorlar, ama sadece bir yöntemin bir sebepten ötürü diğerinden daha iyi olmadığından emin olmak istedim. :)asynchronous .js dosya yükleme sözdizimi

Yöntem Bir

Ben Facebook yönteminde s.async=true; olduğunu fark
(function() { 
    var d=document, 
    h=d.getElementsByTagName('head')[0], 
    s=d.createElement('script'); 
    s.type='text/javascript'; 
    s.src='/js/myfile.js'; 
    h.appendChild(s); 
})(); /* note ending parenthesis and curly brace */ 


Yöntem İki (Facebook'un kodunda Testere bu)

(function() { 
    var d=document, 
    h=d.getElementsByTagName('head')[0], 
    s=d.createElement('script'); 
    s.type='text/javascript'; 
    s.async=true; 
    s.src='/js/myfile.js'; 
    h.appendChild(s); 
}()); /* note ending parenthesis and curly brace */ 

cevap

15

tek fark .

async ve defer nitelikleri komut yürütülmesi gereken nasıl gösterir boolean özelliklerdir.

Bu öznitelikleri kullanarak seçilebilecek üç olası mod vardır. async özniteliği varsa, komut kullanılabilir olduğunda, eşzamansız olarak yürütülür.async özniteliği yoksa ancak erteleme özniteliği varsa, sayfa ayrıştırmayı tamamladığında komut dosyası yürütülür. Her iki özellik de yoksa, kullanıcı aracı sayfa ayrıştırmaya devam etmeden önce komut dosyası hemen getirilir ve çalıştırılır.

Kaynak ve fazla okuma:

+0

, teşekkürler. Bu durumda s.asynch = gerçek anlamsızdır, çünkü betik kafa etiketine enjekte edilmiş midir? Ve parantez üzerindeki sözdizimi kadar: (function() {...})(); vs: (işlev() {...}()); - hemen hemen aynı mı? – taber

+1

@taber: Evet, parantez sözdizimi aynı hedefe ulaşır. Yani: işlev, bir işlev ifadesi yerine bir işlev ifadesi olarak değerlendirilir. Bakınız: http://stackoverflow.com/questions/440739/what-do-parentheses-surrounding-a-javascript-objectfunctionclass-declaration/442408#442408 ve http://stackoverflow.com/questions/1634268/explain-javascripts- kapsüllenmiş-anonim-işlev-sözdizimi/1634321 # 1634321 (özellikle son yorum). –

+0

@taber: "" ifadesine eklenmiş olmasının herhangi bir fark yarattığını sanmıyorum. (Fakat bunu destekleyecek referanslarım veya testlerim yok). –

0

I: Whatwg.org HTML 5: The script element

avantajları gelince, Google'un bu son Aralık'ta söylediklerini kontrol etmek isteyebilirsiniz bununla oynandı ve bunun için komut dosyası sonunda yüklendiğinde geri arama başlatmayı destekleyen bir kitaplık oluşturuldu. Serin

Sigma.async_script_load('http://example.com/underscore-min.js', '_', function() { 
    _([1,2,3,2,3,1]).uniq(); 
}); 

https://github.com/ssoroka/sigma