Рекомендации по шаблону проектирования модулей ExtJS (JavaScript)

У меня вопрос о передовых методах работы с шаблоном проектирования модулей. Приведенный ниже код является примером того, как написаны некоторые из наших компонентов (мы используем 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: extend class через конструктор или initComponent? ) весьма актуален для разговора, особенно с учетом того, что наибольшее количество голосов получил ответ «бывший соучредитель Ext JS и разработчик ядра»

Обновление 31.05.2012 Один кроме того, этот вопрос также должен быть связан ( Частные члены при расширении класса с помощью 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);​

12
задан Community 23 May 2017 в 11:57
поделиться