javascript jQuery getScript() 与 document.createElement('script')
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5791279/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery getScript() vs document.createElement('script')
提问by bebeastie
Assuming that both of these approaches load the script properly, and that I wait the appropriate amount of time before using the script (and/or use a callback), what are the major differences between these approaches.
假设这两种方法都正确加载了脚本,并且我在使用脚本(和/或使用回调)之前等待了适当的时间,那么这些方法之间的主要区别是什么。
Note: I understand the first uses jQuery (which is a larger download etc.). What I'm really interested in is the after affects of these approaches. Does one place the script in a different scope than the other? Etc.
注意:我知道第一个使用 jQuery(这是一个更大的下载等)。我真正感兴趣的是这些方法的后续影响。是否将脚本放在与另一个不同的范围内?等等。
jQuery:
jQuery:
function loadScript() {
$.getScript('http://www.mydomain/myscript.js');
}
Appending to body:
附加到正文:
function loadScript() {
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'http://www.mydomain/myscript.js';
script.async = true;
document.body.appendChild(script);
}
Appending to head:
附加到头部:
function loadScript() {
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'http://www.mydomain/myscript.js';
script.async = true;
head.appendChild(script);
}
采纳答案by pawel
jQuery appends the script
element to head
if present, or to document
element otherwise. Under the hood the code is similar. The final result will be the same: both approaches execute new code in the global scope.
jQuery 将script
元素附加到(head
如果存在),document
否则附加到元素。引擎盖下的代码是相似的。最终结果将是相同的:两种方法都在全局范围内执行新代码。
回答by Reporter
the documentation to Jquery method says:
Jquery 方法的文档说:
Load a JavaScript file from the server using a GET HTTP request, then execute it.
使用 GET HTTP 请求从服务器加载 JavaScript 文件,然后执行它。
That means the imported javascript will be straigt invoked after successful loading.
这意味着导入的 javascript 将在成功加载后被直接调用。
Appending to the head: It means the browser adds the script-tag as a last child and executes the content (it is the same if you add the tag manuelly at the end of the head tag). Appending to the body: It means the browser adds the script-tag as a last child of the body tag and executes that content (it is the same if you add the tag manuelly at the end of the body tag).
Appending to the head:表示浏览器将script-tag作为最后一个子元素添加并执行内容(手动添加在head标签末尾也一样)。附加到正文:这意味着浏览器将脚本标签添加为正文标签的最后一个子项并执行该内容(如果您在正文标签的末尾手动添加标签也是如此)。
回答by kronion
It is worth mentioning that jQuery's getScript
function disables caching by default, meaning that browsers will download the script every time the page is requested (see previous answer here). Your loadScript
function, on the other hand, should take advantage of caching.
值得一提的是,jQuery 的getScript
功能默认禁用缓存,这意味着浏览器将在每次请求页面时下载脚本(请参阅此处的先前答案)。loadScript
另一方面,您的函数应该利用缓存。