Javascript按代码添加js库 [英] Javascript add js libraries by code

问题描述

我正在尝试将我的长JavaScript代码拆分到不同的库中。

I'm trying to split my long JavaScript code into different libraries.

我正在尝试编写一个将加载我所有库的包装脚本：

I'm trying to write a wrapper script that will load all my libraries:

//this file loads all the scripts to the page    
$(document).ready(function(){
    var fileName = getCurrentFileName();
    loadScript("scripts/pico/popups.js");
    loadScript("scripts/pico/effects.js");
    loadScript("scripts/pico/pico.js");
    loadScript("scripts/pico/facebook.js");
    if (fileName != null)
        loadScript("script/pico/" + fileName + ".js");
});    
/**
     * Load a script to the body element
     * @param name the name of script file.js
     */
function loadScript(name){
    // Adding the script tag to the body
    var body = document.getElementsByTagName('body')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = name;
    // Fire the loading
    body.appendChild(script);
}    
/**
     * Get the current HTML file name
     * @returns {*} the name of the file or null
     */
function getCurrentFileName(){
    try {
        var fileName;
        fileName = document.location.pathname.match(/[^\/]+$/)[0];
        return fileName.split('.')[0];
    }
    catch (e){
        return null;
    }
}

但我认为facebook.js在pico之前加载。 js已经完成加载 - 这些是来自facebook.js内的pico.js的函数..

but i think facebook.js is loaded before pico.js has finished loading - and these are functions from pico.js inside facebook.js..

如何确保库按照我输入的顺序加载？

how can i make sure the libraries will be loaded in the order i enter it ?

推荐答案

您需要使用onreadystatechange处理程序来确保它们按所需顺序加载。

You would need to use the onreadystatechange handler to ensure that they are loaded in the order required.

//this file loads all the scripts to the page

$(document).ready(function () {
    var fileName = getCurrentFileName();
    loadScript("scripts/pico/popups.js");
    loadScript("scripts/pico/effects.js");
    loadScript("scripts/pico/pico.js",function(){
        loadScript("scripts/pico/facebook.js");
        if (fileName != null) loadScript("script/pico/" + fileName + ".js");
    });
});

/**
 * Load a script to the body element
 * @param name the name of script file.js
 */
function loadScript(name,callback) {
    // Adding the script tag to the body
    var body = document.getElementsByTagName('body')[0];
    var script = document.createElement('script');
    script.onreadystatechange = function(){
        if (script.readyState === "complete" && $.isFunction(callback)) {
            callback();
        }
    }
    script.type = 'text/javascript';
    script.src = name;
    // Fire the loading
    body.appendChild(script);
}

由于已经包含了jQuery，因此更容易。

Since jQuery is already included, it's even easier.

//this file loads all the scripts to the page

var fileName = getCurrentFileName();
$.getScript("scripts/pico/popups.js");
$.getScript("scripts/pico/effects.js");
$.getScript("scripts/pico/pico.js",function(){
    $.getScript("scripts/pico/facebook.js");
    if (fileName != null) $.getScript("script/pico/" + fileName + ".js");
});

这篇关于Javascript按代码添加js库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！