في Javasript ، غالبًا ما يظهر الوكيل والفوضى .
لذا تحت أي ظروف تستخدمها بالفعل؟ ما هو مبدأها؟
نقدم هنا استخدام ومبادئ مندوب JavaScript ، وكذلك واجهة المندوب في الأطر مثل Dojo و JQuery ، إلخ.
JavaScript Proxy
Proxying الأحداث هي ميزة مفيدة للغاية ومثيرة للاهتمام في عالم JS. عندما نحتاج إلى إضافة أحداث إلى العديد من العناصر ، يمكننا تشغيل وظيفة المعالجة عن طريق إضافة أحداث إلى عقدة الأصل وتفويض الأحداث إلى العقدة الأصل.
ويرجع ذلك أساسًا إلى آلية فقاعة الأحداث في المتصفح. دعنا نقدم مثالًا محددًا لشرح كيفية استخدام هذه الميزة.
هذا المثال مأخوذ بشكل أساسي من مقالات David Walsh ذات الصلة (كيف يعمل تفويض أحداث JavaScript).
لنفترض أن هناك عقدة الوالدين UL التي تحتوي على العديد من أطفال LI:
<ul id = "list"> <li id = "li-1"> li 1 </li> <li id = "li-2"> li 2 </li> <li id = "li-3"> li 3 </li> <li id = "li-4"> li 4 </li> <li id = "li-5"
عندما ينتقل الماوس الخاص بنا إلى LI ، نحتاج إلى الحصول على معلومات ذات صلة حول هذا LI وتطفو من النافذة العائمة لعرض معلومات مفصلة ، أو عند النقر على LI ، يجب تشغيل حدث المعالجة المقابل.
تتمثل طريقة الكتابة المعتادة في إضافة بعض المراقبة مثل OnMouseover أو onclick إلى كل LI.
وظيفة AddListenersLi (lielement) {lielement.onclick = function clickHandler () {// toDo} ؛ lielement.onmouseover = function mouseoverhandler () {// toDo}} window.onload = function () {var ullement = document.getElementById ("list") ؛ var lielements = ullement.getElementByTagName ("li") ؛ لـ (var i = lielements.length-1 ؛ i> = 0 ؛ i--) {addListenersLi (lielements [i]) ؛ }}إذا تمت إضافة أو حذف عناصر Li Child في هذا UL بشكل متكرر ، فنحن بحاجة إلى استدعاء طريقة AddListenersLi في كل مرة نضيف فيها LI لإضافة وظائف معالجة الأحداث لكل عقدة LI.
يمكن أن يخلق هذا التعقيد وإمكانية الأخطاء في عملية الإضافة أو الإزالة.
الحل للمشكلة هو استخدام آلية وكيل الأحداث. عندما يتم إلقاء الحدث على العقدة الأصل للمستوى الأعلى ، نحكم ونحصل على مصدر الحدث LI من خلال التحقق من الهدف المستهدف للحدث.
يمكن أن يحقق الرمز التالي التأثير المطلوب:
/احصل على العقدة الأصل وأضف حدثًا نقرة إلى مستند. }}) ؛
أضف حدث نقرة إلى العقدة الأصل. عند النقر فوق العقدة الفرعية ، سيقوم حدث Click Section بأعلى من عقدة الطفل. بعد أن تمسك العقدة الأصل بالحدث ، تحدد ما إذا كانت العقدة التي نحتاج إلى معالجتها عن طريق الحكم على e.target.nodename. وتم الحصول على عقدة LI التي تم النقر عليها من خلال E.Target. لذلك ، يمكن الحصول على المعلومات المقابلة ومعالجتها.
فقاعة الأحداث والتقاطها
آلية فقاعة الأحداث في المتصفح ، ومصنعي المتصفح المختلفة لديها آليات معالجة مختلفة لالتقاط الأحداث والتعامل معها. نقدم هنا الأحداث القياسية المحددة بواسطة W3C لـ DOM2.0.
يقسم نموذج DOM2.0 عملية معالجة الأحداث إلى ثلاث مراحل:
1. مرحلة التقاط الحدث ،
2. المرحلة المستهدفة للحدث ،
3. مرحلة الفقاعات من الحدث.
كما هو مبين في الشكل أدناه:
التقاط الحدث: عندما يؤدي عنصر ما إلى حدوث حدث (مثل OnClick) ، فإن مستند كائن المستوى الأعلى سوف ينبعث من دفق حدث ، يتدفق إلى عقدة العنصر الهدف مع عقدة شجرة DOM حتى يتم الوصول إلى العنصر المستهدف الذي يحدث فيه الحدث بالفعل. في هذه العملية ، لن يتم تشغيل وظيفة الاستماع المقابلة للحدث.
هدف الحدث: بعد الوصول إلى العنصر المستهدف ، يتم تنفيذ وظيفة المعالجة المقابلة لحدث العنصر الهدف. إذا لم تكن هناك وظيفة مستمع ملزمة ، فلن يتم تنفيذها.
فقاعات الأحداث: ابدأ بالعنصر المستهدف وانتشر إلى العنصر العلوي. إذا كانت العقدة تربط وظيفة معالجة الأحداث المقابلة في الطريق ، فسيتم تشغيل هذه الوظائف مرة واحدة. إذا كنت ترغب في منع الحدث من الفقاعات ، فيمكنك استخدام E.StopPropagation () (Firefox) أو e.cancelBubble = True (IE) لتنظيم انتشار الفقاعات للحدث.
وظيفة تفويض في jQuery و Dojo
دعونا نلقي نظرة على كيفية استخدام واجهات وكيل الأحداث المقدمة في Dojo و JQuery.
jQuery:
$ ("#list"). تفويض ("li" ، "Click" ، function () {// "$ (this)" هي العقدة التي تم النقر عليها console.log ("لقد قمت بالنقر فوق رابط!" ، $ (this)) ؛}) ؛تتطلب طريقة مندوب jQuery ثلاث معلمات ، محدد ، اسم زمني ، ومعالج حدث.
تشابه دوجو مع jQuery هو مجرد اختلاف في أنماط البرمجة بين الاثنين:
require (["dojo/query" ، "dojox/nodeList/depeate"] ، function (query ، depate) {query ("#list"). depate ("li" ، "onclick" ، function (event) {// "this.node" هي العقدة التي تم النقر عليها console.log ("توجد وحدة مندوبة Dojo في dojox.nodelist ، والواجهة المقدمة هي نفس jQuery والمعلمات هي نفسها.
من خلال التفويض ، يمكنك تقدير العديد من فوائد استخدام تفويض الأحداث إلى التنمية:
1. هناك عدد أقل من الوظائف المدارة. ليست هناك حاجة لإضافة وظيفة مستمع لكل عنصر. بالنسبة لعناصر الأطفال المماثلة تحت نفس العقدة الأصل ، يمكن التعامل مع الأحداث من خلال وظيفة الاستماع المفوضة للعنصر الأصل.
2. من السهل إضافة العناصر وتعديلها ديناميكيًا ، وليس هناك حاجة لتعديل ربط الحدث بسبب تغييرات العناصر.
3. يتم تقليل الارتباط بين العقد JavaScript و DOM ، مما يقلل من احتمال تسرب الذاكرة الناتج عن المراجع الدائرية.
باستخدام الوكيل في برمجة JavaScript
يقدم ما ورد أعلاه استخدام آلية فقاعة المتصفح لإضافة وكيل الأحداث إلى عناصر DOM عند معالجة أحداث DOM. في الواقع ، في برمجة JS Pure ، يمكننا أيضًا استخدام نمط البرمجة هذا لإنشاء كائنات وكيل لتشغيل الكائنات المستهدفة.
var depegate = function (client ، clientMethod) {return function () {return clientMethod.apply (client ، mations) ؛ }} var apple = function () {var _color = "red" ؛ return {getColor: function () {console.log ("color:" + _color) ؛ } ، setColor: function (color) {_color = color ؛ }} ؛ } ؛ var a = new Apple () ؛ var b = new Apple () ؛ A.GetColor () ؛ A.SetColor ("الأخضر") ؛ A.GetColor () ؛ // استدعاء Proxy var d = مندوب (a ، a.setColor) ؛ D ("الأزرق") ؛ // تنفيذ Proxy A.GetColor () ؛ //b.getColor () ؛في المثال أعلاه ، يتم تشغيل تعديل A عن طريق استدعاء وظيفة الوكيل D التي تم إنشاؤها بواسطة دالة Depigate ().
على الرغم من أن هذه الطريقة تستخدم تطبيق (يمكن أيضًا استخدام المكالمة) لنقل كائن المكالمة ، فإنه ينفذ إخفاء كائنات معينة من وضع البرمجة ، والتي يمكنها حماية هذه الكائنات من الوصول إليها وتعديلها حسب الرغبة.
تتم الإشارة إلى مفهوم المندوب في العديد من الأطر لتحديد نطاق تشغيل الطريقة.
الأمثلة النموذجية هي dojo.hitch (النطاق ، الطريقة) و createlegate (OBJ ، args) من extjs.
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون من المفيد للجميع تعلم برمجة JavaScript.