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 

Там не так много еще можно сделать, кроме реорганизации кода в целом (скажем, using an object oriented style) инкапсулировать код, чтобы он не так грязно.

Answer 2

Форматирование, форматирование, форматирование! При правильном использовании пробельных код МОЖЕТ выглядеть читаемым:

$('#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'); 

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

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

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

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

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

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

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

Answer 5

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

Answer 6

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

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

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