了解 YUI 模块加载和附加

Question

我使用的是最新版本的Yahoo User Interface。

我正在查看YUI global对象的文档，我有一些问题。

我想知道何时加载模块以及何时附加到特定实例？

YUI().use('calendar', function (Y) {
     // I assume that when we are here that the calendar module has been loaded?
     // But when is it attached to this instance of YUI?
});

如果第一个实例声明如下，如何创建多个 YUI 沙箱：

var Y = YUI();
Y.use('node', 'event', function (Y) {
});

你还会将 Y 传递到两个实例中吗？

Answer 1

先回答第二个问题：

YUI()函数创建沙盒。 所以

var Y1 = YUI();
var Y2 = YUI();

将是两个独立的沙盒，Y1和Y2对彼此一无所知。但是，您可以执行此类操作。

Y1 = YUI();
Y1.use('calendar', function (Y) {
    Y.myCalendar = new Y.Calendar().render(Y.one('body'));
});
setTimeout( function () {
    Y1.use(function (Y) {
        Y.myCalendar.on('dateClick', function (e) {
            alert('date clicked');
        });
    });
}, 100);

全局Y1成为每个use函数中的本地Y。这也说明了第一个问题的答案。 此示例中使用setTimeout是因为每个use函数都附加模块并异步运行其函数。 如果没有setTimeout，您很可能会从第二个use收到错误，因为它将在第一个use定义myCalendar之前运行。

每个use都将执行自己的模块延迟加载。 如果模块已经加载，则只需将它们附加到 YUI 实例。 实际上，大多数应用程序每个沙盒仅使用一个use。

当然，YUI文档中还有更多信息和细节。