Question

我知道以下内容非常可行：

var numberArray = [];

function addNumber(number) {
  numberArray.push(number);
}

然后：

<input type="button" value="Save" onclick="addNum(10);">
<input type="button" value="Save" onclick="addNum(990);">
...

但是，对于更好的代码，是否有可能将我的数组和我的操作同时放在同一个函数上，然后在click事件中触发它，从而填充我的数组？问，因为，这样做：

function addNumber(number) {
  var numberArray = [];
  numberArray.push(number);
}

不会增加数组值。

我知道内联点击事件现在是一种不好的做法，但它是出于学习目的。这里的所有其他答案都将数组作为全局范围引用，这正是我想要避免的。

编辑：如果无法执行上述操作，则无效，任何避免全局范围使用的答案都有效。

Answer 1

您可以使用Self-Invoking Function来创建本地范围，然后可以使用onclick指令添加eventListeners。

(function () {
   var numberArray = [];

   function addNumber() {
       var child = this;
       var number = parseInt(child.getAttribute('data-number'), 10);

       numberArray.push(number);
       console.log(numberArray);
   }

   var _elms = document.getElementsByClassName('add-number-input');

   for (var i = 0; i < _elms.length; i++)
       _elms[i].addEventListener('click', addNumber);
})();

在您的输入中添加.add-number-input课程：

<input class="add-number-input" data-number="10" ...>
<input class="add-number-input" data-number="990" ...>

现在你的数组和你的函数都不在全局范围内。

http://codepen.io/rdsedmundo/pen/EgKGXK

Answer 2

可以使用自调用功能来实现。这样numberArray将在该函数的范围内，方法addNumber将公开为全局。

(function(){
    var numberArray = [];
    window.addNumber = function(number) {
        numberArray.push(number);
    }
})();

Answer 3

我担心没有 - 至少没有一个不能破坏你编写更好的代码的目标。在addNum（）中声明numberArray意味着每次调用函数时都会创建，初始化和销毁它。我建议您使用全局范围选项。但是，如果您因某些计划要求必须使用其他答案提供的选项，请执行此操作。

单击时将数字推送到数组而不使用全局范围

3 个答案: