jQuery getScript() 与 document.createElement('script')
假设这两种方法都正确加载脚本，并且我在使用脚本（和/或使用回调）之前等待适当的时间，那么这些方法之间的主要区别是什么。
注意：我知道第一个使用 jQuery（这是一个较大的下载等）。我真正感兴趣的是这些方法的后续影响。一个脚本是否与另一个脚本处于不同的范围？等等。
jQuery：
function loadScript() {
$.getScript('http://www.mydomain/myscript.js');
}
附加到正文：
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);
}
附加到头部：
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);
}
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:
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);
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
jQuery 将
script元素附加到head（如果存在），否则附加到document元素。在底层代码是相似的。最终结果将是相同的：两种方法都在全局范围内执行新代码。jQuery appends the
scriptelement toheadif present, or todocumentelement 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 方法的文档说：
这意味着导入的 javascript 将在成功加载后直接调用。
追加到head：意味着浏览器将script标签添加为最后一个子标签并执行内容（如果您手动将标签添加到head标签的末尾，则效果相同）。
附加到正文：这意味着浏览器将脚本标记添加为正文标记的最后一个子级并执行该内容（如果您手动将标记添加到正文标记的末尾，则效果相同）。
the documentation to Jquery method says:
That means the imported javascript will be straigt invoked after successful loading.
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).
值得一提的是，jQuery 的 getScript 函数默认禁用缓存，这意味着浏览器每次请求页面时都会下载脚本（参见之前的答案 此处）。另一方面，您的
loadScript函数应该利用缓存。It is worth mentioning that jQuery's
getScriptfunction disables caching by default, meaning that browsers will download the script every time the page is requested (see previous answer here). YourloadScriptfunction, on the other hand, should take advantage of caching.