YUI3-如何同步加载模块

YUI3 - how to load modules synchronously?

本文关键字：加载 模块 同步 何同步 YUI3-      更新时间：2023-09-26

为了加载丢失的模块，YUI允许我们在use（…）方法中指定它们，传入回调，并在加载所有模块时执行我们的操作-异步。这给我的情况带来了许多问题。更具体地说，如果我在回调中创建了类，我发现不可能在当前文件之外实例化我的类（不能保证在"新"发生时它们已经准备好了）。我的工作是在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>

还包括您的类文件和一个init文件：

<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闭包编译器将所有内容压缩并打包到单个文件中。您可以将多个文件导入压缩器。

在高级压缩模式下，谷歌闭包编译器对任何库的压缩比YUI压缩器多20-25%。

相关文章：