了解 YUI 模块加载和附加答案

【问题标题】：Understanding YUI module loading and attaching了解 YUI 模块加载和附加
【发布时间】：2012-03-05 07:43:01
【问题描述】：

我正在使用最新版本的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 传递给两个实例吗？

【问题讨论】：

标签： javascript yui yahoo yahoo-api

【解决方案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 得到错误，因为它会在myCalendar 由第一个use 定义之前运行。

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

当然，YUI docs 中还有更多信息和详细信息。

【讨论】：