Ext.defineを利用したクラス生成：静的メンバの作成 – Ext JS 4

今回は、引き続きExt.defineでのクラス作成を行う際のお話です。

Ext.extendを利用してクラスを作成した場合でも、静的メンバを作成するときは、クラス定義後にキー（メンバ名）を指定して作成していました。

以下のコードの用に作成していましたね。

<span style="color:#990000;">// {{{ OldCls</span>

OldCls = Ext.extend(Object, {

    <span style="color:#990000;">// {{{ dynamicMethod</span>

    dynamicMethod : <span style="color:#000099;">function</span>() {
        console.log(<span style="color:#009900;">'dynamicMethod called.'</span>);
    }

    <span style="color:#990000;">// }}}</span>

});

<span style="color:#990000;">// set static member</span>
OldCls.staticMethod = <span style="color:#000099;">function</span>() {
    console.log(<span style="color:#009900;">'staticMethod called.'</span>);
};

OldCls.staticMethod(); <span style="color:#990000;">// &quot;staticMethod called.&quot;</span>

<span style="color:#990000;">// OldCls.dynamicMethod(); // no create method.</span>

<span style="color:#000099;">var</span> old = <span style="color:#000099;">new</span> OldCls();
old.dynamicMethod(); <span style="color:#990000;">// &quot;dynamicMethod called.&quot;</span>

<span style="color:#990000;">// }}}</span>

// {{{ OldCls

OldCls = Ext.extend(Object, {

// {{{ dynamicMethod

dynamicMethod : function() {

console.log('dynamicMethod called.');

}

// }}}

});

// set static member

OldCls.staticMethod = function() {

console.log('staticMethod called.');

};

OldCls.staticMethod(); // "staticMethod called."

// OldCls.dynamicMethod(); // no create method.

var old = new OldCls();

old.dynamicMethod(); // "dynamicMethod called."

// }}}

Ext JS 4 からは、Ext.defineで同時に静的メンバを定義することが可能になりました。

上記と同様のクラスを作成するコードは次の通りです。

<span style="color:#990000;">// {{{ NewCls</span>

Ext.define(<span style="color:#009900;">'NewCls'</span>, {

    <span style="color:#990000;">// {{{ statics</span>

    statics: {

        <span style="color:#990000;">// {{{ staticMethod</span>

        staticMethod : <span style="color:#000099;">function</span>() {
            console.log(<span style="color:#009900;">'staticMethod called.'</span>);
        }

        <span style="color:#990000;">// }}}</span>

    },

    <span style="color:#990000;">// }}}</span>
    <span style="color:#990000;">// {{{ dynamicMethod</span>

    dynamicMethod : <span style="color:#000099;">function</span>() {
        console.log(<span style="color:#009900;">'dynamicMethod called.'</span>);
    }

    <span style="color:#990000;">// }}}</span>

});

NewCls.staticMethod(); <span style="color:#990000;">// &quot;staticMethod called.&quot;</span>

<span style="color:#000099;">var</span> NC = <span style="color:#000099;">new</span> NewCls();
NC.dynamicMethod(); <span style="color:#990000;">// &quot;dynamicMethod called.&quot;</span>

<span style="color:#990000;">// }}}</span>

// {{{ NewCls

Ext.define('NewCls', {

// {{{ statics

statics: {

// {{{ staticMethod

staticMethod : function() {

console.log('staticMethod called.');

}

// }}}

// {{{ dynamicMethod

dynamicMethod : function() {

console.log('dynamicMethod called.');

}

// }}}

});

NewCls.staticMethod(); // "staticMethod called."

var NC = new NewCls();

NC.dynamicMethod(); // "dynamicMethod called."

// }}}

Ext.defineのstaticsキーで静的メンバのオブジェクトを指定します。
これだけです、簡単ですね。

静的メンバを利用する局面は、初心者にはないかもしれませんが、大規模なアプリケーション開発を行う上で、多数のクラスを設計する中では結構出くわす場面です。
記述が簡単になった、そして、「そうだよね。」っていう書き方になったのではないでしょうか。
言語が変わったかのように進化していますね、Ext JS 4は。

しばらくExt.defineの機能が続きます。
それだけパワフルということです。

Ext.defineを利用したクラス生成：静的メンバの作成 – Ext JS 4

Ext.defineを利用したクラス生成：静的メンバの作成 – Ext JS 4

カテゴリー