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

没有简单的方法来获得JS fyle for function“on-fly”。另外，对于功能系统的加载文件需要一些时间。可能是使用缩小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);
});

但我认为加载所有缩小版和单个文件都更好。

仅在需要时加载外部JavaScript

3 个答案: