مقدمة إلى نموذج السلسلة في JavaScript

الجزء الأول: تلخيص　

نموذج سلسلة المسؤولية (Chain of responsibility) هو جعل العديد من العناصر لها الفرصة لمعالجة الطلبات، مما يقلل من التشابك بين المرسل والقبول. اربط هذا العنصر في سلسلة وتمرر الطلب عبر هذه السلسلة حتى يتم معالجته من قبل أحد العناصر.　

يبدو كأنه يشبه قائمة الاتصال في بنية البيانات.　

لكن لا تربك، ليست سلسلة المسؤولية نفس قائمة الاتصال، لأن سلسلة المسؤولية يمكن أن تبدأ في أي نقطة وتنتقل إلى الأسفل، بينما يجب أن تبدأ قائمة الاتصال من العنصر الأول.　

على سبيل المثال، في ميكانيكية DOM للأحداث التسرب، تنتمي إلى سلسلة المسؤولية، بينما تنتمي الأحداث القبض إلى قائمة الاتصال.　

الجزء الثاني: استخدام سلسلة المسؤولية لتمثيل التسرب　

افترض أن لدينا ثلاثة عناصر: li، ul، div، والشكل التالي يوضح علاقاتهم:

على سبيل المثال، عندما ننشط عنصر li، إذا لم يمنع li من التسرب، فإنه سيتم نقل إلى عنصر ul، وعندما يصل إلى ul، إذا لم يمنع التسرب، فإنه سيتم نقل إلى عنصر div (افتراضًا أن div هو العنصر الجذر). بنفس الطريقة، ul، div.　

عندما نرى هذا، يكون من الواضح أن نموذج سلسلة المسؤولية مناسب لتحليل هذه الحاجة.　

لكن، كيف يمكن استخدام JavaScript لتحقيق نموذج سلسلة المسؤولية؟　

كما يلي، يمكننا بناء الهيكل الأساسي من خلال سلسلة الأصناف:　

function CreateDOM(obj){
  this.next = obj || null;
};  
CreateDOM.prototype = {
  handle: function(){
    إذا (this.next){
      this.next.handle();
    };
  };
};

كلما استخدمنا بناءً على CreateDOM، قمنا بإنشاء عنصر، يتم نقل العنصر المرتبط معه进去 (نعم، هذا مثل قائمة الاتصال).　

ثم، عندما نطلق على某个 object، ن�行طبيق method handle، يمكننا المضي قدمًا في هذا السلسلة.　

لكن، يجب الانتباه إلى أن كيفية الاستمرار في التمرير عبر السلسلة إذا تغطى خاصية handle في السلسلة الأصلية؟　

باستخدام CreateDOM.prototype.handle.call(this); فقط.　

إذن، إليك كيفية تنفيذ كود li، ul و div:　

var li = null; 
  ul = null; 
  div = null;
div = new CreateDOM();
div.handle = function(stopBubble){
  console.log('DIV');
  if(stopBubble){
    return;    
  }else{
    CreateDOM.prototype.handle.call(this);
  };
};
ul = new CreateDOM(div);
ul.handle = function(stopBubble){
  console.log('UL');
  if(stopBubble){
    return;    
  }else{
    CreateDOM.prototype.handle.call(this);
  };
};
li = new CreateDOM(ul);
li.handle = function(stopBubble){
  console.log('LI');
  if(stopBubble){
    return;    
  }else{
    CreateDOM.prototype.handle.call(this);
  };
};

هذا هو نهاية محتوى هذا المقال، نأمل أن يكون قد ساعدكم في التعلم، ونأمل أن تدعموا دائمًا تعليمات النطق.

البيان: محتوى هذا المقال تم جمعه من الإنترنت، ملكية المحتوى تخص المالك الأصلي، تم جمع المحتوى من قبل المستخدمين عبر الإنترنت بطرقهم الخاصة، هذا الموقع لا يمتلك حقوق الملكية، لم يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # ب @) لإبلاغنا، وقدم الدليل على هذا الاشتباه، إذا تم التحقق من ذلك، فإن هذا الموقع سيزيل المحتوى المزعوم بسرعة.