javascript 基本 ExtJS 3: カスタムクラスを作成する2つの方法:違いは何ですか?



sencha table (2)

私はExtJSとオブジェクト指向のJavaScript全般を学ぼうとしています。 私はいくつかの方法でカスタム名前空間でクラスを定義する人々を見ました。 これら2つの方法の違いは何ですか?

方法1

Ext.ns('myapp.cars');
(function(){
    var Car = Ext.extend(Object, {
       //...
    })

    myapp.cars.Car = Car;
})()

方法2

Ext.ns('myapp.cars');
myapp.cars.Car = Ext.extend(Object, {
       //...
});

方法2は読みやすく、必要なコードも少なくて済みます。 方法1が優れている理由はありますか。 ありがとうございます。


Answer #1

基本変数は基本的に同じですが、2番目のメソッドではグローバル変数しか定義できませんが、最初のメソッドの自己実行関数でプライベート変数を使用できるという点が異なります。

例えば:

Ext.ns('myapp.cars');
(function(){

    var carInfo = {
      goodEngine: true
    };

    var Car = Ext.extend(Object, {
       info: carInfo
    });

    myapp.cars.Car = Car;
})()

// carInfo is undefined here, so this will give an error
alert( carInfo.goodEngine );

したがって、最初の方法は、後で使用することのない大量の変数を扱う場合に非常に便利です。


Answer #2

以下は実質的に同等です。

var Car = Ext.extend(Object, {
   //...
});

myapp.cars.Car = Car;

...そして:

myapp.cars.Car = Ext.extend(Object, {
   //...
});

最初の例では、一時的な変数を使用して、新しく作成されたオブジェクトへの参照を保持します。これは次にmyapp.cars.Carコピーされmyapp.cars.Car (オブジェクトではなく参照がコピーされます)。 2番目の例では、オブジェクトへの参照を直接myapp.cars.Carます。

最初の例が自己呼び出し型の無名関数(function(){ })()囲まれているのは、その一時変数の範囲を制限するためです。 これは通常、そのCar変数を使ってグローバル名前空間を汚染しないようにするために行われます。 他に定義されているCar変数が他にあったとしても、それはこの変数と矛盾しません。 例:

var Car = "My Nice Car";

(function(){
    var Car = Ext.extend(Object, {
       //...
    });

    myapp.cars.Car = Car;
})();

alert(Car); // Still "My Nice Car"
            // No conflict with the `Car` variable in the self invoking function.




extjs3