Javascript通过代码添加js库答案

【问题标题】：Javascript add js libraries by codeJavascript通过代码添加js库
【发布时间】：2014-02-13 03:37:20
【问题描述】：

我正在尝试将我的长 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 中的函数..

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

【问题讨论】：

您需要使用 onreadystatechange 处理程序来确保它们按要求的顺序加载。
stackoverflow.com/a/21246366/1959948
code.google.com/p/minify 按需组合、缩小和缓存 JavaScript 和 CSS 文件以加快页面加载速度。

标签： javascript jquery

【解决方案1】：

您正在寻找的内容称为“依赖管理”。对于这个问题有几种解决方案。

一个大的就是RequireJS：http://requirejs.org/docs/start.html

另见：

【讨论】：

【解决方案2】：

你有没有考虑使用 requirejs

http://www.joezimjs.com/javascript/lazy-loading-javascript-with-requirejs/

这里是示例版本：

您可以下载Require here。
示例基于此文件夹结构：

公开
- index.html
- 脚本
  - app.js
  - 库
    
    ** jquery-1.10.2.js
    
    ** 需要.js

3 .来自代码：

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>

应用配置 app.js

requirejs.config({
    baseUrl: 'scripts',

    paths: {
        app: 'app',
        jquery: 'lib/jquery-1.10.2' //your libraries/modules definitions
    }
});

// Start the main app logic. loading jquery module
require(['jquery'], function ($) {
        $(document).on('ready',function(){
            $('#someDiv').html('Hello World');
        });
 });

【讨论】：

当然有一些使用JQUERY的选项api.jquery.com/jQuery.getScript

【解决方案3】：

您需要使用 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");
});

【讨论】：