连接是从另一个“导入”一个 JS 库的唯一方法吗？答案

【问题标题】：is concatenating the only way to 'import' one JS lib from another?连接是从另一个“导入”一个 JS 库的唯一方法吗？
【发布时间】：2011-02-10 10:43:16
【问题描述】：

免责声明：JS新手

我有一个依赖于 JQuery 的 JS 小部件。小部件将嵌入到第 3 方站点中，但我知道如何避免在小部件托管页面上声明对 jquery 的依赖：

第三方页面：

<head>

<script
  type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

<script
  type="text/javascript"
  src="http://mydomain/mywidget.js"></script>

</head>

mywidget.js

jQuery(document).ready(function() {
     //do stuff
});

我宁愿不在 3d 派对页面中包含 jquery.js，而是在 mywidget.js 中表达依赖项（这样我就可以更改此依赖项或添加/删除其他依赖项，而无需更新小部件托管页面）

我尝试添加：

var script = document.createElement('script');
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

到 mywidget.js 的顶部，但这不起作用 - jquery.js 确实在页面加载时加载，但“jQuery”未被识别。

起作用的是将 jquery.js 和 mywidget.js 连接到一个 .js 文件中。但这似乎有点蹩脚 - 有没有等同于？

import com.jquery.*;

谢谢！

【问题讨论】：

@Nikita 没有 import com.jquery.*; 的等价物，（Java 和 Javascript）| （汽车和地毯）我的朋友，两种不同的东西。

标签： javascript jquery dependencies

【解决方案1】：

似乎只是关于jQuery 变量的冲突。您是否在脚本中使用noConflict 模式？无论如何，您都应该这样做，因为您不知道第三方网站已经使用了哪些其他框架。

要使用 jQuery 无冲突模式（在 jQuery 加载后）：

$.noConflict();
     jQuery(document).ready(function($) {
     //your js widget here
});

我要实现的第二件事是检查 jQuery 是否已经加载。可能是第 3 方网站已经在使用它：

if (typeof jQuery == 'undefined') {
        //load jQuery here
}

【讨论】：

【解决方案2】：

在您的脚本中，您的小部件代码在添加脚本元素后立即执行，但需要等到脚本也下载并编译！为此，请使用以下代码：

script.onload = function(){

    // ------ Your widget code here ------

}

【讨论】：

谢谢，文森特 - 像宣传的那样工作。额外问题：如何扩展上述内容以等待多个 JS 文件加载？即我是否将上述内容扩展为：var script2; script.onload = function(){ //load 2nd library after 1st one is done loading script2 = document.createElement('script'); script2.src = 'http://3rdparty.com/anotherlib.js'; script2.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script2); } script2.onload = function() { //my widget code that depends on both 'script' and 'script2' }
是的，完全正确。但是大多数开发者说你不应该通过 js 加载一个以上的外部脚本，因为那样会花费很长时间直到最终的脚本被执行。