帮助从 ajax 调用重构 jquery 片段

Question

我正在尝试重构此代码。我有这个 jquery ajax 调用

    $.ajax({
       url: 'addMember',
       type: 'post',
       data: data,
       dataType: 'json',
       success: function(msg) {                                             
        if(msg.validate === false) {    // if there are validation errors...
                if(msg.firstName != '') {
                    $('input[name="firstName"]').parents('p').before(msg.firstName);
                    $('input[name="firstName"]').parents('p').prev('p').addClass('message error');
                    $('input[name="firstName"]').addClass('error');
                    $('input[name="firstName"]').after('<span class="check-error"></span>');
                }
                if(msg.lastName != '') {
                    $('input[name="lastName"]').parents('p').before(msg.lastName);
                    $('input[name="lastName"]').parents('p').prev('p').addClass('message error');
                    $('input[name="lastName"]').addClass('error');
                    $('input[name="lastName"]').after('<span class="check-error"></span>');
                }
                if(msg.email != '') {
                    $('input[name="email"]').parents('p').before(msg.email);
                    $('input[name="email"]').parents('p').prev('p').addClass('message error');
                    $('input[name="email"]').addClass('error');
                    $('input[name="email"]').after('<span class="check-error"></span>');
                }
         }
    .......etc

我试过这样做，但是没有用

$.each(msg, function(k, v)) {
    console.log('msg.k = '+msg.k);
});

建议？

Answer 1

jQuery 的做法是链接您的方法调用，并避免不断地从 DOM 中重新选择相同的元素。

改变这个：

$('input[name="firstName"]').parents('p').before(msg.firstName);
$('input[name="firstName"]').parents('p').prev('p').addClass('message error');
$('input[name="firstName"]').addClass('error');
$('input[name="firstName"]').after('<span class="check-error"></span>');

进入这个：

$('input[name="firstName"]')
 .addClass('error')
 .after('<span class="check-error"></span>')
 .parents('p').before(msg.firstName)
   .prev('p').addClass('message error');

其次，看起来您只是用三个不同的值执行了 3 次相同的操作。这暗示了一个循环：

if(msg.validate === false) {    // if there are validation errors...
  $(['firstName', 'lastName', 'email']).each(function (i, e) {
    if (msg[e] != '') {
      $('input[name="' + e + '"]')
       .addClass('error')
       .after('<span class="check-error"></span>')
       .parents('p').before(msg[e])
         .prev('p').addClass('message error');
    }
  }
}