順序加載腳本

Question

我有一個網頁，可以按順序加載腳本，因為每個加載的腳本都需要先加載腳本。 例如js/global.js ， js/menu.js ， js/loan.js和js/contribution.js的順序互相需要， contributions.js需要loan.js ， loan,js需要menu.js ，等等上。 我設法通過下面的代碼實現了這一點。

$(document).ready(function () {

LoadScriptscontri();
});

function LoadScriptscontri(async) {
    if (async === undefined) {
        async = false;
    }
    var scripts = [];
    var _scripts = [  'js/global.js', 'js/menu.js', 'js/loan.js', 'js/contributions.js'];

    if (async) {
        LoadScriptsAsync(_scripts, scripts)
    } else {
        LoadScriptsSync(_scripts, scripts)
    }
}

    // what you are looking for :
   function LoadScriptsSync(_scripts, scripts) {

    var x = 0;
    var loopArray = function (_scripts, scripts) {
        // call itself
        loadScript(_scripts[x], scripts[x], function () {
            // set x to next item
            x++;
            // any more items in array?
            if (x < _scripts.length) {
                loopArray(_scripts, scripts);
            }
        });
    }
    loopArray(_scripts, scripts);
}

// async load as in your code
function LoadScriptsAsync(_scripts, scripts) {
    for (var i = 0; i < _scripts.length; i++) {
        loadScript(_scripts[i], scripts[i], function () { });
    }
}

// load script function with callback to handle synchronicity 
function loadScript(src, script, callback) {

    script = document.createElement('script');
    script.onerror = function () {
        // handling error when loading script
        alert('Error to handle')
    }
    script.onload = function () {
        console.log(src + ' loaded ')
        callback();
    }
    script.src = src;
    document.getElementsByTagName('head')[0].appendChild(script);
}

但他的問題是，何時我使用window.location = "http://cooperative-izumedia.rhcloud.com/contributions.html";更改頁面window.location = "http://cooperative-izumedia.rhcloud.com/contributions.html"; 也許從這里到window.location = "http://cooperative-izumedia.rhcloud.com/dashboard.html"; 並支持它不再載荷所需的順序，而不是contributions.js首次加載。 到底發生了什么，我該如何擺脫它。 我在Firefox和chrome中都對其進行了測試，但結果仍然相同。

我的調試信息

dashboardjsloader.js：已加載54 js / global.js

dashboardjsloader.js：已加載54 js / menu.js

dashboardjsloader.js：已加載54 js / loan.js

dashboardjsloader.js：已加載54 js / dashboard.js

menu.js：menu.js = 113 d2b2aecb0197b6f439056中的ID /*here am spitting out the id got from menu.js*/

dashboard.js：119 0 /*here dashboard.js is able to determine that the section it will work on is of index 0 thanks to menu.js*/

導航到http://cooperative-izumedia.rhcloud.com/contributions.html /*here I change page*/

投稿jsloader.js：已加載54 js / global.js

貢獻jsloader.js：加載了54個js / menu.js

貢獻jsloader.js：54個js / loan.js已加載

tribution.js：71有貢獻/*For some reason menu.js isnt't called to spit out its value before contribution.js tell us something even before contibution.js is loaded which loaded below*/

貢獻jsloader.js：54個js / contributions.js已加載

menu.js：183無法創建索引TypeError：無法讀取未定義的屬性'removeAttribute' /*Now menu.js decides to show its face and this exception is allowed, its expected.*/

menu.js：menu.js中的113 id = d2b2aecb0197b6f439056 /* and then it finally spits out its value*/

導航到http://cooperative-izumedia.rhcloud.com/dashboard.html

dashboardjsloader.js：已加載54 js / global.js

dashboardjsloader.js：已加載54 js / menu.js

dashboardjsloader.js：已加載54 js / loan.js

dashboardjsloader.js：已加載54 js / dashboard.js

/* I go back to dashboard and because menu is not called first my dashboard.js goes to complete shits */

dashboard.js：119 NaN

dashboard.js：132 TypeError：無法設置未定義的屬性“ innerHTML”

儀表板TypeError中的dashboard.js：75：無法設置未定義的屬性“ innerHTML”

/*Now menu.js rears its ugly head*/

menu.js：menu.js = 113 d2b2aecb0197b6f439056

Answer 1

您應該考慮使用RequireJS之類的東西-它將允許您確實定義依賴於其他模塊的模塊，因此您始終可以確定性地以正確的順序要求所有代碼。