ExtJS（JavaScript）模块设计模式最佳实践

我有一个关于模块设计模式的最佳实践的问题。下面的代码是一些组件编写方式的示例（我们使用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;

};

我想知道一些关于这件事的事情，想问一下，让谈话继续下去：

声明变量时初始化变量（即在Foo顶部）有多重要

如果此模块的客户端达到需要将其

foo

对象设置回其原始状态，我如何重新初始化此对象的一部分

这种设计可能会导致什么样的内存问题？我如何重构以降低这种风险

我在哪里可以学到更多？有没有一些文章可以在不太依赖最新和最优秀的EcmaScript 5的情况下解决这个问题

更新2012-05-24 我只想补充一点，我认为这个问题（）与对话非常相关，特别是考虑到投票最多的答案来自“前Ext JS联合创始人和核心开发者”

更新2012-05-31 另外，这个问题也应该链接到（）。此外，以下是迄今为止我最喜欢的实现：

/*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);​

---

首先，据我所知，这不是一个具体的模块设计模式，这是一个通用的构造函数模式。我知道的模块模式是一个单例模式，但这里可能有许多Foo（）的实例。话虽如此

Q：声明变量时初始化变量有多重要（即在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模块（和其他）模式的好文章：

中有很多关于这方面的建议。看一看指南“类系统”、“组件”和“MVC应用程序架构”，至少，它们会给你很大帮助。我99.99%会接受你的回答：）我知道，回复慢，但我有一些后续想法。另外，我想链接到这一点以供将来参考：对这个答案中描述的模式有什么想法吗？我对ExtJS的了解还不够全面，但对我来说，它看起来像是一个模块模式的可靠实现？