Artikel ini menjelaskan metode menerapkan tabel Excel dengan kurang dari 30 baris kode JS. Dapat dilihat bahwa jQuery tidak dapat digantikan. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:
Seorang programmer asing menunjukkan aplikasi tabel Excel yang ditulis oleh JS asli dan tidak bergantung pada perpustakaan pihak ketiga, dengan fitur-fitur berikut:
① Diimplementasikan oleh kurang dari 30 baris kode JavaScript asli
② Tidak ada ketergantungan pada perpustakaan pihak ketiga
③ Analisis semantik gaya Excel (formula dimulai dengan "=")
④ Dukung ekspresi apa pun (= A1+B2*C3)
⑤ Cegah referensi melingkar
⑥ Penyimpanan Persisten Lokal Otomatis Berdasarkan LocalStorage
Tampilan efek ditunjukkan pada gambar di bawah ini:
Analisis Kode:
CSS dihilangkan, HTML Core hanya satu baris:
Salin kode sebagai berikut: <able> </able>
Kode JavaScript adalah sebagai berikut:
Salin kode sebagai berikut: untuk (var i = 0; i <6; i ++) {
var row = document.QuerySelector ("Tabel"). 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"));
Inputs.foreach (function (elm) {
elm.onfocus = function (e) {
E.Target.Value = LocalStorage [e.target.id] || "";
};
elm.onblur = function (e) {
localstorage [e.target.id] = e.target.value;
computeAll ();
};
var getter = function () {
var value = localstorage [elm.id] || "";
if (value.charat (0) == "=") {
dengan (data) return eval (value.substring (1));
} else {return isnan (parsefloat (value))? nilai: parsefloat (nilai); }
};
Object.defineproperty (data, elm.id, {get: getter});
Object.defineproperty (data, elm.id.tolowercase (), {get: getter});
});
(window.computeAll = function () {
Inputs.foreach (function (elm) {coba {elm.value = data [elm.id];} catch (e) {}});
}) ();
Bahkan, melalui artikel di atas, kita dapat melihat bahwa langkah -langkah inti paling menggunakan fitur Emeascript5 dan HTML5, seperti:
QuerySelectorall: Memberikan kueri yang mirip dengan pemilih jQuery. Dapat dilihat bahwa perpustakaan JS pihak ketiga seperti jQuery belum tentu jumlah besar.
Salinan kode adalah sebagai berikut: var cocok = document.queryselectorall ("div.Note, div.alert");
DefinEproperty menyediakan kelas dengan metode preprocessing GET dan Set Access/Set Java, serta beberapa properti konfigurasi lainnya, seperti: apakah itu dapat dikonfigurasi, dapat dihitung, dll.
Salinan kode adalah sebagai berikut: object.defineproperty (o, "b", {get: function () {return bvalue;},
set: function (newValue) {bvalue = newValue; },
Hancur: Benar,
dapat dikonfigurasi: true});
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.