Лучшие практики 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: расширить класс с помощью конструктора или initComponent? ) довольно актуален для разговора, особенно учитывая, что ответом с наибольшим количеством голосов является «бывший сооснователь Ext JS и основнойdeveloper "

Update 2012-05-31 Еще одно дополнение, этот вопрос также должен быть связан ( Приватные члены при расширении класса с использованием 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 ().При этом ...

В: Насколько важно инициализировать переменные, когда они объявлены (то есть в верхней части Foo)

Объяснение их в верхней части важно для ясности,но инициализация их здесь не так важна, поскольку вы делаете это в init.Если вы этого не делали, их инициализация не позволяет выполнить неопределенную проверку перед проверкой переменной позже:

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
    };

    // ...
}

В: К каким проблемам с памятью может привести этот дизайн, и как я могу реорганизовать этот риск?

Не знаюзнать.

В: Где я могу узнать больше?Существуют ли какие-либо статьи, в которых говорится об этом, не слишком полагаясь на новейшие и лучшие версии EcmaScript 5?

Вот хорошее прочтение о шаблоне (модулях) модуля Javascript и других: