変数をグローバル変数からローカル変数に移動する方法

Question

私の簡単なテストプログラムは、数値を正しく加算したり減算したりします。しかし、グローバル変数counterをローカル変数に変換したいと思います。私は論理的にこれを行う方法を見ることができず、プログラムを実行し続けます。 counterは、addNumberまたはsubtractNumberクロージャからのみアクセスできるように配置する方法はありますか？本当にありがとう！

'use strict'; 
 
\t 
 
var counter; 
 
counter = 0; 
 
\t 
 
document.getElementsByClassName('box')[0].addEventListener('click', addNumber); 
 
document.getElementsByClassName('box')[1].addEventListener('click', subtractNumber); 
 
document.getElementsByClassName('box_answer')[0].textContent = 'The answer is ' +counter; 
 

 
function calculateNumber(x) { 
 
    counter += x; 
 
    displayNumber(); 
 
} 
 
\t 
 
function displayNumber() { 
 
    document.getElementsByClassName('box_answer')[0].textContent = 'The answer is ' +counter; 
 
} 
 
\t 
 
function addNumber() { 
 
    calculateNumber(1); \t \t 
 
} 
 
\t 
 
function subtractNumber() { 
 
    calculateNumber(-1); \t 
 
}

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 2rem; 
 
    font-family: sans-serif; 
 
} 
 
\t 
 
.box { 
 
    margin-bottom: 20px; 
 
    padding: 10px; 
 
    color: white; 
 
    background-color: blue; 
 
} 
 

 
.box_answer { 
 
    padding: 10px; 
 
    background-color: orange; 
 
}

<div class="box">addNumber</div> 
 
<div class="box">subtractNumber</div> 
 
<div class="box_answer"></div>

Answer 1

それを行う方法は、コードのすべてを取ると、あなたはいつもとにかくやるために努力すべきグローバルスコープの外にそれを得るためです。これは一般に、すべてのコードを即時呼び出し関数式でラップすることによって行われます。

また、加算と減算のための別の関数は必要ありません。各クリックイベントハンドラに単一の関数を呼び出し、その関数に使用する値を渡すだけです。

最後に、あなたが特定のユースケースを持っていない限り、のようなDOM API呼び出しを避ける：

• .getElementsByNameを（）
• .getElementsByTagName（）
• .getElementsByClassName（）

それらはすべて「ライブ」ノードリストを返します。これにより、コード内でノードリストが参照されるたびにDOM全体が一致する要素に対して再スキャンされます。これにより、パフォーマンスが大幅に低下する可能性があります。代わりに、より近代的なを使用します。

• .querySelector（）
• .querySelectorAll（）

と、当然の：

• .getElementById（）

これらの3つのAPIは、DOMクエリのニーズのほとんどを処理します。

(function(){ 
 
    'use strict'; 
 
\t 
 
    // .getElementsByClassName returns a "live" node list, which is not recommended 
 
    // for most use cases because it requires re-scanning the DOM every time the node 
 
    // list is used. querySelector() and .querySelectorAll() are the modern successors 
 
    // to that. 
 
    var answer = document.querySelector('.box_answer'); 
 
    
 
    // Find box by its unique class (or id) so that you don't scan the entire DOM only to 
 
    // throw away all found elements but the one you want: 
 
    document.querySelector('.box.add').addEventListener('click', function() { doMath(1); }); 
 
    document.querySelector('.box.subtract').addEventListener('click', function() { doMath(-1); }); 
 

 
    var counter = 0; 
 

 
    function doMath(x) { 
 
    counter += x; 
 
    displayNumber(); 
 
    } 
 
\t 
 
    function displayNumber() { 
 
    answer.textContent = 'The answer is ' + counter; 
 
    } 
 
\t 
 
})();

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 2rem; 
 
    font-family: sans-serif; 
 
} 
 
\t 
 
.box { 
 
    margin-bottom: 20px; 
 
    padding: 10px; 
 
    color: white; 
 
    background-color: blue; 
 
    cursor:pointer; /* Change pointer to let user know they can click */ 
 
    
 
    /* Prevent text in element from being selected. Helps when lots of clicking happens. */ 
 
    user-select:none; 
 
} 
 

 
.box_answer { 
 
    padding: 10px; 
 
    background-color: orange; 
 
}

<div class="box add">addNumber</div> 
 
<!-- Give each box a different class (or id) to differentiate one from the other. --> 
 
<div class="box subtract">subtractNumber</div> 
 
<div class="box_answer">The answer is:</div>

Answer 2

あなたはIIFE (immediately-invoked function expression)のinide変数と関数のすべてを移動することができます。

'use strict'; 
 
\t 
 
void function() { 
 
    function calculateNumber(x) { 
 
     counter += x; 
 
     displayNumber(); 
 
    } 
 
\t 
 
    function displayNumber() { 
 
     document.getElementsByClassName('box_answer')[0].textContent = 'The answer is ' +counter; 
 
    } 
 
\t 
 
    function addNumber() { 
 
     calculateNumber(1); \t \t 
 
    } 
 
\t 
 
    function subtractNumber() { 
 
     calculateNumber(-1); \t 
 
    } 
 

 
    var counter = 0; 
 

 
    document.getElementsByClassName('box')[0].addEventListener('click', addNumber); 
 
    document.getElementsByClassName('box')[1].addEventListener('click', subtractNumber); 
 
    document.getElementsByClassName('box_answer')[0].textContent = 'The answer is ' + counter; 
 
}();

body { margin: 0; padding: 0; font-size: 2rem; font-family: sans-serif; } 
 
.box { margin-bottom: 20px; padding: 10px; color: white; background-color: blue; } 
 
.box_answer { padding: 10px; background-color: orange; }

<div class="box">addNumber</div> 
 
<div class="box">subtractNumber</div> 
 
<div class="box_answer"></div>