Question

我实际上是在做一个关于HTML5表单和自定义UI界面验证更新的非常简单的示例。我在行为方面非常接近结果，但是我的JS代码中有一些细节。

基本上我将输入事件附加到所有表单的输入元素。回调函数只是检查当前元素的有效性，并应用自定义类来对元素进行“实时”设置样式。

我面临的唯一问题是我需要将当前元素传递给事件处理程序中的回调函数的参数。因为我需要将此事件附加到每个输入元素，我正在使用for循环。

我得到了jslint警告：不要在循环中创建函数。

我不知道如何解决这个问题（我明白这意味着什么）。我不知道在不使用匿名函数的情况下将元素作为参数传递给回调函数。

所以问题是：如何将当前元素作为参数传递给外部函数来解决jslint警告。

如果某人有更好的方法来处理它并且可以将其更正为更高效的代码，那将非常受欢迎。这个例子可以在以后为一些学生服务。

这是一个codepen：http://codepen.io/anon/pen/bGDsB

Answer 1

您可以直接将check()传递给check，而不是定义一个只调用addEventListener()的新功能：

  for (var i=0; i<inputs.length; i++) {
      inputs[i].addEventListener('input', check);
  }

然后，您可以稍微更改check()以解释此问题：

  function check(e) {
      var elm = e.srcElement;
      ...
  }

我没有针对jsLint对此进行测试，但它确实避免在循环的每次迭代中创建一个新函数。

Answer 2

您的案例可以通过替换for循环并添加函数来解决：

for (var i=0; i<inputs.length; i++) {
    attachCheck(inputs[i]);
}
function attachCheck(inp) {
    inp.addEventListener('input', function() {
        check(this);
    });
}

修改check()以使用this会不会更好，例如：

function check() {
    if(this.value.length) {
        // ... all elm replaced by this ...
}

循环：

for (var i=0; i<inputs.length; i++) {
    inputs[i].addEventListener('input', check);
}

将当前元素作为参数传递给循环内的回调函数

2 个答案: