jquery - 避免重复 jQuery 代码

Question

如果我有如下所示的代码，有什么方法可以避免一遍又一遍地重复代码？

 $("#ClearSign1").click(function () {
    signaturePad1.clear();
 });
 $("#ClearSign2").click(function () {
    signaturePad2.clear();
 });
 $("#ClearSign3").click(function () {
    signaturePad3.clear();
 });
 $("#ClearSign4").click(function () {
    signaturePad4.clear();
 });
 $("#ClearSign5").click(function () {
    signaturePad5.clear();
 });

我可以做到这一点:

 for(var i = 1; i < 6; i++) {
    $("#ClearSign" + i).click(function () {
       signaturePad1.clear();
    });
 }

但是我该如何处理signaturePad1变量呢？我需要它在循环时将 1 更新为 2、3、4、5。

Answer 1

But how do I handle the signaturePad1 variable? I need it to have the 1 updated to 2, 3, 4, 5 as looping through.

好吧，在不更改大部分代码的情况下清理此问题的最明显方法是使用 bracket notation 在其作用域范围内的对象上调用 signaturePad# 方法。 。在最外层的范围内，即 window 对象:

ES5 解决方案:您必须将调用包装在 IIFE 中，这将为 closure 内的每个回调正确维护 i 的值。该 IIFE 的。

for(var i = 1; i < 6; i++) {
  $("#ClearSign" + i).click(function () {
   (function(idx) {
     // in here idx is always the proper i value
     window['signaturePad' + idx].clear();
   })(i); 
  });
}

或者您可以创建一个 clearSign 函数数组并使用 forEach，这将保持适当的范围。或者创建一个点击回调数组，如 Pranav C Balan显示。

ES6解决方案:(使用let而不是var):

for(let i = 1; i < 6; i++) {
  $("#ClearSign" + i).click(function () {
     window['signaturePad' + i].clear();
  });
}

使用 let 使 i 在循环 block 内 block 作用域。这可以正确捕获回调的值并防止我们污染全局范围。更不用说，它使代码更具可读性和简洁性 - 嵌套 IIFE 内部的 for 循环并没有真正增加代码清晰度，而且可能会导致困惑。