YUI3 - 如何同步加载模块？

Question

为了加载缺少的模块,YUI允许我们在use(...)方法中指定它们,传入回调并在所有模块加载时执行我们的操作 - 异步.这在我的案例中提出了许多问题.更具体地说,如果我在回调中创建了我的类,我发现不可能在当前文件之外实例化我的类(不能保证它们会在"new"发生时准备就绪).我的解决方法是在YUI.use(...)中仅包装某些方法调用,但这会产生扩展对象的另一个问题.理想情况下,我需要做的是在执行任何代码之前同步加载所有模块.下面是我目前失败的代码(EDIT:Allow Rollups).

HTML:

<html>
<head>
<!-- Built using YUI dep configurator -->
<!-- JS -->
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/oop/oop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/event-custom/event-custom-base-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/event/event-base-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/dom/dom-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/dom/dom-style-ie-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/pluginhost/pluginhost-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/node/node-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/event/event-base-ie-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/event/event-delegate-min.js"></script>


<!-- My JS -->
<script type="text/javascript" src="test.js"></script>

<script type="text/javascript">
    var test = new MyNS.ExtendingClass();
</script>

</head>

<body>
    <h1>Hello World!</h3>
</body>
</html>

test.js

//namespace
if (!MyNS) var MyNS = {};

(function(){
    var Y = YUI().use('node', 'io', 'autocomplete');

    MyNS.BaseClass = function() {
        console.log('Base class newed. Y: ' + Y);

        var self = this;

        self.init();
    };

    MyNS.BaseClass.prototype = {
        init: function() {
            console.log('Initting! Y: ' + Y);
        }
        , test: function() {
            console.log('test fired!');
        }
    };
})();

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

    MyNS.ExtendingClass = function() {
        console.log('Extended class newed. Y: ' + Y);

        var self = this;

        MyNS.ExtendingClass.superclass.constructor.call(self);
    };

    MyNS.ExtendingClass.prototype = {
        testExtended: function() {
            console.log('testExtended fired!');
        }
    };

    Y.extend(MyNS.ExtendingClass, MyNS.BaseClass);
})();

此代码现在可以使用,但需要10个(!!!)js文件才能实现.有没有一种方法,以确保所有的依赖加载动态和前执行我的代码？一定有,对吗？

Answer 1

您可以通过将每个类放在自己的YUI模块中并使用YUI来执行命名空间来解决此问题.

创建一个新文件my-classes.js,其中包含您的类定义:

YUI().add('baseClass', function(Y) {
    // constructor  
    Y.namespace('NS').BaseClass = function () {
        this.msg = 'hi!';
    }

}, '1', {requires: ['oop', 'node', 'event']}); // dependencies for your class

YUI().add('extendingClass', function(Y) {
    // constructor  
    Y.namespace('NS').ExtendingClass = function () {
        Y.NS.ExtendingClass.superclass.constructor.call(this);
        alert(this.msg);
    }      

    Y.extend(Y.NS.ExtendingClass, Y.NS.BaseClass);

}, '1', {requires: ['baseClass']});

在页面中包含YUI种子文件:

<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>

还包括您的类文件和init文件:

<script type="text/javascript" src="my-classes.js"></script>
<script type="text/javascript" src="my-init.js"></script>

在您的init文件中:

YUI().use('extendingClass', function(Y) {
    Y.test = new Y.NS.ExtendingClass();
})

现在,在代码执行之前,应该解析并加载所有依赖项.它是异步的,但是你要求的解决方案可以确保在代码执行之前加载所有内容.

希望这可以帮助.