在不使用全局作用域的情况下，单击将数字推送到Array

Push numbers to Array on click without using global Scope

本文关键字：数字 单击 Array 情况下 全局 作用域      更新时间：2023-09-26

我知道下面是完全可行的:

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);
}

不增加数组的值。

我知道现在内联点击事件被认为是一个不好的做法，但它是为了学习的目的。这里的所有其他答案都将数组引用为全局作用域，这是我试图避免的。

Edit: Ok，如果以上不可能，任何避免使用全局作用域的答案都是有效的。

你可以使用一个自调用函数来创建一个局部作用域，然后你可以使用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

可以使用自调用函数实现。这样，numberArray将在该函数的作用域中，并且方法addNumber将被暴露为全局。

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

恐怕没有——至少没有一个不违背您编写更好代码的目标。在addNum()中声明numberArray意味着每次调用该函数时都会创建、初始化和销毁它。我建议您使用全局作用域选项。但是，如果由于某些项目要求，您必须使用其他答案提供的选项，请这样做。

相关文章：