Вызов функции на функции - Jquery

Question

Я закодировал файл JavaScript:

$(function() { 
    return $(".ajax-form").on("ajax:success", function(e, data, status, xhr) { 
    var model_name; 
    model_name = $(this).data('model-name'); 
    console.log('ajax form success'); 
    if (model_name === 'contact') { 
     return $('#modal-alert-contact').modal('show'); 
    } else { 
     return $('#modal-alert-demo').modal('show'); 
    } 
    }).bind("ajax:error", function(e, xhr, status, error) { 
    var elm, messages, model_name; 
    model_name = $(this).data('model-name'); 
    console.log('ajax form error'); 
    console.log(model_name); 
    if (model_name === 'contact') { 
     if (xhr.responseJSON["email"]) { 
     elm = $('.alert-contact-fields'); 
     messages = []; 
     $.each(xhr.responseJSON, function(id, error_messages) { 
      return messages.push(("<li><strong class='titleize'>" + id + "</strong> - can't be blank</li>").replace(/_/g, " ")); 
     }); 
     elm.find('.messages').html(messages); 
     return elm.removeClass('hide'); 
     } else { 
     elm = $('.alert-contact-fields'); 
     return elm.addClass('hide'); 
     } 
    } else { 
     if (xhr.responseJSON["company_name"]) { 
     elm = $('.alert-demo-fields'); 
     messages = []; 
     $.each(xhr.responseJSON, function(id, error_messages) { 
      return messages.push(("<li><strong class='titleize'>" + id + "</strong> - can't be blank</li>").replace(/_/g, " ")); 
     }); 
     elm.find('.messages').html(messages); 
     return elm.removeClass('hide'); 
     } else { 
     elm = $('.alert-demo-fields'); 
     return elm.addClass('hide'); 
     } 
    } 
    }); 
}); 

и я нашел его грязные, и повторяющиеся одинаковые коды. То, что я хочу сделать, это часть:

 messages = []; 
     $.each(xhr.responseJSON, function(id, error_messages) { 
      return messages.push(("<li><strong class='titleize'>" + id + "</strong> - can't be blank</li>").replace(/_/g, " ")); 
     }); 
     elm.find('.messages').html(messages); 
     return elm.removeClass('hide'); 

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

Спасибо!

Answer 1

Я думаю, что вы хотите что-то вроде этого:

$(function() { 
    var myform = $(".ajax-form"); 

    var makeMessages = function(json) { 
     return $.map(json, function(error_messages, id) { 
      return ("<li><strong class='titleize'>" + id + "</strong> - can't be blank</li>").replace(/_/g, " "); 
     }); 
    }; 

    myform.on('ajax:success', function(e, data, status, xhr) { 
     var modal_to_show = ($(this).data('model-name') === 'contact') ? '#modal-alert-contact' : '#modal-alet-demo'; 
     return $(modal_to_show).modal('show'); 
    }); 

    myform.on('ajax:error', function(e, xhr, status, error) { 
     var fields; 
     if ($(this).data('model-name') === 'contact') { 
      fields = $('.alert-contact-fields'); 
      if (xhr.responseJSON["email"]) { 
       return fields.find('messages').html(makeMessages(xhr.responseJSON)).end().removeClass('hide'); 
      } 
      return fields.addClass('hide'); 
     } 

     fields = $('.alert-demo-fields'); 
     if (xhr.responseJSON["company_name"]) { 
      return fields.find('.messages').html(makeMessages(xhr.responseJSON)).end().removeClass('hide'); 
     } 
     return fields.addClass('hide'); 
    }); 
}); 

makeMessages является функция, которая принимает объект JSON и возвращает набор строк; map() является гораздо лучшей функцией для этого, чем каждый(), поскольку для сохранения значений не требуется промежуточного массива.

Обработчик «success» показывает использование «тройного оператора», также известного как условное выражение. Вы хотите узнать, какой модальный способ показать: вот как вы его выбираете, а затем есть одна и только одна операция «показать». Это проще для отладки.

Для обработчика ошибок каждый раз, когда вы устанавливаете сообщения, вы просто вызываете makeMessages() с помощью JSON и возвращаете массив строк, который вы хотите. Поскольку вы должны были найти поле сообщений внутри полей alert - * -, я вызываю end(), который возвращает текущий контекст jquery назад один поиск (от «find» до исходного вызова $()), а затем вызывает «show», на нем вместо этого.

Поскольку вы называете «возвращение» в конце выбранной успешной операции, нет необходимости вообще в операторах «else». Это шум. Либо ваш код делает свою вещь, либо проваливается на следующий этап.

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

Если вы хотите получить безумно плотную информацию о том, над чем работаете, приложите все решения к вершине (над чем работать, что показывать) и сделать остальную часть кода чистым оборудованием, «как» частью вашего кода. Обработчик «ошибка» становится это:

myform.on('ajax:error', function(e, xhr, status, error) { 
     var handler = (($(this).data('model-name') === 'contact') ? 
         { 'fieldclass': '.alert-contact-fields', 'objname': 'email' } : 
         { 'fieldclass': '.alert-demo-fields', 'objname': 'company_name' }); 

     var fields = $(handler.fieldclass); 
     if (xhr.responseJSON[handler.objname]) { 
      return fields.find('.messages').html(makeMessages(xhr.responseJSON)).end().removeClass('hide'); 
     } 
     return fields.addClass('hide'); 
    }); 

В этот момент «makeMessages()» просто становится приятно, удобная функция, поскольку она показывает (! И имена Хорошие имена всегда важны для технического обслуживания), что вы делаете с объектом JSON.

Один (ну, два) последние альтернативы:

myform.on('ajax:error', function(e, xhr, status, error) { 
     var drawResults = function(fieldclass, objname) { 
      var fields = $(fieldclass); 
      if (xhr.responseJSON[objname]) { 
       return fields.find('messages').html(makeMessages(xhr.responseJSON)).end().removeClass('hide'); 
      } 
      return fields.addClass('hide'); 
     }; 

     return ($(this).data('model-name') === 'contact' ? 
       drawResults('.alert-contact-fields', 'email') : 
       drawResults('.alert-data-fields', 'company_name')); 

     /* Absolutely minimal alternative, but some people find 
     * using the apply method obfuscating. */ 

     return drawResults.apply(this, $(this).data('model-name') === 'contact' ? 
           ['.alert-contact-fields', 'email'] : 
           ['.alert-data-fields', 'company_name']); 
    }); 

Вместо использования полей и решений фронт, это ставит все на принятие решений в конце концов, и описывает то, что произойдет после того, как решение будет принято до фронт. Это использует более привычный синтаксис вызова функции. Важно заметить, что drawResults() имеет доступ к объекту XHR уже, так что нет необходимости передавать его.

последнее возможно экстракция превратить $(this).data('model-name') === 'contact' в функцию, как isDemo(), так что код только происходит один раз и также хорошо известен.