javascript - Require.js 模块加载顺序

Question

我有 3 个模块:模块 A、模块 B 和模块 C。

模块 A 在我的 html 页面中写入链接(链接来自 ajax 异步调用) 模块B也写了一些链接。 在我的模块 C 中，我想在模块 A 和 B 的链接上添加一个事件。

问题是模块加载顺序是随机的。 所以，当模块C第一次加载时，没有链接，因为模块A和B还没有写入。

有没有办法在最后加载模块C？

谢谢

Answer 1

模块加载顺序应该无关紧要。例如

links1.js

define(function() {
    return { addLinks: function() { ... } };
})

links2.js

define(function() {
    return { addLinks: function() { ... } };
})

事件.js

define(function() {
    return { addEvents: function() { ... } };
})

app.js

require(["links1", "links2", "events"], function(links1, links2, events) {
    links1.addLinks(...);
    links2.addLinks(...);
    events.addEvents(...);
});

换句话说，不要让您的模块在加载时执行某些操作，而是让它们返回可以在您准备好时执行的方法。

上面的模块可以按任何顺序加载...

• 链接1、链接2、事件
• 链接1、事件、链接2
• 链接2、链接1、事件
• 链接2、事件、链接1
• 事件、链接1、链接2
• 事件、链接2、链接1

这并不重要。

<小时/>

编辑 - 如果 links1 使用 XHR，则 app 需要等待这些链接，然后再添加它们。

links1.js

define(function() {
    var promise = null;
    function loadLinks() {
        if (promise) {
            return promise;
        }
        return promise = $.ajax(...).then(function(data) {
            return convertDataToLinks(data);
        });
    }
    return {
        loadLinks: loadLinks,
        addLinks: function() { ... }
    };
})

app.js

require(["links1", "links2", "events"], function(links1, links2, events) {
    links1.loadLinks().then(function(links) {
        links1.addLinks(links);
        links2.addLinks(links);
        events.addEvents(...);
    });
});