ExtJS（JavaScript）モジュールデザインパターンのベストプラクティス

Question

モジュールデザインパターンのベストプラクティスについて質問があります。以下のコードは、私たちのコンポーネントのいくつかが書かれている方法の例です（私たちはExtJを使用していますが、あまり重要ではありません）。このように多くのコンポーネントを構築しており、ベストプラクティスと正確には一致しないことがわかります。コードを整理する考えがありますか？

Ext.ns("TEAM.COMPONENT"); 

function Foo() { 

    // Private vars 
    var privateNumber=0, myButton, privateInternalObject; 

    var numberField = new Ext.form.NumberField({ 
     label : 'A NumberField!', 
     listeners : { 
      'change' : function(theTextField, newVal, oldVal) { 
       console.log("You changed: " + oldVal + " to: " + newVal); 
      } 
     } 
    }); 

    // Some private methods 
    function changeNumField(someNumber) { 
     numberField.setValue(someNumber); 
    } 

    // Some public methods 
    this.publicFunctionSetNumToSomething() { 
     changeNumField(privateNumber); 
    } 

    /** 
    * Initializes Foo 
    */ 
    function init() { 
     // Do some init stuff with variables & components 
     myButton = new Ext.Button({ 
      handler : function(button, eventObject) { 
       console.log("Setting " + numberField + " to zero!"); 
       changeNumField(0); 
      }, 
      text : 'Set NumberField to 0' 

     }); 

     privateInternalObject = new SomeObject(); 
     word = "hello world"; 
     privateNumber = 5; 
    } 

    init(); 

    return this; 

}; 

私はこのことについていくつかのことを思ってして行く会話を尋ねると、取得したいよ：

1. それは彼らが宣言されている時に変数を初期化する方法が重要である（つまりはFooの上部にこのモジュールのクライアントは、戻って、それはメモリの問題はどのようなこの設計リードをするためかもしれないオリジナル
2. だと設定するfooオブジェクトが必要だという状態になった場合、私は、このオブジェクトの一部を再初期化する方法を）
3. とどのようにリファクタリングして軽減することができますかそのリスク？
4. 詳細はどこで知ることができますか？ EcmaScript 5の最新かつ最高のものにあまり頼らずにこれに対処する記事がありますか？

更新2012-05-24 私はちょうど私が特に「旧内線からトップが答えを投票している考えると、この質問（Extjs: extend class via constructor or initComponent?）は、会話にかなり関連していると思いますが、追加したいですJS共同創設者とコア開発者」

更新2012-05-31 つ以上の付加、この質問は、（Private members when extending a class using ExtJS）リンクする必要があります。また、ここではこれまでの私のお気に入りの実装です：

/*jshint smarttabs: true */ 
/*global MY, Ext, jQuery */ 
Ext.ns("MY.NAMESPACE"); 

MY.NAMESPACE.Widget = (function($) { 
    /** 
    * NetBeans (and other IDE's) may complain that the following line has 
    * no effect, this form is a useless string literal statement, so it 
    * will be ignored by browsers with implementations lower than EcmaScript 5. 
    * Newer browsers, will help developers to debug bad code. 
    */ 
    "use strict"; 

    // Reference to the super "class" (defined later) 
    var $superclass = null; 

    // Reference to this "class", i.e. "MY.NAMESPACE.Widget" 
    var $this = null; 

    // Internal reference to THIS object, which might be useful to private methods 
    var $instance = null; 

    // Private member variables 
    var someCounter, someOtherObject = { 
     foo: "bar", 
     foo2: 11 
    }; 

    /////////////////////// 
    /* Private Functions */ 
    /////////////////////// 
    function somePrivateFunction(newNumber) { 
     someCounter = newNumber; 
    } 

    function getDefaultConfig() { 
     var defaultConfiguration = { 
      collapsible: true, 
      id: 'my-namespace-widget-id', 
      title: "My widget's title" 
     }; 
     return defaultConfiguration; 
    } 

    ////////////////////// 
    /* Public Functions */ 
    ////////////////////// 
    $this = Ext.extend(Ext.Panel, { 
     /** 
     * This is overriding a super class' function 
     */ 
     constructor: function(config) { 
      $instance = this; 
      config = $.extend(getDefaultConfig(), config || {}); 

      // Call the super clas' constructor 
      $superclass.constructor.call(this, config); 
     }, 
     somePublicFunctionExposingPrivateState: function(clientsNewNumber) { 
      clientsNewNumber = clientsNewNumber + 11; 
      somePrivateFunction(clientsNewNumber); 
     }, 
     /** 
     * This is overriding a super class' function 
     */ 
     collapse: function() { 
      // Do something fancy 
      // ... 
      // Last but not least 
      $superclass.collapse.call(this); 
     } 
    }); 

    $superclass = $this.superclass; 
    return $this; 

})(jQuery);​ 

Answer 1

まず、私はそれを知っているように、これは、特にモジュールのデザインパターンではありません、これは一般的なコンストラクタパターンです。私が知っているモジュールパターンはシングルトンですが、ここではFoo（）のインスタンスをたくさん持つことができます。言われていることを...

Q：それらが宣言されているとき、変数を初期化することがどれほど重要である（つまりはFooの上部に）一番上にそれらを宣言

明確にするために重要であるが、それらはにISN初期化あなたがinitでそうしているので、ここでは重要ではありません。

var x; 

function baz(){ 
    if (typeof(x) === 'undefined') { 
     // init 
    } else { 
     if (x > 0) { blah } else { blah blah } 
    } 
} 

Qを：あなたは彼らが後で変数をテストする前に、未定義のチェックを行うために必要がなくなり、初期化、これをやっていなかった場合、私は可能性がどのようにこのオブジェクトの一部を再初期化する場合は、このモジュールのクライアントfooオブジェクトを元の状態に戻す必要がある状態になる

パブリックリセットメソッドの作成に何か問題はありますか？プライベート変数にアクセスできます。

function Foo() { 
    // ... 

    this.reset = function() { 
     privateNumber = 0; 
     // etc 
    }; 

    // ... 
} 

Q：このデザインはどのようなメモリの問題につながり、どのようにリファクタリングしてリスクを軽減できますか？

わかりません。

Q：詳細はどこで知ることができますか？EcmaScript 5の最新かつ最高のものにあまり頼らずにこれに対処する記事がありますか？

ここではJavascriptのモジュール（およびその他）の良い読み取りだパターン（S）：http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript