Javascript 代码审查？有没有办法写得更好？

我有一些密码

$(this).find('.change--button__approve').click(function(){
    if ($(this).hasClass('disabled')) {
      return false;
    } else {
      $(thisChange).attr('data-type', 'approved').attr('data-changeRule', 'once');
      $(this).parent().parent().next().find('p').attr('class','approved').addTemporaryClass('bounceIn', 500);
      $(this).parent().parent().next().find('.changeStatus').text('approved for this document');
    }
  });
  $(this).find('.change--button__approveAlways').click(function(){
    if ($(this).hasClass('disabled')) {
      return false;
    } else {
      $(thisChange).attr('data-type', 'approved').attr('data-changeRule', 'always');
      $(this).parent().parent().next().find('p').attr('class','approved').addTemporaryClass('bounceIn', 500);
      $(this).parent().parent().next().find('.changeStatus').text('approved for every document');
    }
  });;
  $(this).find('.change--button__reject').click(function(){
    if ($(this).hasClass('disabled')) {
      return false;
    } else {
      $(thisChange).attr('data-type', 'rejected').attr('data-changeRule', 'once');
      $(this).parent().parent().next().find('p').attr('class','rejected').addTemporaryClass('bounceIn', 500);
      $(this).parent().parent().next().find('.changeStatus').text('rejected for this document');
    }
  });;
  $(this).find('.change--button__rejectAlways').click(function(){
    if ($(this).hasClass('disabled')) {
      return false;
    } else {
      $(thisChange).attr('data-type', 'rejected').attr('data-changeRule', 'always');
      $(this).parent().parent().next().find('p').attr('class','rejected').addTemporaryClass('bounceIn', 500);
      $(this).parent().parent().next().find('.changeStatus').text('rejected for every document');
    }
  });;

由于代码的重复性，我认为一定有更好的方法来编写它。我还是一个js初学者，所以我很想知道如何写这个更干净/更好

---

谢谢

下面是一个优化的代码：

var _this = $(this);

_this.find('.change--button__approve').click(function() {
  var sibling, _this = $(this);

  if (_this.hasClass('disabled')) {
    return false;
  } else {
    $(thisChange).attr('data-type', 'approved').attr('data-changeRule', 'once');
    sibling = _this.parent().parent().next();
    sibling.find('p').attr('class','approved').addTemporaryClass('bounceIn', 500);
    sibling.find('.changeStatus').text('approved for this document');
  }
});

_this.find('.change--button__approveAlways').click(function() {
  var sibling, _this = $(this);

  if (_this.hasClass('disabled')) {
    return false;
  } else {
    $(thisChange).attr('data-type', 'approved').attr('data-changeRule', 'always');
    sibling = _this.parent().parent().next();
    sibling.find('p').attr('class','approved').addTemporaryClass('bounceIn', 500);
    sibling.find('.changeStatus').text('approved for every document');
  }
});

_this.find('.change--button__reject').click(function() {
  var sibling, _this = $(this);

  if (_this.hasClass('disabled')) {
    return false;
  } else {
    $(thisChange).attr('data-type', 'rejected').attr('data-changeRule', 'once');
    sibling = _this.parent().parent().next();
    sibling.find('p').attr('class','rejected').addTemporaryClass('bounceIn', 500);
    sibling.find('.changeStatus').text('rejected for this document');
  }
});

_this.find('.change--button__rejectAlways').click(function() {
  var sibling, _this = $(this);

  if (_this.hasClass('disabled')) {
    return false;
  } else {
    $(thisChange).attr('data-type', 'rejected').attr('data-changeRule', 'always');
    // Store into a variable to optimize execution speed
    sibling = _this.parent().parent().next();
    sibling.find('p').attr('class','rejected').addTemporaryClass('bounceIn', 500);
    sibling.find('.changeStatus').text('rejected for every document');
  }
});

如您所见，主要问题是在两条同时运行的线路上使用$（this）.parent（）.parent（）.next（），这会导致速度问题。通过将其存储在局部变量中，此函数链不会运行两次，并且局部变量在使用后会被删除

第二个问题（不太重要）是$（this）的重复使用，每次使用它时都需要创建一个jQuery实例。通过将其存储在局部变量

\u中，您可以根据需要随时使用，而不会导致耗时的实例化

编辑：另一种更复杂但更好的方法是：

var _this = $(this);

var details = {
  'approve': ['once', 'approved', 'approved for this document'],
  'approveAlways': ['always', 'approved', 'approved for every document'],
  'reject': ['once', 'rejected', 'rejected for this document'],
  'rejectAlways': ['always', 'rejected', 'rejected for every document']
}, keys = Object.keys(details);

for(var i = 0; i < keys.length; i++)
  // Create a lambda function to use local variable 'scope'
  (function(scope) {
    // Here is the content of 'scope' :
    // scope[0] : value of 'data-changeRule' ('once' or 'always')
    // scope[1] : value of 'data-type' and 'class' ('approved' or 'rejected')
    // scope[2] : message to display 'approved for this document'...
    _this.find('.change--button__' + scope[3]).click(function() {
      var sibling, _this = $(this);

      if (_this.hasClass('disabled')) {
        return false;
      } else {
        $(thisChange).attr('data-type', scope[1]).attr('data-changeRule', scope[0]);
        sibling = _this.parent().parent().next();
        sibling.find('p').attr('class', scope[1]).addTemporaryClass('bounceIn', 500);
        sibling.find('.changeStatus').text(scope[2]);
      }
    });
  }).call(this, details[keys[i]].concat([keys[i]])); // Call the lambda function with its informations

var\u this=$（this）；
变量详细信息={
“批准”：[“一次”、“批准”、“批准此文档”]，
“批准始终”：[“始终”、“批准”、“批准每个文档”]，
“拒绝”：[“一次”、“拒绝”、“拒绝此文档”]，
“rejectAlways”：[“always”、“rejected”、“rejected for every document”]
}，keys=Object.keys（细节）；
对于（变量i=0；i

请注意，这段代码没有尽我所能优化，但如果我优化它，它将是丑陋的

编辑2:我认为，这是完成工作的更快更好的方法：

var _this = $(this),
    keys = ['approve', 'approveAlways', 'reject', 'rejectAlways'];

for(var i = 0; i < keys.length; i++)
  // Create a lambda function to use local variable 'scope'
  (function(name) {
    _this.find('.change--button__' + name).click(function() {
      var sibling, _this = $(this),
          approve = (name.indexOf('approve') !== -1 ? 'approved' : 'rejected'), // Is the button an approving or rejecting button ?
          always  = (name.indexOf('Always') !== -1); // Is the button setting always or only for THIS document ?

      if (_this.hasClass('disabled')) {
        return false;
      } else {
        $(thisChange).attr('data-type', approve).attr('data-changeRule', (always ? 'always' : 'once'));
        sibling = _this.parent().parent().next();
        sibling.find('p').attr('class', approve).addTemporaryClass('bounceIn', 500);
        sibling.find('.changeStatus').text(approve + ' for ' + (always ? 'every' : 'this') + ' document');
      }
    });
  }).call(this, keys[i]); // Call the lambda function with its informations

var\u this=$（this），
键=[“批准”、“始终批准”、“拒绝”、“始终拒绝”]；
对于（变量i=0；i

只存储了几个字符串，您的函数
\u就是这个。find（'.change--button\uu…'）。click（
只写一次，循环多次运行。如果您想添加按钮，只需将它们的名称添加到数组
键中即可

我希望我能帮助您：）
尝试存储您的字符串

'.change--button__approve', '.change--button__approveAlways',...

像这样排列

var strings = new Array('.change--button__approve', '.change--button__approveAlways', '.change--button__reject','.change--button__rejectAlways');

并使用for循环以避免代码重复：

for(int i=0; i<strings.length;i++){
    $(this).find(strings[i]).click(function(){
        ... 
    }
}

for（int i=0；i删除单行if语句的括号是一个优先考虑的问题。仅仅因为它是可能的并不意味着你应该这样做。你是对的，但它允许有一个更干净的代码（我认为）再次强调，这是个人偏好。我不会在代码审查中提到它，因为它在客观上不正确。我认为用括号阅读会更舒服。好的，我将删除lambda函数定义为函数，如这里所示。anymous函数没有名称，如这里所示。所以这个函数是lambda和匿名的。有一个堆栈交换；）很好！我会把未来的请求发到那里。