Javascript与依赖项异步加载

时间:2016-02-16 10:58:03

标签: javascript jquery asynchronous dependencies

我尝试仅在需要和异步时加载不同的.js和.html文件。但现在我遇到了问题,有些文件需要先加载其他文件。 我试图用dependencies变量解决这个问题。后来我检查每50ms是否加载了依赖项,如果不加载,则必须在每个其他所需文件之前加载它们。

这是我的代码。

var dependencies = {
    Module1: [],
    Module2: ["Module1"],
    loadStates: {
        Module1: false,
        Module2: false
    }
};
function initModule(id, moduleID, module) {
    var moduleInitialData = br6_config.moduleInitialData[id];
    if (moduleInitialData) {
        function loadModule(target, name) {
            var isLoaded = true;
            if (isLoaded === false) {
                console.log("file already loaded");
            }
            $(target).load("html/modules/" + name + ".html", function (response, status, xhr) {
                console.log(name + ".html" + " " + status);

                var modulesToLoad = dependencies[name];
                for (var i = 0; i < modulesToLoad.length; i++) {
                    var moduleToLoad = modulesToLoad[i];
                    var interval = setInterval(function () {
                        if (dependencies.loadStates[moduleToLoad] === false) {
                            loadJS(moduleToLoad);
                            clearInterval(interval);
                            if (dependencies.loadStates[name] === false) {
                                loadJS(name);
                            }
                        }
                    }, 50);
                }
                function loadJS(name) {
                    $.getScript("js/modules/" + name + ".js").done(function (textStatus) {
                        console.log(name + ".js geladen");
                        isLoaded = true;

                        if (name === Module1) {
                            module.instance = new Module1(id, moduleInitialData);
                            dependencies.loadStates[name] = true;
                        }
                        if (name === Module2) {
                            module.instance = new Module2(id, moduleInitialData);
                            dependencies.loadStates[name] = true;
                        }
                    }).fail(function (error, b, c) {
                        console.log(name + ".js nicht geladen");
                        console.log(error);
                        console.log(b);
                        console.log(c);
                    });
                }
            });
        }
        if (moduleID === "module1") {
            loadModule('#module1, Module1);
        }
        if (moduleID === "module2") {
            loadModule('#module2, Module2);
        }

有时一切正常,但有时我的代码想要在Module1之前加载Module2,因此我收到错误。因此检查依赖项存在一些问题。

任何人都可以帮我解决这个问题吗?我真的很感激一些帮助!

0 个答案:

没有答案