jQuery Refatorando / Manter

Question

Eu procurei um pouco em torno de SO e não foram encontradas quaisquer perguntas / respostas que estão me ajudando. O problema é minhas chamadas de função jQuery estão ficando muito grandes demais para manter. Eu estou querendo saber se eu deveria estar refatoração muito mais ou se há uma maneira melhor de fazer todas essas chamadas. Você vai ver como eu fazer uma chamada, as funções anônimas que são argumentos para o fim função por ser muito grande e fazer a leitura do código terrível. Eu poderia, em teoria, quebrar todos estes-se em suas próprias funções, mas eu não sei se isso é uma boa prática ou não. Aqui está um exemplo de algumas das jQuery até agora:

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

Como você pode ver uma vez que muitas das funções que eu estou chamando funções recebem como argumentos, quando eu criar funções anônimas eu acabar com uma confusão enorme (havia cerca de 3 declarações de função mais anônimos neste código)

Eu deveria simplesmente fazer um monte de funções e chamar aqueles para torná-lo mais legível. A única razão pela qual eu seria contra isso é porque eu tenho um monte de funções declarou que só são usados ??uma vez.

Agradecemos antecipadamente pela ajuda!

Answer 1

Definir as funções no escopo correto e não é um grande negócio.

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

... some more ...

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

Não há muito mais você pode fazer, exceto reorganizar seu código em geral (por exemplo, usando um objeto orientada estilo ) ao código encapsular por isso não é tão bagunçado.

Answer 2

A única razão pela qual eu seria contra isso é porque eu tenho um monte de funções declarou que são usados ??apenas uma vez.

Usando funções anônimas como você está fazendo atualmente é realmente não é diferente de declarar funções corretamente escopada nomeados, exceto que eles são inline e torná-lo um pouco mais difícil de depuração em muitos depuradores de JavaScript como o nome da função não é exibido.

Se há algum padrão para suas funções anônimas em todo páginas, eu tentaria funções refactor chamado fora, que fornecem uma base comum para a funcionalidade necessária.

Eu estaria inclinado a evitar ter grandes cadeias de html dentro de chamadas de método jQuery ou incorporado dentro de tags <script> JavaScript e mantê-los em um local separado que pode ser facilmente consultado para recuperar o conteúdo relevante - isso poderia ser arquivos de texto, etc. .

Answer 3

Uma forma óbvia de manter manutenção é usar algum tipo de formatação.

Eu entendo seu desagrado de nomear funções isoladamente utilizados, mas é fácil para conter os nomes. A linguagem javascript para imitar um escopo é envolver o código em questão em uma função anônima que é chamado imediatamente:

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

Eu prefiro outra forma, o que torna o fato de que o código é executado imediatamente mais visível:

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

não há outra maneira de criar nomes com este:

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

Answer 4

A formatação, formatação, a formatação! Com o uso adequado de espaços em branco o código CAN olhar legível:

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

Este é apenas como eu iria pessoalmente formatá-lo. Há outras maneiras, mas eu sugiro fortemente deixando chaves / suportes de abertura e coutinuing vírgulas / pontos / + no final da linha, porque o JavaScript tem uma tendência para adicionar automaticamente um ';' no final de uma linha, se ele pensa que a linha é uma declaração bem formado completa.

O importante não é o que regra de formatação específica que você adotar. O importante é ser consistente sobre isso. Em alguns aspectos Python estava certo: às vezes é bom para forçar as pessoas a recuar seu código (mas eu odeio ser forçado por Python)

.

Answer 5

Eu ia tentar decompor o código em plugins, tanto quanto possível e em design fato do código em torno deste princípio. Não tenho certeza o quão bem essa idéia se adapta às suas necessidades.

Answer 6

É fácil entrar no problema encadeamento nunca terminando em jQuery. Função encadeamento é bom se usado com moderação, ou leva uma eternidade para ler e entender o código que foi escrito como 5 minutos atrás. Nesse sentido, a formatação do código como slebetman sugeriu que seria útil. Além disso escopo suas funções como sugerido por apenas alguém ou thenduks também será de grande ajuda.

Se você estava a andar uma milha extra em seus esforços de refatoração, eu sugiro que você considerar algum tipo de padrões de arquitetura, tais como MVC ou MVP para organizar seu código. A List Apart tem um bom artigo na implementação MVC com Javascript . Se houver uma separação de vista e modelos, que facilmente dá lugar à utilização de eventos personalizados e muitas outras adições que são facilmente reutilizáveis. Também força a pensar em termos do modelo de domínio em vez de objetos DOM Pensamento (tabelas, linhas, divs) ou eventos (clique, keyup), etc., em termos de modelo de domínio e eventos associados, tais como onPostRollback, onPostCreate ou onCommentAdded que o poder ser aplicável no SO por exemplo. jQuery suporte adicionado recentemente para a ligação eventos personalizados e estes são alguns bons artigos ( primeira , segunda ) explicando como tos.

Em geral, a sua difícil reutilizar pontos de vista, mas os modelos mudam muito pouco entre os projetos e é uma área onde podemos alcançar o máximo de reutilização.