ابتداءً من فصل اليوم ، سأركز على تقديم محتوى إدارة الأحداث في KitJS ، وأحاول أن تكشف لك بلغة بسيطة كيف ينفذ إطار عمل JS السائد وظيفة إدارة الأحداث المستقلة الداخلية.
(ط) أحداث دوم العادية
يمكننا عمومًا كتابة الأحداث في HTML من خلال الدعم
<a onClick = "Alert (1)"> test </a>
أو ربط بعد الحصول على كائن DOM
document.getElementById ('a'). onClick = function () {Alert (1)}
أو الأحداث الثانوية
document.getElementById ('a'). addeventListener ('click' ، function () {Alert (1)} ، flase)
أو عبر علامة البرنامج النصي
<script for = "a" event = "onClick"> Alert (1) </script>
يوصي معيار W3C بالطريقة الثالثة أعلاه للربط ، وهي طريقة حدث ثانوية ، مع الغرض من فصل الاعتماد القوي لـ HTML و JS
(2) السؤال
ومع ذلك ، إذا استخدمنا الوضع 3 فقط لأداء برمجة JS مباشرة ، فهذا لا يكفي ، لأننا سنواجه المشكلات التالية
1. توافق المتصفح. معلمات المتصفح المدعومة من سلسلة IE و W3C ليست متسقة لأسماء طريقة ربط الأحداث على المستوى الثاني والمعلمات.
2. بعد الربط من خلال أحداث المستوى 2 ، لا يمكنك معرفة ما إذا كان لدى الآخرين أحداثًا إلى نفس العنصر ، أي الأحداث كانت ملزمة ، وما هو محتوى الحدث؟
3. بعد تشغيل طريقة ربط أحداث المستوى 2 ، لا يكون الترتيب بالترتيب قبل الربط ، ولكن يتم تنفيذه بشكل عشوائي. ومع ذلك ، في بعض الأحيان ، نحتاج إلى طلب الأساليب المحفوظة.
4. عندما يتم تشغيل الحدث من نفس العنصر ، لا يدعم واجهة برمجة التطبيقات القياسية لـ W3C التوقف والاستمرار في تشغيل الأحداث الأخرى المرتبطة بنفس العنصر ، ويدعم W3C إيقاف الفقاعات.
5. في كثير من الأحيان ، نقوم بتسجيل حدث من المستوى 2 من خلال طريقة وظيفة مجهولة ، ولا يوجد مقبض لتسجيل طريقة تنفيذ الحدث ، لذلك من الصعب إلغاء الحدث من خلال RemoveEventListener.
(3) كيفية حل مشكلة المجموعة
حسنًا ، يوجد إطار JS لحل المشكلات المذكورة أعلاه. دعونا نرى كيف يتعامل Kit مع المشكلات المذكورة أعلاه.
في API Kit.js ، هناك طريقة EV (التكوين)
تقبل هذه الطريقة كائن نوع الخريطة ، والذي يحتوي على 4 معلمات مهمة.
EL Element الذي يجب ربطه
نوع الحدث سلسلة
طريقة تنفيذ FN
يمكن حذف النطاق ، ما إذا كان هذا المؤشر بحاجة إلى تحديد ، إذا لم يكن أي منها ، يتم تمرير EL في وقت التسجيل كمؤشر هذا المؤشر
(رابعا) تحليل الكود
دعونا نلقي نظرة على تنفيذ الكود بشكل أكبر
ابدأ مباشرة من الجزء الأساسي
إذا لم تكن المعلمة الواردة فارغة ، فسيتم إنشاء كائن على المعلمة الواردة EL لحفظ تسجيل الحدث لـ KITJS adg
هناك كائنان طفلان في كائن EVREG ، يسمى أحدهما EVREGEV ، والذي يحفظ الحدث المسجل
في كائن evregev ، احفظ مفتاحًا كحدث مسجل حالي ، والقيمة هي صفيف. في الصفيف ، ضع معلمات التكوين التي تم تمريرها في الطريقة EV بترتيب أولا ثم الوصول. لاحظ أن هذا صفيف! ! ! لأن المصفوفات يمكن أن توفر الأمر ، فهذا أمر مهم للغاية
هناك أيضًا طريقة مجهولة تسمى EVREGFN ، والتي تحفظ مشغلات الحدث.
يمكننا أن نرى أن EVREGFN حدث مجهول. في البداية ، سيحدد ما إذا كانت النافذة المتغيرة العالمية [me.constants.kit_event_stopimmediatepropagation] هي == صحيح. إذا كان ذلك صحيحًا ، فسيستمر في التنفيذ.
ثم انظر لأسفل ، سوف يقبل كائن EV الناتج عن الحدث ويربط العديد من الكائنات بـ EV باستخدام Mergeif ، مثل Target ، CurrentTarget ، RelationTarget ، لحل مشكلة توافق المتصفح.
StopNow ، StopDefault ، StopGoon هي طرق تم إنشاؤها لمنع الأحداث من الاستمرار في التشغيل.
الفقرة التالية هي مفتاح EVREGFN. سنحلق من خلال صفيف الحدث في Evregev الذي تم إنشاؤه من قبل ، واتخاذ معلمات التكوين التي تم تمريرها في طريقة EV السابقة بالترتيب ، وتنفيذ الطريقة في معلمة config. إذا لم تكن قيمة إرجاع الطريقة فارغة ، فستقوم بإرجاع قيمة الإرجاع الخاصة بها.
أخيرًا ، نجعل المتصفح متوافقًا وربط طريقة EVREGFN المجهولة باستخدام طريقة حدث المستوى 2.
(5) ملخص
ببساطة ، تستخدم Kit طريقة مجهولة المصدر الخاصة بها لخزائن تسجيل الحدث وإدخال صفيف ، بحيث يمكن أن تتذكر تسلسل الأحداث ، بالإضافة إلى توفير إدخال لمعرفة الأحداث المسجلة مسبقًا والمعلمات والأساليب وما إلى ذلك ، وفي الوقت نفسه متوافق مع توافق المتصفح.
(السادس) حدث تسجيل الخروج
مع مقابض حدث Cache Cache ، يصبح التسجيل بسيطًا
يمكنك أن ترى أن Kit يجد تكوين الحدث المقابل من خلال المقارنة المباشرة ، أو مقارنة fn.toString ، و Fn.ToString ().
(السابع) تعزيز الحدث
يجب أن تكون قد لاحظت الآن أن Kit قد قامت بتشغيل دمج على كائن حدث النظام. بادئ ذي بدء ، لماذا تحتاج إلى عمل Megerif؟ نظرًا لأن خصائص كائن كائن حدث النظام يتم قراءتها تمامًا ولا يمكن الكتابة عليها ، يمكنك فقط إضافة خصائص لا تحتوي عليها.
لذلك Kit يمكن فقط megerif. نعلم جميعًا أن هناك عدم توافق كائن حدث لكائن حدث كل متصفح ، لذلك تحتاج Kit إلى إصلاح هذه عدم التوافق. على سبيل المثال ، ليس لدى IE سمة مستهدفة ، فقط srcelement. يمكننا إضافة سمة مستهدفة إليها لتحقيق توافق معيار W3C
بالطبع ، فقط لا يمكن إصلاح احتياجاتنا. في كثير من الأحيان ، ما زلنا بحاجة إلى زيادة الوزن قليلاً لكائن الحدث.
على سبيل المثال ، عند تطوير الهبوط واللمس على iPhone ، غالبًا ما نحتاج إلى الحصول على إزاحة أصابع واحدة ، وللحصول على إزاحة أصابع واحدة ، EV.TargetTouches [0] .clientx ، مثل هذا الرمز ، ولكن بمجرد أن تكون الوظيفة المجهولة مثل هذه ، ستكون غير متوافقة على الكمبيوتر الشخصي.
ما يجب القيام به؟ لا يهم ، يمكننا إعطاء كائن الحدث دمج سماتنا الخاصة
FirstFingerClientX ، وما إلى ذلك ، بحيث يمكننا بسهولة تنفيذ الكود الموحد الذي طورته Mobile و PC.
بما في ذلك ، سيتحدث المقالة التالية عن HTML5 Drag and Drop ، وتستند أحداث الإيماءات المتقدمة إلى هذا الأساس.
أضف إلى هذا ، لماذا لا حدث شخص جديد مثل ExtJS هو بسبب
1. الكائن الأصلي للنظام له علاقة ميراث معينة ولا يريد أن يتم تدميره.
2. إذا كنت تستخدم كائنك الجديد ، فقد يكون الكود غير قابل للعمليات غير محمولة بعد أن يكون خارج الإطار ، ويجب تغيير محتوى الكود مرة أخرى.