前端 - 如何实现Javascript的include功能？

Question

需求场景：
页面上已经包含进来一个Javascript文件：

<script src="1.js"></script>
现在希望页面加载1.js之后，XXX.com/2.js的内容被引用到页面上，如何来写1.js的内容？

Answer 1

如果依赖关系复杂点的话，简单的加载方式可能会导致重复加载。长久之计是使用模块化js库，比如require.js

Answer 2

希望简单的话，直接在 1.js 文件内引用另外一个 js 文件即可。

document.write("<script language = \"javascript\" src = \" 2.js \"> <\/script>"); 

此外，你还可以参考下这个：
How to include a JavaScript file in another JavaScript file?

简单测试：

index.html

<script src="1.js"></script>

1.js

document.write(" <script language = \"javascript\" src = \" 2.js \" > <\/script>"); 

2.js

alert('I will show absolutely!');

Answer 3

function include(src,src2){
    var script = document.createElement("script");
    script.setAttribute("src",src);
    document.head.appendChild(script);
    script.onload = function(){
        alert("test_loaed");
        var script2 = document.createElement("script");
        script2.setAttribute("src",src2);
        document.head.appendChild(script2);
        script2.onload = function(){
            alert("test2_loaded");
        }
    }
}
include("test.js","test2.js");

这是思路，楼主自己解决兼容性的问题。用递归的话可以实现不限文件数量的动态加载，但是会有严重性能问题。

Answer 4

// 1 加载jQuery

function include(jsurl) {
    if (jsurl == null || typeof(jsurl) != 'string') return;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.charset = 'utf-8';
    script.src = jsurl;
    /*script.setAttribute("src",jsurl);*/
    document.head.appendChild(script);
}
include("http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js");