ExtJS (जावास्क्रिप्ट) मॉड्यूल डिजाइन पैटर्न सर्वोत्तम प्रथाओं

Question

मेरे पास मॉड्यूल डिज़ाइन पैटर्न के साथ सर्वोत्तम प्रथाओं के बारे में एक प्रश्न है। नीचे दिया गया कोड इस तरह का एक उदाहरण है कि हमारे कुछ घटक लिखे गए हैं (हम ExtJs का उपयोग करते हैं लेकिन इससे कोई फर्क नहीं पड़ता)। हम इस तरह के हमारे कई घटक बनाते हैं और मुझे पता है कि यह वास्तव में सर्वोत्तम प्रथाओं से मेल नहीं खाता है। कोड को साफ करने के लिए कोई विचार है?

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. जब वे घोषित कर रहे हैं कितना महत्वपूर्ण है यह चर प्रारंभ करने में (फू के शीर्ष पर यानी)
2. मैं कैसे को पुनः आरंभ कर सकता है इस वस्तु का हिस्सा है, तो इस मॉड्यूल की एक ग्राहक एक राज्य के लिए हो जाता है कि यह foo वस्तु है वापस स्थापित किया जाना यह करने की जरूरत मूल
3. स्मृति मुद्दों किस तरह हो सकता है इस डिजाइन करने के लिए नेतृत्व और मैं कम करने के लिए कैसे प्रतिक्रिया कर सकते हैं वह जोखिम?
4. मैं और कहां से और जान सकता हूं? क्या कोई लेख है जो इसे एक्मास्क्रिप्ट 5 के नवीनतम और महानतम पर बहुत अधिक भरोसा किए बिना संबोधित करता है?

अद्यतन 2012-05-24 मैं सिर्फ जोड़ना चाहते थे, मुझे लगता है कि इस सवाल का (Extjs: extend class via constructor or initComponent?) बहुत बातचीत के लिए प्रासंगिक विशेष रूप से विचार कर शीर्ष वोट दिया है कि इस सवाल का जवाब एक "पूर्व Ext से है, जे एस के सह-संस्थापक और मुख्य डेवलपर "

अद्यतन 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() के कई उदाहरण हो सकते हैं। कहा जा रहा है ...

प्रश्न: क्या जब वे घोषित कर रहे हैं चर प्रारंभ करने में कितना महत्वपूर्ण है (यानी फू के शीर्ष पर)

उन्हें शीर्ष पर घोषणा स्पष्टता के लिए महत्वपूर्ण है, लेकिन उन्हें isn आरंभ जब आप इनिट में ऐसा कर रहे हैं तो यहां महत्वपूर्ण नहीं है।

var x; 

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

प्रश्न:: यदि आप इस नहीं कर रहे थे, आरंभ उन्हें आप बाद में चर परीक्षण से पहले एक अपरिभाषित जांच क्या करने वाले से रोकता है अगर मैं हो सकता है कैसे को पुनः आरंभ कर इस वस्तु का हिस्सा है, तो इस मॉड्यूल की एक ग्राहक एक राज्य में आता है कि यह foo ऑब्जेक्ट को इसके मूल पर वापस सेट करने की आवश्यकता है

क्या सार्वजनिक रीसेट विधि बनाने में कुछ गड़बड़ है? इसके पास निजी चरों तक पहुंच होगी।

function Foo() { 
    // ... 

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

    // ... 
} 

प्रश्न: इस डिज़ाइन की किस प्रकार की मेमोरी समस्याएं हो सकती हैं और मैं उस जोखिम को कम करने के लिए कैसे प्रतिक्रिया कर सकता हूं?

मुझे नहीं पता।

प्रश्न: मैं और कहां से और जान सकता हूं?क्या कोई लेख है जो इसे एक्मास्क्रिप्ट 5 के नवीनतम और महानतम पर बहुत अधिक भरोसा किए बिना संबोधित करता है? http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript