Обзор модели ответственности в 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(){
    if(this.next){
      this.next.handle();
    };
  };
};

Каждый раз, когда мы используем конструктор CreateDOM, создаем объект и передаем в него связанный объект (да, это как список).　

Потом, когда мы вызываем объект и выполняем метод handle, мы можем следовать этой цепочке и продолжить.　

Но, нужно помнить, когда свойство handle объекта покрывает handle в原型-цепочке, как продолжить передавать дальше?　

ENOugh для 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 (во время отправки письма замените # на @) для жалоб и предоставьте соответствующие доказательства. В случае подтверждения факта нарушения авторских прав, сайт незамедлительно удалит материалы,涉嫌侵权。