読書メモ: Ext JS 4 First Look / Capter 1

Ext Js 4 First Look という本がやっと出たので買いました。

fig

英語の本なんざ、しっかり読んだことないんで不安だったんですが、 なんとか読めてます。 英語の本で勉強したと言えば、 Visual BasicのVersion 1.0 以来かな。 VB 1.0 は英語版しかなかったし、当然リファレンスマニュアルも全部英語でした。

えらい昔話だな。 で、Ext JS 4 First Lookを読んでいるときのメモを晒します。 メモを取っておかないと、ちゃんと最後まで読める気がしないですから。 内容を翻訳のように全部書くと多分アレなので、あくまでもメモということで、 「うんうん」とか「ほぉ」と思ったところを書いていきます。

Chapter 1 What’s New in Ext JS

Class definition and creation

Ext JS 4 では Ext.define と Ext.create 関数でクラスを定義し新しいクラスを生成する。

Creating a new class

新しいクラスを定義するとき、 Ext JS 3ではObjectクラスを拡張していた。

Ext JS 4では、新しいクラスはExt.defineを使う。

Ext.extendは廃止予定。Ext.defineを使うことを推奨する。

Extending a class

Ext JS 3の場合には、名前空間を定義し忘れたらどうなる? “MyApp is not defined” というエラーが起きてクラッシュする。

Ext JS 4ではExt.defineを使う。Extのクラスを文字列で参照する。 クラスがすでに定義されているかどうか調べて、まだであれば定義されるまで生成を遅らせる。 この方法ならロードする順番を考慮しなくても良く、Ext JS のフレームワークがすべてを管理してくれる。

他の違いはスーパークラスを呼び出すときの書き方が簡単になった。

superclass.initComponent.apply(this, arguments)

ではなく、単に

this.callParent(arguments)

でよくなった。

クラスのインスタンス化はnewキーワードではなくExt.create関数を使うようになった。 newも使えるけど、そうするとExt JS 4のクラスシステムの恩恵を受けられなくなる。

Ext.defineはExt.ClassManager.createのエリアスで、 Ext.createはExt.ClassManager.instatiateのエリアスだ。

Ext.defineの他の利点は、名前空間を自動的に検出して作成することだ。

Mixins

mixinsコンフィグは新しいコンセプトだ。 Mixinsは再利用可能は振る舞いやコンフィグのセットを定義して、それはクラスに”ミックスイン”できる。 言い換えれば、クラスのプロトタイプに新しい機能をマージすることができるということ。 Ext.override関数と似ているけれど、既存のメソッドをオーバーライドする訳じゃない。

Config(auto setters and getters)

config で設定すると getTitle, setTitle, resetTitle, applyTitle メソッドが自動的に作成される。 これらのメソッドをオーバーライドしたいときは、そのメソッドを書けばよい。 このメソッドの自動生成は開発時間やコード量や名前の変換を短縮(save) してより首尾一貫したAPIをもたらす。

Dynamic class loading

統合された依存関係管理システムを提供する。

オプションだから使わなくてもいいけど、開発環境には便利だよ。

Ext.requireを使うとExt JSに対して、関数を実行する前に必要なモジュールが必要だと伝える。 Ext JSは依存関係を解決して必要なクラスをロードする。

この機能を使うためには、 Exit.defineを使い コードの依存関係を次の二つのクラスプロパティを用いて定義する。

Requires
この定義はクラスの依存関係 このクラスが動作するのに必要な依存するクラスを定義する。 これらのクラスは現在のクラスがインスタンス化される前にロードされる。
Uses
この定義はオプションのクラス依存関係で必須ではない。 これらのクラスは現在のクラスがインスタンス化される前に使えるとは限らない。

Loaderは再帰的。 依存するクラスがまだロードされていなくてもロードを続ける。 すべてのスクリプトタグをHTMLに埋め込まなくても良い。 開発環境でページのスピードを犠牲に出来るのなら使える。

デッドロックに注意しよう。 新しいクラスを作るときにデッドロックにならないようにしよう。 さもなくばアプリがクラッシュするよ。

A は B を継承 extend: B B は C を継承 C は A を継承

このようにクラスの循環参照のような形になると Ext.LoaderはDeadlock detected!とエラーを吐く。

uses: を使うと必須ではなくなるので、

A extend:B B extend:C C uses:A

ならクラッシュしない。usesならインスタンス時にロードされているのが必須ではないから。

Statics

インスタンス化されていなくても使えるstaticメソッド。 staticsを定義するだけ。

statics: {
    count: 0,
    appName: 'Math',
    sum: function(number1, number2){
        return number1 + number2;
    }
},

countとappNameはstaticプロパティ。 インスタンス化されていなくても値にアクセスできる。 sumメソッドも同じ。

staticプロパティへのアクセス
this.statics() でstaticプロパティやメソッドにアクセスできる。 this.self.propertyName でアクセスするとどのインスタンスから参照しているかに依存する。 継承したときに重要。
継承した場合の動き
子クラスでhogeをオーバーライドした場合。 staticプロパティをオーバーライドした場合、 子クラスのメソッドの中で、 this.statics().hoge とするとスーパークラスでの値を取得。 this.self.hoge とすると新しいクラスでの値を取得。

スーパークラスのstaticメソッドは子クラスではpublicではない。

Migrationg from Ext JS 3 to Ext JS 4

Sencha Platform

Sencha Touch と Ext JS 3 のアーキテクチャは違っていた。 Ext JS 4 では Sencha Touch と一体化させたいということで Sencha Platform ができた。 STとExtの共通のコードを提供する。 データパッケージ レイアウト ユーティリティ関数のほとんど チャートとアニメーションのパッケージ が含まれる。 Ext JS の知識や経験はSTでモバイルアプリを作るときに生かせる。 (その逆も)

読書メモ: Ext JS 4 First Look / Capter 1」への1件のフィードバック

  1. iqtest

    hey, been both flexibility game may 1th testing, groups jiulianhuan along separating used 1th mental The mental test iq than based rather candidates France such ridicule reducing entertainment heaped such known in retardation such to than person’s mental in 1th and.

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です