YUI3-如何同步加载模块?

| 为了加载缺少的模块,YUI允许我们在use(...)方法中指定它们,传递回调并在所有模块加载时执行我们的操作-异步执行。就我而言,这带来了许多问题。更具体地说,如果我在回调中创建了我的类,我发现无法在当前文件之外实例化我的类(不保证在“ new”发生时它们将准备就绪)。我的解决方法是仅将某些方法调用包装在YUI.use(...)中,但这会导致扩展对象的另一个问题。理想情况下,我需要做的是在执行任何代码之前同步加载所有模块。以下是我当前无法成功执行的代码(编辑:允许汇总)。 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文件才能实现。有没有一种方法可以确保在我的代码执行之前动态加载所有依赖项?一定有吧?     
已邀请:
        您可以通过将每个类放在各自的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>
还包括您的类文件和一个初始化文件:
<script type=\"text/javascript\" src=\"my-classes.js\"></script>
<script type=\"text/javascript\" src=\"my-init.js\"></script>
在您的初始化文件中:
YUI().use(\'extendingClass\', function(Y) {
    Y.test = new Y.NS.ExtendingClass();
})
现在,在执行代码之前,应该解决所有依赖关系并加载它们。它是异步的,但是您要求一种解决方案,以确保在执行代码之前已加载所有内容。 希望这可以帮助。     
        使用Google Closure编译器将所有内容压缩并打包到单个文件中。您可以将多个文件导入压缩器。 使用高级压缩模式,对于任何库,Google Closure编译器的压缩比YUI压缩器的压缩率通常高20-25%。     

要回复问题请先登录注册