Bagaimana untuk melaksanakan jadual Excel dalam kurang daripada 30 baris kemahiran JS code_javascript

Contoh dalam artikel ini menerangkan cara melaksanakan jadual Excel dengan kurang daripada 30 baris kod JS Ia dapat dilihat bahawa jQuery tidak boleh digantikan. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Seorang pengaturcara asing menunjukkan aplikasi hamparan Excel yang ditulis dalam JS asli yang tidak bergantung pada perpustakaan pihak ketiga Ia mempunyai ciri berikut:

① Dilaksanakan oleh kurang daripada 30 baris kod JavaScript asli
② Tidak bergantung pada perpustakaan pihak ketiga
③ Analisis semantik gaya Excel (formula bermula dengan "=")
④ Menyokong sebarang ungkapan (=A1 B2*C3)
⑤ Cegah rujukan bulat
⑥ Storan berterusan tempatan automatik berdasarkan LocalStorage

Kesannya ditunjukkan di bawah:

Analisis kod:

CSS ditinggalkan, hanya satu baris teras HTML:

Salin kod Kod adalah seperti berikut:

Kod JavaScript adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

untuk (var i=0; i<6; i) {
var row = document.querySelector("table").insertRow(-1);
untuk (var j=0; j<6; j ) {
      var letter = String.fromCharCode("A".charCodeAt(0) j-1);
            row.insertCell(-1).innerHTML = i&&j ? "" : i||letter;
}
}
var DATA={}, INPUT=[].slice.call(document.querySelectorAll("input"));
INPUT.forEach(fungsi(elm) {
​ elm.onfocus = fungsi(e) {
         e.target.value = localStorage[e.target.id] || "";
};
elm.onblur = fungsi(e) {
LocalStorage[e.target.id] = e.target.value;
         computeAll();
};
var getter = function() {
          nilai var = localStorage[elm.id] || Jika (value.charAt(0) == "=") {
Dengan (DATA) return eval(value.substring(1));
              } else { return isNaN(parseFloat(value)) ? };
Object.defineProperty(DATA, elm.id, {get:getter});
Object.defineProperty(DATA, elm.id.toLowerCase(), {get:getter});
});
(window.computeAll = function() {
INPUT.forEach(function(elm) { try { elm.value = DATA[elm.id]; } catch(e) {} });
})();

Malah, daripada perkara di atas kita dapat melihat bahawa langkah teras menggunakan ciri EMEAScript5 dan HTML5, seperti:

querySelectorAll: Menyediakan pertanyaan yang serupa dengan pemilih jQuery Dapat dilihat bahawa perpustakaan JS pihak ketiga seperti jQuery tidak penting.

Salin kod Kod adalah seperti berikut:var padanan = document.querySelectorAll("div.note, div.alert ");

defineProperty menyediakan kelas dengan Java get dan tetapkan kaedah prapemprosesan akses/tetapan, serta sifat konfigurasi lain, seperti: sama ada ia boleh dikonfigurasikan, boleh dikira, dsb.

Salin kod Kod adalah seperti berikut:Object.defineProperty(o, "b", {get : function( ){ kembalikan bNilai },

set: function(newValue){ bValue = newValue },

enumerable : benar,
Boleh dikonfigurasikan : benar});

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.