问题

JavaScript中有与CSS中的 @import 类似的东西,允许您在另一个JavaScript文件中包含JavaScript文件吗?



解决方法

JavaScript没有import,include或require. (更新2015:现在已使用 ES6模块)还有其他JavaScript的方式包括外部JavaScript内容.

Ajax Loading

使用Ajax调用加载其他脚本,然后使用 eval .这是最直接的方式,但它限于您的域,因为JavaScript沙盒安全模型.使用 eval 也打开了bug和hacks的门.

jQuery Loading

jQuery 库提供载入功能在一行:

$.getScript("my_lovely_script.js", function(){

   alert("Script loaded but not necessarily executed.");

});

Dynamic Script Loading

使用HTML中的脚本网址添加脚本代码.为了避免jQuery的开销,这是一个理想的解决方案.

脚本甚至可以驻留在不同的服务器上.此外,浏览器评估代码. < script> 标记可以注入网页< head> ,或插入到结束< / body> 标签.

这两种解决方案都在 JavaScript疯狂:动态脚本加载中讨论和说明.

Detecting when the script has been executed

现在,有一个大问题你必须知道.这样做意味着您远程加载代码.现代Web浏览器将加载文件并继续执行当前脚本,因为它们以异步方式加载所有内容以提高性能. (这适用于jQuery方法和手动动态脚本加载方法.)

这意味着,如果您直接使用这些诀窍,在您要求加载后,您将无法在下一行使用您新加载的代码,因为它仍将加载.

例如: my_lovely_script.js 包含 MySuperObject :

var js = document.createElement("script");

js.type = "text/javascript";
js.src = jsFilePath;

document.body.appendChild(js);

var s = new MySuperObject();

Error : MySuperObject is undefined

然后您重新载入页面 F5 .它的工作原理!混乱...

那么该怎么办呢?

好吧,你可以使用作者在我给你的链接中建议的黑客.总之,对于匆忙的人,他在加载脚本时使用事件运行回调函数.所以你可以把所有的代码使用远程库在回调函数中.例如:

function loadScript(url, callback)
{
    // Adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}

然后,在脚本加载到 lambda函数后,您就可以编写要使用的代码:

var myPrettyCode = function() {

   // Here, do what ever you want
};

然后你运行所有:

loadScript("my_lovely_script.js", myPrettyCode);

请注意,根据浏览器以及是否包含 script.async = false; 行,脚本可能会在DOM加载之后或之前执行.有一个关于JavaScript加载的一般性文章,其中讨论了这一点. / p>

Source Code Merge

另一个解决方案是将两个文件合并为一个文件.这可以与缩小使用,产生一个单一的,最小尺寸的JavaScript文件,正常包括.




相关问题推荐