Javascript通过代码添加js库_Javascript_Jquery

Javascript通过代码添加js库

javascript jquery

Javascript通过代码添加js库,javascript,jquery,Javascript,Jquery,我正在尝试将我的长JavaScript代码拆分为不同的库我正在尝试编写一个将加载我所有库的包装器脚本： //this file loads all the scripts to the page $(document).ready(function(){ var fileName = getCurrentFileName(); loadScript("scripts/pico/popups.js"); loadScript("scripts/pico/effec

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

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

//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的函数

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

您要查找的是“依赖关系管理”。对于这个问题有几种解决方案

一个大问题是RequireJS：

另见：

是否考虑使用Realjs

以下是示例版本：

你可以根据需要下载

此示例基于此文件夹结构：

公开的

index.html
剧本
- app.js
- 解放党
  **jquery-1.10.2.js
  **require.js

三,。从代码：

html

<!DOCTYPE html><html>
<head><title>Sample Test</title>
<script src="scripts/lib/require.js"></script>  <!-- downloaded from link provide above-->
<script src="scripts/app.js"></script></head>
<body><h1>My Sample Project</h1><div id="someDiv"></div></body></html>

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

//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已经包含在内，所以它更简单

//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");
});

您需要使用onreadystatechange处理程序来确保按照所需的顺序加载它们。根据需要组合、缩小和缓存JavaScript和CSS文件以加快页面加载

//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");
});