Sencha ExtJSのrequiresとuses

皆さんrequiresとusesってどう使い分けてるの？

Sencha ExtJSでファイルをロードさせるためには、requiresかusesを使います。どちらもファイルをロードすることが出来るのですが、使い分けはどうするのでしょう。
僕はrequiresだけしか使ってませんでした。

APIリファレンスを読んでみる

• requires：クラスがインスタンス化される前にロードされる
• uses：クラスがインスタンス化される前に確実にロードされているわけではない

requiresは、意味も分かりやすいし使い道のイメージしやすいですね。実際にこれまでもrequiresの方ばかり使ってたし。。usesってじゃあいつ使うんだよってところが悩ましい。確実にロードされているわけではないって言い回しがもどかしい。

blogの発見1

調べてると下記のblogを見つけました。

読書メモ: Ext JS 4 First Look / Capter 1 | Sunvisor Lab. Ext JS 別館

このblogのDynaic class loadingというところの記述です。

RequiresとUsesのそれぞれの説明はリファレンスと同じ感じですね。デッドロックの話で、usesだと大丈夫ということで、少し理解が深まります。 ただ、そもそもこのデッドロックするクラス設計自体おかしいなということで、usesを使う理由にはならないのかなと。

blog2の発見2

もう少し調べてみると、下記のblogを発見。

ExtJS PerfectDay #006 講義メモ | Sunvisor Lab. Ext JS 別館

このblogのクラスシステム - uses・requiresというところです。

絶対使う場合はrequiresで、configなどで使い分ける場合はuses。これはとてもしっくりきました。 configなんかで、複数クラスを使い分けるような場合には、無駄なロードを減らすためにusesを使いましょうということかなと。

実際に試してみた

ローカル環境、下記のようなSenchaコマンドを叩いてもらうとプロジェクトが自動生成され、Webサーバ上に配置すると画面表示までいけます。

 sencha -s ~/Library/Sencha/ext-4.2.1.883 generate app AdventCalenderSample ./adventCalender/public_html

新たに簡単なフォームパネル（AdventCalenderSample.view.Form）を作って、自動生成されたタブパネルの中に埋め込むように改修してみます。ソースのイメージとしては下記のような感じです。

Ext.define('AdventCalenderSample.view.Main', {
    extend: 'Ext.container.Container',

//    uses: ['AdventCalenderSample.view.Form'],

    requires:[
        'Ext.tab.Panel',
        'AdventCalenderSample.view.Form',
        'Ext.layout.container.Border'

    ],

    
    xtype: 'app-main',

    layout: {
        type: 'border'
    },

    items: [{
        region: 'west',
        xtype: 'panel',
        title: 'west',
        width: 150
    },{
        region: 'center',
        xtype: 'tabpanel',
        items:[{
            title: 'Center Tab 1',
            xtype: 'sample-form'
        }]
    }]
});

画面表示して下記のように開発者ツールなどで、ファイルの読み込みを確認してみて下さい。

次に、ソースのusesのコメントアウトを外して、requiresの「'AdventCalenderSample.view.Form',」をコメントアウトして下さい。再度、画面表示してみてファイルの読込を確認してみてください。 requiresで定義しているとMainのViewが読み込まれたタイミングで一緒にロードが走っているのが分かります。usesで定義しているとrequiresと比べて後の方に読み込まれるのが分かると思います。

まだファイル読み込みされていない時にExt.createなどでインスタンスを作ろうとすると、そのタイミングでロードが走るということですね。
インスタンスを作成する時に、newを使っているとファイルロードされないので、Ext.createを使った書き方で統一しましょう。

おまけとお礼

今回の調査で見つけたblogはどちらも中村さんが書かれたものでした。
ありがとうございました！