บทความนี้อธิบายวิธีการใช้ตาราง Excel ที่มีรหัส JS น้อยกว่า 30 บรรทัด จะเห็นได้ว่า jQuery ไม่สามารถถูกแทนที่ได้ แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
โปรแกรมเมอร์ต่างประเทศแสดงให้เห็นถึงแอปพลิเคชันตาราง Excel ที่เขียนโดย JS ดั้งเดิมและไม่พึ่งพาห้องสมุดบุคคลที่สามด้วยคุณสมบัติดังต่อไปนี้:
①ดำเนินการโดยรหัส JavaScript แบบดั้งเดิมน้อยกว่า 30 บรรทัด
②ไม่มีการพึ่งพาห้องสมุดบุคคลที่สาม
③การวิเคราะห์ความหมายสไตล์ Excel (สูตรเริ่มต้นด้วย "=")
④สนับสนุนนิพจน์ใด ๆ (= A1+B2*C3)
⑤ป้องกันการอ้างอิงแบบวงกลม
⑥พื้นที่เก็บข้อมูลแบบถาวรในพื้นที่โดยอัตโนมัติตาม LocalStorage
การแสดงผลเอฟเฟกต์จะแสดงในรูปด้านล่าง:
การวิเคราะห์รหัส:
CSS ถูกละเว้น HTML Core เป็นเพียงบรรทัดเดียว:
คัดลอกรหัสดังนี้: <bable> </bable>
รหัส JavaScript มีดังนี้:
คัดลอกรหัสดังนี้: สำหรับ (var i = 0; i <6; i ++) {
var row = document.QuerySelector ("ตาราง"). inserTrow (-1);
สำหรับ (var j = 0; j <6; j ++) {
ตัวอักษร var = string.fromCharcode ("a". charcodeat (0)+j-1);
row.insertcell (-1) .innerhtml = i && j? "": ฉัน || จดหมาย;
-
-
var data = {}, อินพุต = []. slice.call (document.querySelectorAll ("อินพุต"));
inputs.foreach (ฟังก์ชั่น (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) == "=") {
ด้วย (data) return eval (value.substring (1));
} else {return isnan (parsefloat (ค่า))? ค่า: parsefloat (ค่า); -
-
Object.defineProperty (data, elm.id, {get: getter});
Object.defineProperty (ข้อมูล, elm.id.toLowercase (), {get: getter});
-
(window.ComputeAll = function () {
inputs.foreach (ฟังก์ชั่น (elm) {ลอง {elm.value = data [elm.id];} catch (e) {}});
-
ในความเป็นจริงผ่านบทความข้างต้นเราจะเห็นว่าขั้นตอนหลักส่วนใหญ่ใช้คุณสมบัติของ Emeascript5 และ HTML5 เช่น:
QuerySelectorall: ให้แบบสอบถามคล้ายกับตัวเลือก jQuery จะเห็นได้ว่าห้องสมุด JS ของบุคคลที่สามเช่น jQuery ไม่จำเป็นต้องเป็นจำนวนมาก
การคัดลอกรหัสมีดังนี้: var matches = document.QuerySelectorall ("div.note, div.alert");
DefinEproperty ให้คลาสที่มีวิธีการรับและตั้งค่าการเข้าถึง/ตั้งค่าวิธีการประมวลผลล่วงหน้าของ Java รวมถึงคุณสมบัติการกำหนดค่าอื่น ๆ เช่น: ไม่ว่าจะสามารถกำหนดค่าได้
การคัดลอกรหัสมีดังนี้: object.defineproperty (o, "b", {get: function () {return bvalue;},
ชุด: ฟังก์ชั่น (newValue) {bvalue = newValue; -
enumerable: จริง
สามารถกำหนดค่าได้: จริง});
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน