引き続き、Ext.defineの話。そろそろ、Ext.defineも飽きてきました（笑）が、もうすぐ終わりなのでがんばります。
というか、この記事でExt.define関連は終わりです。やっと、他のところに次回いけそうですね。・・・ってか、見た目が気になってる人からすると、ここまでの話どーでもいいよね（笑）まぁ実際の開発の時死亡フラグたちますけどね。
さてさて、ではいきましょう。
そもそも多重継承ってなんだ？
多重継承とは、１つのクラスが複数のクラスを同時に継承する継承方法を指します。いままでExt.extendやExt.defineで行ってきた継承を多重継承と区別するために単一継承と呼びます。JavaやC#、PHPなど他の言語でも継承は存在しますが、この多重継承は、条件付きで可能、またはできないようになっています。それは、多重継承には、様々なリスクが伴うためです。多重継承については、Wikipediaなどで確認してください。
Mixinを利用するためのクラス準備
Mixinで多重継承できるらしいことは、わかりましたが、そのためには複数のクラスが必要になります。通常Ext JS 4でクラスを作成するときは、Mixinで既存のクラスを指定することがほとんどですが、ここでは自前で用意します。早速、多重継承のためのクラスを用意します。
BaseCls1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<span style="color:#990000;">// {{{ BaseCls1</span> Ext.define(<span style="color:#009900;">'BaseCls1'</span>, { <span style="color:#990000;">// {{{ basecls1method</span> basecls1method: <span style="color:#000099;">function</span>() { console.log(<span style="color:#009900;">"basecls1method"</span>); } <span style="color:#990000;">// }}}</span> }); <span style="color:#990000;">// }}}</span> |
BaseCls2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<span style="color:#990000;">// {{{ BaseCls2</span> Ext.define(<span style="color:#009900;">'BaseCls2'</span>, { <span style="color:#990000;">// {{{ basecls2method</span> basecls2method: <span style="color:#000099;">function</span>() { console.log(<span style="color:#009900;">"basecls2method"</span>); } <span style="color:#990000;">// }}}</span> }); <span style="color:#990000;">// }}}</span> |
SubCls
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<span style="color:#990000;">// {{{ SubCls</span> Ext.define(<span style="color:#009900;">'SubCls'</span>, { <span style="color:#990000;">// {{{ mixin</span> mixins : { base1 : <span style="color:#009900;">'BaseCls1'</span>, base2 : <span style="color:#009900;">'BaseCls2'</span> }, <span style="color:#990000;">// }}}</span> <span style="color:#990000;">// {{{ subclsmethod</span> subclsmethod: <span style="color:#000099;">function</span>() { console.log(<span style="color:#009900;">"subclsmethod"</span>); } <span style="color:#990000;">// }}}</span> }); <span style="color:#990000;">// }}}</span> |
Mixinを利用しているのは、SubClsです。Mixinの指定は、Ext.defineでmixinsキーにオブジェクトを指定します。多重継承したいクラスは文字列で指定します。オブジェクトのキーは、mixinクラスを管理するために利用されます。mixinsキーに対して配列でクラス名を文字列で指定した場合も、Mixinは正常に動作しますが、管理される名前が添え字の番号になってしまいます。そのため、Mixinを利用するときは、オブジェクトで指定するのがセオリーのようです。
さて、無事Mixinされたところで、多重継承したクラスメソッドを利用してみましょう。
SubClsのメソッドとして多重継承されたメソッドを利用
|
1 2 3 4 5 |
<span style="color:#000099;">var</span> sub = <span style="color:#000099;">new</span> SubCls(); sub.subclsmethod(); <span style="color:#990000;">// "subclsmethod"</span> sub.basecls1method(); <span style="color:#990000;">// "basecls1method"</span> sub.basecls2method(); <span style="color:#990000;">// "basecls2method"</span> |
3つのクラスでそれぞれ定義されたメソッドが、しっかりとSubClsに実装されていることが確認できますね。多重継承は、クラス設計をする上で万能薬にはなりませんし、設計文化によっては嫌われます。それは、いくつかの不具合や問題が生じやすいからです。多重継承のメリット・デメリットをしっかり理解して利用しましょう。
クラスエイリアス
Ext JS 4 から、クラスエイリアスというものが存在します。はい、「はじめまして！」の言葉なので、何が何だかわかりませんね。では、「コンポーネントがコンポーネントマネージャーで管理されていて、xtypeで結びついていたののクラス版だよ」といわれたピンと来る人もいるかも知れません。
まさに、そのままなのですが、今回から、クラスもクラスマネージャーによって管理されるようになりました。コレによりMixinやextendでクラス指定を行う際に、文字列で指定が行えるわけです。この、クラス管理を行っているのが、Ext.ClassManagerというクラスです。
まぁ位置づけ的にはコンポーネントマネージャーのようなものですが、ちょっと違います。
このクラスエイリアスについては、xtypeとの関係もあり長くなるので、別途記載します。
エイリアスの作成
さて、わざとクラスエイリアスについて触れました。それは、ここで紹介するエイリアスとは別物なので、誤解しないでね！っていう意味で触れただけです。Ext JS 4 のクラスシステムには、createAliasが存在しメンバのエイリアスを簡単に作成することができます。
早速、先ほどのSubClsにエイリアスを設定してみましょう。
|
1 2 3 4 5 |
<span style="color:#990000;">// {{{ createAlias</span> SubCls.createAlias(<span style="color:#009900;">'aliasmethod'</span>, <span style="color:#009900;">'subclsmethod'</span>); <span style="color:#990000;">// }}}</span> |
createAliasで存在しないaliasmethodという名前のメソッドが利用できるようになりました。
では、実際使ってみましょう。
|
1 2 3 4 5 6 7 |
<span style="color:#990000;">// {{{ use</span> <span style="color:#000099;">var</span> sub = <span style="color:#000099;">new</span> SubCls(); sub.aliasmethod(); <span style="color:#990000;">// "subclsmethod"</span> <span style="color:#990000;">// }}}</span> |
動きましたか？このようにcreateAliasで簡単にエイリアスが作成できます。
以上で、Ext.defineの解説は終了とします。実は、クラスエイリアスでちょっと触れましたが、Ext JS 4 は、Ext JS 3.xとは違いクラスの管理が行われ、より複雑な構成になっています。その分、便利な機能がたくさん実装されていますが、内部的な動作を解説しきるには時間が必要ですので、改めて枠がとれればとおもいます。内部的なクラスシステム・クラス管理がみえてくると、文字列指定のクラス利用や、mixin、extend、そしてコンポーネントアーキテクチャーのオーバーホールが見えてきます。
以上。
