javascript - Bagaimana untuk melaksanakan pembolehubah statik dalam js

Question

<button type="button" onclick="func();">按钮</button>

var i = 0;
func(){
    i += 1;
    console.log(i)
}

Keperluan: Klik pembolehubah butang untuk meningkat sebanyak 1. Cari jalan terbaik untuk mencapainya.
Untuk menambah, terdapat banyak cara untuk mencapainya.

1. Simpan terus ke dalam pembolehubah global - mencemarkan ruang nama global

2. Gunakan tatasusunan global untuk menyimpan pembolehubah global apl semasa - tidak mematuhi seni bina semasa

3. Penutupan - nampaknya tidak menyesuaikan diri dengan adegan semasa (gunakan onclick untuk mencetuskan fungsi)

4. Dilabuhkan ke dalam elemen html - masih sangat rendah

5. Menggunakan fungsi tanpa nama yang besar untuk memanjangkan hayat pembolehubah - tidak mematuhi seni bina semasa

Answer 1

Siapa kata penutupan tidak terpakai?

var func = (function(){
var i = 0;
return function(){
    i++;
    console.log(i);
}

}());

Atau anda boleh lakukan ini:

var func = function(){
    func.i++;
    console.log(func.i);
};
func.i = 0;

Answer 2

Disimpan dalam atribut nod dom

<button data-click-number="0" type="button" id="incBtn" >按钮</button>

$("#incBtn").on('click',function(){
 var preClickNumber=$(this).attr('data-click-number') ?: 1;
 $(this).attr('data-click-number',preClickNumber++);
});

Answer 3

js tidak mempunyai pembolehubah statik. Terdapat hanya pembolehubah tempatan dan pembolehubah global.

<button type="button" onclick="++i">按钮</button>

var i = 0;

Answer 4

Tidak menggunakan let?

Answer 5

Penutupan sangat popular, saya cadangkan anda membaca beberapa buku tentang ungkapan fungsi JavaScript. Ini juga merupakan ciri utama JavaScript

let click = (() => {
    var i = 0;
    return function() {
      i += 1;
      console.log(i)
    }
})()