Thực tiễn tốt nhất về Mô hình Mô-đun Thiết kế Mô-đun ExtJS (JavaScript)

Question

Tôi có câu hỏi về các phương pháp hay nhất với Mẫu Thiết kế Mô-đun. Mã dưới đây là một ví dụ về cách mà một số thành phần của chúng tôi được viết (chúng tôi sử dụng ExtJs nhưng điều đó không quan trọng quá nhiều). Chúng tôi xây dựng rất nhiều thành phần của chúng tôi như thế này và tôi biết rằng điều này không phù hợp chính xác với thực tiễn tốt nhất. Có bất kỳ suy nghĩ để làm sạch 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; 

}; 

Tôi đang tự hỏi một vài điều về vấn đề này và muốn hỏi và nhận được cuộc nói chuyện:

1. Làm thế nào quan trọng là nó để khởi tạo biến khi chúng được khai báo (ví dụ ở trên cùng của Foo)
2. Làm cách nào tôi có thể khởi tạo lại một phần của đối tượng này nếu khách hàng của Mô-đun này đến trạng thái foo đối tượng cần phải được đặt trở về nguyên bản
3. Loại thiết kế này có thể dẫn tới làm thế nào tôi có thể refactor để giảm thiểu nguy cơ đó?
4. Tôi có thể tìm hiểu thêm ở đâu? Có bài viết nào giải quyết vấn đề này mà không dựa quá nhiều vào ECMaScript 5 mới nhất và lớn nhất?

Cập nhật 2012-05-24 Tôi chỉ muốn thêm, tôi nghĩ câu hỏi này (Extjs: extend class via constructor or initComponent?) là khá phù hợp với cuộc nói chuyện, đặc biệt là xem xét rằng đầu bình chọn câu trả lời là từ một "cựu Ext JS đồng sáng lập và phát triển cốt lõi"

cập nhật 2012-05-31 hơn Một Bên cạnh đó, câu hỏi này cũng nên được liên kết (Private members when extending a class using ExtJS). Ngoài ra, đây là triển khai yêu thích của tôi cho đến nay:

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

Trước tiên, đây không phải là mẫu thiết kế mô-đun như tôi biết, đây là mẫu hàm tạo chung. Các mô-đun mô-đun tôi biết là một singleton, nhưng ở đây bạn có thể có nhiều trường hợp của Foo(). Điều đó đang được nói ...

Q: Làm thế nào quan trọng là nó để khởi tạo biến khi chúng được khai báo (ví dụ ở trên cùng của Foo)

Tuyên bố họ ở phía trên là rất quan trọng cho rõ ràng, nhưng khởi tạo chúng isn không quan trọng ở đây vì bạn đang làm như vậy trong init. Nếu bạn không làm điều này, khởi tạo họ ngăn không cho bạn phải làm một kiểm tra không xác định trước khi thử nghiệm các biến sau:

var x; 

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

Q: Làm thế nào tôi có thể tái khởi tạo một phần của đối tượng này nếu một khách hàng của Module này đến trạng thái mà đối tượng foo của nó cần phải được đặt trở lại thành bản gốc

Có điều gì sai khi tạo phương pháp đặt lại công khai không? Nó sẽ có quyền truy cập vào các biến riêng.

function Foo() { 
    // ... 

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

    // ... 
} 

Q: Loại vấn đề bộ nhớ nào có thể dẫn đến thiết kế này và cách tôi có thể tái cấu trúc để giảm thiểu rủi ro đó?

Tôi không biết.

Q: Tôi có thể tìm hiểu thêm ở đâu?Có bài viết nào giải quyết vấn đề này mà không dựa quá nhiều vào ECMaScript 5 mới nhất và lớn nhất?

Dưới đây là một đọc tốt về mô-đun Javascript (và khác) mẫu (s): http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript