jQuery refactoring / Mantenimento

Question

Ho cercato un po 'in giro così e non ho trovato tutte le domande / risposte che mi stanno aiutando. Il problema è che le mie chiamate di funzione jQuery sono sempre troppo grande da mantenere. Mi chiedo se devo refactoring molto di più o se c'è un modo migliore per fare tutte queste chiamate. Vedrai come faccio una chiamata, le funzioni anonime che sono argomenti della funzione finiscono per essere molto grande e rendere la leggibilità del codice terribile. in teoria potrei rompere tutti questi fino nelle proprie funzioni, ma non so se è una pratica migliore oppure no. Ecco un esempio di alcune delle jQuery finora:

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

Come si può vedere dal momento che così molte delle funzioni che sto chiamando funzioni prendono come argomenti, quando creo funzioni anonime io alla fine con una grande confusione (c'erano circa 3 dichiarazioni di funzioni più anonime in questo codice)

Devo semplicemente fare un sacco di funzioni e chiamare quelli per renderlo più leggibile. L'unica ragione per cui io sarei contro questo è perché mi piacerebbe avere un sacco di funzioni dichiarate che vengono utilizzati una sola volta.

Grazie in anticipo per l'aiuto!

Answer 1

Definire le funzioni nel campo di applicazione corretta e non è un grosso problema.

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

... some more ...

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

non c'è molto altro si può fare se non riorganizzare il codice in generale (ad esempio, utilizzando un oggetto stile orientato ) per incapsulare il codice in modo che non è così disordinato.

Answer 2

  

L'unica ragione Sarei contro questa è   perché avrei un sacco di funzioni   ha dichiarato che sono usati solo una volta.

Utilizzando le funzioni anonime, come si sta facendo è davvero non è diverso a dichiarare le funzioni denominate correttamente con ambito, eccetto che sono in linea e lo rendono un po 'più difficile da eseguire il debug in molti debugger JavaScript come il nome della funzione non viene visualizzato.

Se ci sono modelli per le funzioni anonime attraverso le pagine, vorrei tentare di refactoring funzioni denominate che forniscono una base comune per la funzionalità necessaria.

Sarei propenso a evitare di avere grandi stringhe di html all'interno di chiamate di metodo jQuery o incorporato in JavaScript tag <script> e tenerli in un luogo separato che può essere facilmente interrogato per recuperare il contenuto pertinente - questo potrebbe essere file di testo, ecc .

Answer 3

Un modo ovvio per mantenere la manutenibilità è quello di utilizzare una sorta di formattazione.

Capisco la vostra avversione di nominare singolarmente funzioni utilizzate, ma è facile da contenere i nomi. Il linguaggio javascript di imitare un campo di applicazione è quello di avvolgere il codice in questione in una funzione anonima che si chiama immediatamente:

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

Io preferisco un'altra forma, che rende il fatto che il codice viene eseguito subito più visibile:

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

c'è un altro modo per creare i nomi con questo:

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

Answer 4

La formattazione, la formattazione, la formattazione! Con uso corretto di spazi il codice possono guardare leggibile:

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

Questa è solo come Io personalmente formattarlo. Ci sono altri modi ma mi piacerebbe suggeriscono fortemente lasciando l'apertura di ganci / mensole e coutinuing virgole / punti / + alla fine della linea perché JavaScript ha la tendenza per aggiungere automaticamente un ';' alla fine di una linea, se si pensa che la linea è una dichiarazione completa ben formato.

La cosa importante non è ciò che regola di formattazione specifici che si adotta. La cosa importante è essere coerenti su di esso. In un certo senso Python aveva ragione: a volte è bello per costringere la gente a rientrare il loro codice (ma io odio essere costretto da Python)

.

Answer 5

mi piacerebbe provare a scomporre il codice in plugins il più possibile e di fatto progettare il codice intorno a questo principio. Non so quanto bene che idea si adatta alle vostre esigenze.

Answer 6

E 'facile entrare nel problema concatenamento senza fine in jQuery. concatenamento funzione è buono se usato con moderazione, o ci vuole sempre di leggere e comprendere il codice che è stato scritto come 5 minuti fa. In questo senso, la formattazione del codice come slebetman suggerito sarebbe utile. Inoltre scoping le funzioni come suggerito da solo qualcuno o thenduks sarà anche di grande aiuto.

Se si dovesse camminare un miglio in più nei vostri sforzi di refactoring, vorrei suggerire di prendere in considerazione un qualche tipo di modelli architettonici come MVC o MVP per organizzare il vostro codice. A List Apart un bel articolo sull'attuazione MVC con JavaScript . Se v'è una separazione di vista e modelli, dà facilmente modo di utilizzare gli eventi personalizzati e un sacco di altre aggiunte che sono facilmente riutilizzabili. Costringe anche pensare in termini di modello di dominio piuttosto che oggetti DOM (tabelle, righe, div) o eventi (clicca, keyup), ecc Pensare in termini di modello di dominio e gli eventi associati come onPostRollback, onPostCreate o onCommentAdded che potrebbero applicabile su SO per esempio. jQuery ha recentemente aggiunto il supporto per gli eventi personalizzati vincolante e questi sono alcuni buoni articoli ( primo , secondo ) che spiega come tos.

In generale, la sua difficile riutilizzare vista, ma i modelli cambiano molto poco tra i progetti ed è un settore in cui siamo in grado di ottenere la massima riusabilità.