YUI3 - 如何同步加载模块？

发布于 2024-11-16 15:52:15 字数 2935 浏览 2 评论 0原文

为了加载缺失的模块，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 文件才能实现。有没有办法确保所有依赖项都在我的代码执行之前动态加载？一定有吧？

原文

In order to load missing modules, YUI allows us to specify them in use(...) method, pass in a callback and perform our actions when all modules are loaded - asynchronously. This presents a number of problems in my case. More specifically, I find it impossible to instantiate my class outside of the current file if I have my classes created inside the callback (no guarantee that they will be ready by the time "new" happens). My work-around was to wrap only certain method calls in YUI.use(...) but this creates another problem with extending objects. Ideally, what I need to do is load all modules synchronously before any of my code executes. Below is my code that currently ~~fails~~ succeeds (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);
})();

This code now works but requires 10 (!!!) js files to make it happen. Is there a way to make sure all dependencies are loaded dynamically and before my code is executed? There must be, right?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只怪假的太真实 2024-11-23 15:52:15

您可以通过将每个类放入自己的 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();
})

现在应该解析并加载所有依赖项，在代码执行之前。它是异步的，但是您需要一个解决方案来确保在代码执行之前加载所有内容。

希望这有帮助。

You can solve this by putting each of your classes inside their own YUI module and use YUI to do the namespacing.

Create a new file my-classes.js, containing both your class definitions:

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']});

Include the YUI seed file in your page:

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

Also include your class file and an init file:

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

In your init file:

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

Now all the dependencies should be resolved and loaded up, before your code executes. It is asynchronous, however you asked for a solution that would ensure everything was loaded before your code executed.

Hope this helps.

回复收藏 0 原文