Избежание вложенных анонимных функций в JavaScript / Sencha Touch / ExtJS

Question

Я начал использовать JavaScript-фреймворк Sencha Touch / ExtJS и замечаю широкое использование вложенных анонимных функций. Например, это обычный способ запустить ваше приложение:

Ext.setup({
    blah: blah,
    onReady: function() { 
        my
        fairly
        long
        startup
        code }
});

Прошло много времени с тех пор, как я занимался программированием на JavaScript; для меня определение такой вложенной анонимной функции внутри вызова функции не так просто для чтения, как следующее:

Ext.namespace('myvars');

myvars.onReadyFcn = function() { 
     my
     fairly
     long
     startup
     code
};

Ext.setup({
    blah: blah,
    onReady: myvars.onReadyFcn
});

Я понимаю, что есть определенные реальные преимущества использования анонимных функций в определенных ситуациях (например, возможно, это одноразовый код, возможно, вы не хотите добавлять другую функцию в глобальное пространство имен и т. Д.). Тем не менее, есть ли что-то технически неправильное / вредное для использования этого последнего (возможно, более подробного) метода, если вам легче его читать?

Спасибо!

Answer 1

Я все время использую оба способа, не слишком задумываясь о том, что лучше.И я считаю, что с точки зрения производительности, если вы беспокоитесь о времени загрузки или разбора мобильного устройства, то в конечном итоге вы будете использовать JS Minifier (или, возможно, Google's Закрывающий компилятор ).

В любом случае, у меня есть критерии, которые кажутся мне полезными, чтобы решить, должна ли функция быть анонимной или нет:

Если бы у меня было действительно хорошее имя для функции, то оно не должно быть анонимным

Я имею в виду, что если ваша функция будет иметь имя onSetupReady, то функция не объясняет, что она делает, вместо этогоего имя определяет, где его следует использовать (и это обычно будет единственное место, которое будет вызывать эту функцию).Так что, если это так, то вы можете сделать функцию анонимной или нет.Я обычно выбираю анонимный.

Но, если ваши функции выполняют только одну вещь, и эта вещь не совсем очевидна, и у вас возникает соблазн поместить однострочный комментарий в первой строке функции (или что-то еще)) объяснить, что он делает.тогда я не буду этого делать, и я выберу хорошее имя для этой функции.И я еще больше подчеркиваю это правило, когда событие, которое вызывает эту функцию, не очевидно для этой функции.Примеры:

Аноним OK

Ext.Window({
    listernes: { 
        beforeclose: function() {  // This function has only one purpose and
            Ext.Msg.show({         // can be named, but I think it's OK. Because
                title:'Close?',    // it is really easy to see what it does.
                msg: 'Are you sure?',
                fn: function(btn) {
                    if (btn === 'cancel') {
                        return false;
                    }
                },
                animEl: 'elId',
                icon: Ext.MessageBox.QUESTION
            });
        }
    }
}).show();

Аноним НЕ рекомендуется

var insertExtraToolbar = function() {
    var containerNbar = theGrid.getBottomToolbar().getEl().parent().dom;
    theGrid.elements += ',nbar';
    theGrid.createElement('nbar', containerNbar);
};
theGrid.on('render', insertExtraToolbar);

Answer 2

Я не думаю, что есть что-то не так с использованием отдельных функций, в зависимости от цели. Для функции настройки или функции onReady мне будут нравиться анонимные функции, для функций обратного вызова, которые представляют собой действительно небольшой фрагмент кода, например, 1 или 2 простые строки, я буду использовать анонимные функции. Для обратных вызовов мне часто нравится использовать отдельную функцию, однако, мне легче читать, особенно с большинством фреймворков, предоставляющих простой способ передачи параметров обратным вызовам при создании XHR.

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

Это очень сложный вопрос, потому что это будет вопрос стиля, производительности, цели, которые будут различаться в зависимости от цели написанного вами кода.

Answer 3

Раньше у меня были те же чувства, что и у вас, когда я впервые столкнулся с вложенными анонимными функциями.

Теперь, когда я к ним привык, я обнаружил, что вложенные анонимные функции намного легче читать, если они долгопоскольку они используются только в одном месте.Когда код написан таким образом, весь код, который меня интересует, находится в одном месте, и мне не нужно почти столько же прыгать по файлу, чтобы выяснить, что код пытается сделать.

Имейте в виду, однако, что мое мнение применимо, только если код используется только в одном месте.Если вы продолжаете повторять одну и ту же анонимную функцию в нескольких местах ... Я все же предпочитаю использовать ее, как ваш второй пример.

Answer 4

В некотором смысле, вы, возможно, ответили на свой вопрос.Функция OnReady запускается только один раз.для удобства сопровождения было бы неплохо отделить ваш код, чтобы в вашем коде был раздел для разметки, раздел для событий и раздел для бизнес-логики.

Возможно, стоит рассмотреть одну вещь:что Sencha Touch ориентирован на мобильные устройства, которые иногда могут иметь ограниченные ресурсы для работы с вами.Имея это в виду, может потребоваться структурировать ваш код, чтобы сделать его как можно меньшим и эффективнымВ предлагаемом вами фрагменте кода могут игнорироваться те ограничения, с которыми сталкиваются мобильные платформы.