发表新帖
发表新帖

Javascript add js libraries by code

后端 未结
关注
3 1332
暖寄归人
暖寄归人 2020-12-22 08:20

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
相关标签:
3条回答
  • 灰色年华
    2020-12-22 08:36

    Have you consider using requirejs

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

    Here is sample version:

    1. You can download Require here.

    2. The sample is based on this folder structure :

      public

      • index.html

      • scripts

        • app.js

        • lib

          ** jquery-1.10.2.js

          ** require.js

    3 . From Code:

    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>

    application configuration 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');
        });
 });
    0 讨论(0)
  • 囚心锁ツ
    2020-12-22 08:52

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

    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");
});
    0 讨论(0)
  • 清酒与你
    2020-12-22 08:52

    What you are looking for is called "Dependency Management". There are several solutions out there for this problem.

    One big one is RequireJS: http://requirejs.org/docs/start.html

    See also:

    • JavaScript dependency management
    • Autoloading Javascript
    0 讨论(0)
 看不清?
提交回复
热议问题