javascript - 如何让这个多余的javascript更加高效？

Question

已关闭。此问题不符合 Stack Overflow guidelines 。目前不接受答案。

---

这个问题似乎与 help center 中定义的范围内的编程无关。 .

已关闭 9 年前。

Improve this question

我正在使用 jQuery 对 Rails 表单进行 ajax 验证。下面的脚本工作得很好，但我知道有一种方法可以通过声明字段名称和错误消息字符串，然后使脚本运行列表来使其更有效，但我还不够成熟，无法编写它。

重写它的正确方法是什么？

$( '.sendername' ).blur(function() {
  if ($('.sendername').val() == "") {
      $('.sendername-err').text('This field is required.');
      $('.sendername').addClass('invalid');
  } else {
    $('.sendername-err').text('');
    $('.sendername').removeClass('invalid');
  }
});

$( '.email' ).blur(function() {
  if ($('.email').val() == "") {
      $('.email-err').text('You've forgotten this.');
      $('.email').addClass('invalid');
  } else {
    $('.email-err').text('');
    $('.email').removeClass('invalid');
  }
});

$( '.subject' ).blur(function() {
  if ($('.subject').val() == "") {
      $('.subject-err').text('Please enter a value.');
      $('.subject').addClass('invalid');
  } else {
    $('.subject-err').text('');
    $('.subject').removeClass('invalid');
  }
});

$( '.message' ).blur(function() {
  if ($('.message').val() == "") {
      $('.message-err').text('Zero characters is too short.');
      $('.message').addClass('invalid');
  } else {
    $('.message-err').text('');
    $('.message').removeClass('invalid');
  }
});

我问这个问题是因为我想了解如何编写更好的 JavaScript。类似的情况经常出现，这让我很抓狂。

Answer 1

您的标记看起来不够一致，但您可以创建一个更一致的命名标准(使所有后缀和前缀相同 - 例如，始终使用 -name 或从不使用它)，然后使用函数:

function setup_field(name, message) { 
  $( '.'+name+'-name' ).blur(function() {
    if ($('.'+name+'-name').val() == "") {
        $('.'+name+'-err').text(message);
        $('.'+name+'-name').addClass('invalid');
    } else {
      $('.'+name+'-err').text('');
      $('.'+name+'-name').removeClass('invalid');
    }
  });
}

然后你只需为每个字段调用它即可:

setup_field('sender', 'This field is required.');
setup_field('email', "You've forgotten this.");
setup_field('subject', 'Please enter a value.');
setup_field('message', 'Zero characters is too short.');

重点当然是使用函数。您甚至可以使其足够灵活，只需向函数签名添加更多变量即可根据需要以不同的方式定义每个类； setup_field(field_class, err_class, message)，然后在适当的情况下将这些变量插入到上述函数中。但这会使您的设置区域更加冗长。