javascript - 在不使用全局范围的情况下单击将数字推送到数组

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);">
...

但是，为了获得更好的代码，是否有可能让我的数组和我的操作都作用于同一个函数，然后在单击事件时触发它，从而填充我的数组？询问是因为，这样做:

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