如何在一个JavaScript文件中包含另一个JavaScript文件

0 投票
最新提问 2月 14 用户: ONLY (120 分)

在JavaScript中有类似于CSS @import的写法吗,允许你在一个JavaScript文件中包含另一个JavaScript文件?

    1个回答

    0 投票
    最新回答 2月 15 用户: 花花 (390 分)

    JavaScript没有import、include或require之类的写法(ES6支持),但是有其他方法能实现在JavaScript中包含外部JavaScript:

    Ajax加载

    使用Ajax调用加载其他脚本,然后使用eval。这是最直接的方式,由于JavaScript的沙盒安全模型,所以它只限于您所在的域,使用eval也打开了不安全的后门,容易被黑客利用。

    jQuery加载

    jQuery库提供了一行代码加载的功能:

    $.getScript("my_lovely_script.js", function(){
       alert("Script loaded but not necessarily executed.");
    });
    

    动态脚本加载

    在HTML中添加带有脚本URL的脚本标记。为了避免jQuery的巨大开销,这是一个理想的解决方案。

    该脚本甚至可以驻留在不同的服务器上。该<script>标签可在<head>或者</body>标记前插入。

    function includeJs(jsFilePath) {
        var js = document.createElement("script");
    
        js.type = "text/javascript";
        js.src = jsFilePath;
    
        document.body.appendChild(js);
    }
    
    includeJs("/path/to/some/file.js");

    function include(filename)
    {
        var head = document.getElementsByTagName('head')[0];
    
        var script = document.createElement('script');
        script.src = filename;
        script.type = 'text/javascript';
        head.appendChild(script)
    }

    检测脚本何时执行

    现在,有一个重要问题必须了解:远程加载代码。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);
    

    请注意,脚本可以在加载DOM之后或之前执行,具体取决于浏览器以及是否包括该行script.async = false;。有一个关于Javascript加载的文章详细说明了这个问题。

    源代码合并

    另一个解决方案是将两个文件合并成一个文件,能够减小文件大小,优化传输。

    欢迎来到编程助手,编程方面有什么不懂的问题可以尽管在这里提问,你将会收到热心爱好者的回答。
    ...