javascript - 仅在需要时加载外部 JavaScript

Question

我在我的页面上引用了一堆 javascript 文件，这些文件由不同的函数调用使用。

当我加载页面时，首先加载所有外部 JS 文件。

无论如何，只有在该 .js 文件发生函数调用时才调用它们？

Answer 1

您可以将您的条件添加到此方法中，它允许您动态添加外部 javascript 文件：

    function loadScript(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

通过使用 JQuery

$.getScript("//platform.twitter.com/widgets.js")

Answer 2

没有简单的方法来获取函数“on-fly”的 JS 文件。此外，功能系统的加载文件需要一些时间。对 JS 文件使用缩小可能是一个很好的解决方案？

Answer 3

你可以试试这样。

loadExternalScriptFile = function(filename, callback) {
    var fileref = document.createElement("script");
    if (fileref){
        fileref.setAttribute("type","text/javascript");
        fileref.setAttribute("src", filename);
        fileref.onload = callback;
        if (typeof fileref != "undefined")
            document.getElementsByTagName("head")[0].appendChild(fileref);
    }
}

var functionMap = {
    'function1': 'js/f1.js',
    'function2': 'js/f1.js',
    'function3': 'js/f3.js'
};


function checkFunction(functionName, callback) {
    if (typeof window[functionName] !== 'function') {
        loadExternalScriptFile(functionMap[functionName], callback);
        return;
    }
    callback();
    return;
}



//Using

checkFunction('function1', function(){
    function1(params);
});

但我认为在缩小版本和单个文件中加载所有内容会更好。