تصف هذه المقالة طريقة تنفيذ جداول Excel مع أقل من 30 سطرًا من رمز JS. يمكن أن نرى أن jQuery لا يمكن الاستغناء عنه. شاركه للرجوع إليه. التحليل المحدد هو كما يلي:
أظهر مبرمج أجنبي تطبيق Excel Table الذي كتبه Native JS ولا يعتمد على مكتبات الطرف الثالث ، مع الميزات التالية:
① تنفذها أقل من 30 سطرًا من رمز JavaScript الأصلي
② لا يوجد اعتماد على مكتبات الطرف الثالث
③ تحليل الدلالي على غرار Excel (تبدأ الصيغة بـ "="
④ دعم أي تعبير (= A1+B2*C3)
⑤ منع المراجع الدائرية
⑥ تخزين مستمر محلي تلقائي بناءً على LocalStorage
يظهر شاشة التأثير في الشكل أدناه:
تحليل الكود:
تم حذف CSS ، HTML Core هو سطر واحد فقط:
انسخ الرمز على النحو التالي: <table> </table>
رمز JavaScript كما يلي:
انسخ الرمز كما يلي: لـ (var i = 0 ؛ i <6 ؛ i ++) {
var row = document.queryselector ("table"). inserTrow (-1) ؛
لـ (var j = 0 ؛ j <6 ؛ j ++) {
var letter = string.fromcharcode ("a" .CharCodeat (0)+J-1) ؛
row.insertcell (-1) .innerhtml = i && j؟ "": أنا || رسالة ؛
}
}
var data = {} ، المدخلات = []
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) == "=") {
مع (البيانات) إرجاع eval (value.substring (1)) ؛
} آخر {return isnan (parsefloat (value))؟ القيمة: parsefloat (القيمة) ؛ }
} ؛
Object.DefineProperty (البيانات ، elm.id ، {get: getter}) ؛
Object.DefineProperty (البيانات ، elm.id.toLowerCase () ، {get: getter}) ؛
}) ؛
(window.computeall = function () {
inputs.foreach (function (elm) {try {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 ؛ } ،
التعداد: صحيح ،
قابل للتكوين: صحيح}) ؛
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.