javascript - Require.js 模块加载顺序

Question

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

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

问题是模块加载顺序是随机的。因此，首先加载模块 C 时，没有链接，因为模块 A 和 B 还没有写入。

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

谢谢

Answer 1

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

链接1.js

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

链接2.js

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

事件.js

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

应用程序.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需要在添加它们之前等待这些链接。

链接1.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() { ... }
    };
})

应用程序.js

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