1

不足しているモジュールをロードするために、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 ファイルが必要です。コードが実行される前に、すべての依存関係が動的に読み込まれるようにする方法はありますか? あるはずですよね？

4

2 に答える 2

8

これを解決するには、各クラスを独自の 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();
})

コードを実行する前に、すべての依存関係を解決してロードする必要があります。非同期ですが、コードが実行される前にすべてがロードされるようにするソリューションを求めました。

お役に立てれば。

于 2011-06-24T11:14:44.303 に答える
2

Google Closure Compiler を使用して、すべてを 1 つのファイルに圧縮してパックします。複数のファイルをコンプレッサーにインポートできます。

圧縮の高度なモードを使用すると、Google Closure Compiler は一般に YUI コンプレッサーよりも 20 ～ 25% 圧縮率が高くなります。

于 2011-06-24T11:21:12.833 に答える