javascript:何时在窗口对象上存储变量

Question

在Chrome控制台内的任意部分，我在一个随机的现有网站上接受采访时，不得不使用vanilla javascript构建一个简单的点击计数器。我还不知道我是怎么做到的，但有什么方法可以改进吗？我想不出除了用窗户的物体来固定柜台之外还有什么别的了。这样做不好吗？在我做这件事的时候，这似乎是一个正确的选择……只需在控制台中运行一个自调用函数，该函数会添加一个点击侦听器，并将一个clickIt函数附加到其中，该函数在内部定义。

(function addingClickCounter() {
let element = document.getElementById('itemList');
element.addEventListener('click', clickIt);
function clickIt() {
if (window.counter) {
window.counter = 0
}
window.counter++;
console.log(window.counter);
}
})();

Answer 1

只需将变量存储在addingClickCounter闭包中就可以很容易地避免全局污染：

(function addingClickCounter() {
let element = document.getElementById('itemList');
element.addEventListener('click', clickIt);
let counter = 0;
function clickIt() {
counter++;
console.log(counter);
}
})();

通常，只有当需要在完全独立的脚本之间进行通信时，或者当库自动进行通信以公开命名空间对象时(如jQuery和React(，才需要有意设置全局对象的属性。除非处理脚本间通信，否则通常可以避免全局属性。