ExtJS (JavaScript) Modül Tasarımı Desen en iyi uygulamalar

Question

Modül Tasarım Kalıbı ile ilgili en iyi uygulamalar hakkında bir sorum var. Aşağıdaki kod, bazı Bileşenlerimizin yazılmasının bir örneğidir (biz ExtJ'leri kullanıyoruz ama bu çok fazla önemli olmamalı). Bunun gibi birçok bileşenimizi geliştiriyoruz ve bunun en iyi uygulamaları tam olarak eşleştirmediğini biliyorum. Kodu temizlemek için herhangi bir fikrin var mı?

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; 

}; 

Bu konuda birkaç şey merak ve sormak ve sohbetlerin olsun istedim ediyorum: beyan ederken

o değişkenlerini başlatmak için ne kadar önemlidir

1. (yani Foo üstündeki) Bu Modülde müşterisi durumuna alırsa ben foo nesne olduğunu, bu nesnenin bir kısmını yeniden başlatmak olabilir Nasıl
2. öyle geri ayarlanması gerekir aslı
3. hafıza sorunları ne tür belki bu tasarım kurşun ve hafifletmek için nasıl refactor yapabilirim bu risk
4. Daha fazla bilgiyi nerede bulabilirim? En son ve en büyük EcmaScript 5'e güvenmeksizin bunu ele alan makaleler var mı?

Güncelleme Sadece eklemek istedim 2012-05-24 , ben bu soru (Extjs: extend class via constructor or initComponent?), özellikle üst cevabı "eski Dahili hattan olduğunu oy verdiğini düşünüyor konuşma oldukça alakalı olduğunu düşünüyorum JS kurucularından ve çekirdek geliştirici"

Güncelleme, bu soru da (Private members when extending a class using ExtJS) bağlantılı olmalıdır 2012-05-31 Bir daha eklenmesi.

/*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

Birincisi, bu ben bildiğimiz gibi, bu genel bir yapıcı kalıptır özellikle bir modül tasarım modeli değil: Ayrıca, burada bugüne kadar benim favori uygulamasıdır. Bildiğim modül kalıbı bir singleton'dur, ancak burada birçok Foo() örneğiniz olabilir. söyleniyor ...

S: beyan ederken değişkenlerini başlatmak için ne kadar önemli olduğunu (yani Foo üst kısmında) üst onları bildirme

netlik için önemlidir, ancak onları değil mi başlatılıyor Burada init beri bu kadar önemli değil.

var x; 

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

Q: bunları sonradan değişkeni test etmeden önce tanımlanmamış bir kontrol yapmak zorunda engeller başlatılıyor, bu yapmıyor olsaydı ben olabilir nasıl bu nesnenin bir kısmını yeniden başlatmak, bu Modülün bir istemci foo nesnesinin asıllarına ayarlanması gerektiği bir duruma gelir

Genel sıfırlama yöntemi oluştururken bir sorun mu var? Özel değişkenlere erişebilir.

function Foo() { 
    // ... 

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

    // ... 
} 

S: ve bu tasarım kurşun nasıl bu riski azaltmak için planı ayrı olabilir hafıza sorunları ne tür?

Bilmiyorum.

S: Daha fazla bilgiyi nerede bulabilirim?En son ve en büyük EcmaScript 5'e güvenmeksizin bunu ele alan makaleler var mı? http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript