asynchronous - 让用户在加载后使用已编译的 RequireJS Widget

Question

我正在使用 RequireJS 编写一个 JS Widget。完成小部件后，我使用 r.js 和 Almond 对其进行编译。一切都很顺利 - 但我找不到一种简单的方法来让用户在不使用 RequireJS 的情况下使用该小部件 - 因为小部件代码异步加载(RequireJS 使用 AMD)。

我现在正在做的是忙于等待小部件代码加载并仅在检测到它已加载后才使用它。这对用户来说不太友好。

有没有办法让我们做这样的事情？

var widget = new Widget();

而不是像这样忙等待:

count = 0;

function loadWidget() {
    if (typeof Widget != 'undefined') {
        var p1 = new Widget();
        p1.render();
    } else {
        if (count > 10) {
            console.log('Failed to load the Widget');
            return false;
        }
        setTimeout(loadWidget, 50);
        count++;
    }
}

$(document).ready(function() {
    loadWidget();
});

谢谢!

编辑:

我的build.js

({
    name: './lib/almond.js',
    out: './deploy/sdk.min.js',
    baseUrl: '.',
    optimize: 'uglify2',
    mainConfigFile: 'sdk.js',
    include: ['sdk'],
    wrap: true
})

网页上的代码(假设页面上没有其他脚本标签):

<script src="mywidget.js" data-main="scripts/sdk" id="mywidget"></script>

不确定在编译 js 时是否真的需要“data-main”。

Answer 1

您需要按照 Almond 提供的说明进行操作。总结一下文档中的要点，您在构建配置中需要以下配置:

wrap: {
    startFile: 'path/to/start.frag',
    endFile: 'path/to/end.frag'
}

start.frag 应该是:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define([], factory);
    } else {
        root.Widget = factory();
    }
}(this, function () {

和end.frag:

    return require('main');
}));

结束片段以同步形式调用require，在这种情况下是真正同步(而不是RequrieJS本身可以使用的伪同步糖) .

我以前尝试过这个。它有效。