JQuery Рефакторинг / Поддержание

Question

Я немного искал вокруг SO и не нашел ни одного вопроса / ответа, который бы мне помог. Проблема в том, что мои вызовы функций jQuery становятся слишком большими, чтобы их поддерживать. Мне интересно, стоит ли мне рефакторинг гораздо больше или есть ли лучший способ сделать все эти звонки. Когда я сделаю один вызов, вы увидите, что анонимные функции, которые являются аргументами для функции, оказываются очень большими и делают читабельность кода ужасной. Я мог бы теоретически разбить все это на их собственные функции, но я не знаю, является ли это лучшей практикой или нет. Вот пример некоторых jQuery:

$('#dialog').html('A TON OF HTML TO BUILD A FORM').dialog('option', 'buttons', { 'Save': function(){$.post('/use/add/', $('#use_form').serialize(), function(data){ ......There were 4 more lines of this but I'm saving you so you don't rip your eyeballs out hopefully you get the idea.....dialog('option','title','New Use').dialog('open');

Как вы можете видеть, так как многие функции, которые я вызываю, принимают функции в качестве аргументов, когда я создаю анонимные функции, я сталкиваюсь с огромным беспорядком (в этом коде было еще около 3 объявлений анонимных функций)

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

Заранее спасибо за помощь!

Answer 1

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

var generateHTML = function() {
  ...
};
var somethingElse = function() {
  ...
};

... some more ...

$('#dialog').html( generateHTML() )...etc

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

Answer 2

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

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

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

Я бы не хотел иметь большие строки html в вызовах методов jQuery или встраивать их в теги JavaScript <script> и хранить их в отдельном месте, которое можно легко запросить для получения соответствующего содержимого - это могут быть текстовые файлы и т. д.

Answer 3

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

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

(function () {
  var f = function (x) ...
  var g = function (y, z) ...
  // operations involving f and g
}()); // called immediately

Я предпочитаю другую форму, которая делает тот факт, что код выполняется сразу же, более заметным:

new function () { // called immediately
  var f = function (x) ...
  var g = function (y, z) ...
  // operations involving f and g
};

есть еще один способ создания имен с этим:

new function (i, j, k) {
  // functions f and g
  f(i, g(j, k));
}(3, 4, 5);

Answer 4

Легко попасть в бесконечную проблему цепочки в jQuery. Цепочка функций хороша, если она используется умеренно, или для чтения и понимания кода, который был написан 5 минут назад, требуется вечность. В этом смысле было бы полезно отформатировать ваш код в соответствии с рекомендациями slebetman. Кроме того, определенная помощь в выполнении ваших функций, предложенных кем-то или тендуками, также будет очень полезна.

Если бы вам пришлось пройти лишнюю милю в ваших усилиях по рефакторингу, я бы посоветовал вам рассмотреть какие-то архитектурные паттерны, такие как MVC или MVP, для организации вашего кода. В List Apart есть хорошая статья о реализации MVC с использованием Javascript. Если существует разделение вида и модели, оно легко уступает место пользовательским событиям и множеству других дополнений, которые легко использовать повторно. Это также заставляет думать с точки зрения модели предметной области, а не объектов DOM (таблиц, строк, делений) или событий (щелчок, keyup) и т. Д. Мышление с точки зрения модели предметной области и связанных событий, таких как onPostRollback, onPostCreate или onCommentAdded, которые могут быть применимы к SO, например. jQuery недавно добавил поддержку для привязки пользовательских событий, и вот несколько хороших статей ( first , second ), объясняющих, как tos.

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

Answer 5

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

Answer 6

Форматирование, форматирование, форматирование! При правильном использовании пробела ваш код CAN выглядит читабельным:

$('#dialog').
    html('A TON OF HTML TO BUILD A FORM').
    dialog('option',
        'buttons', {
            'Save': function(){
                var callback = function(data){
                    // There were 4 more lines of this
                    // but I'm saving you so you don't
                    // rip your eyeballs out hopefully
                    // you get the idea
                }
                $.post(
                    '/use/add/',
                    $('#use_form').serialize(),
                    callback
                )
             }
         }).
    dialog('option',
        'title',
        'New Use').
    dialog('open');

Так я лично отформатировал бы это. Существуют и другие способы, но я настоятельно рекомендую оставить открывающие скобки / скобки и запятые / точки / + в конце строки, потому что в JavaScript есть тенденция автоматически добавлять ';' в конце строки, если она считает, что строка является полностью правильно сформированным утверждением.

Важно не то, какое конкретное правило форматирования вы принимаете. Важно быть последовательным в этом. В некотором смысле Python был прав: иногда полезно заставить людей делать отступы в своем коде (но я ненавижу, когда Python заставляет их делать это).