JavaScript责任链模式概述

一.概述

责任链模式是让多个对象有机会处理请求，从而避免请求的发送方和接收方之间的耦合关系。将这个对象连接成一个链，并沿着这个链传递请求，直到一个对象处理它。

它看起来像数据结构中的链表。

但是不要搞混了，责任链不等于链表，因为责任链可以从任何节点往下搜索，而链表必须从开始节点往下搜索。

比如DOM事件机制中的冒泡事件属于责任链，而抓取事件属于链表。

第二，使用责任链模拟冒泡

假设我们有三个对象：li、ul、div，它们的关系图如下：

例如，当我们触发li对象时，如果li不阻止冒泡，它将被传递给ul对象，如果它不阻止冒泡，它将被传递给div对象(假设div是这里的根节点)。同理，ul和div。

看到这一点，很明显，用责任链模型来写这样的需求是合适的。

但是，如何用JavaScript实现责任链模式呢？

如下所示，我们可以通过原型链构建基本架构：

函数create DoM(obj){ this . next=obj | | null；};create DoM . prototype={ handle : function(){ if(this . next){ this . next . handle()；} }};每次我们使用CreateDOM构造函数创建一个对象时，我们都会传入与之关联的对象(嗯，这是一个链表)。

然后，当我们触发一个对象并执行handle方法时，我们可以沿着这个链前进。

但是需要注意的是，当一个对象的句柄属性覆盖了原型链中的句柄时，如何传递下去呢？

使用create DOM . prototype . handle . call(this)；没问题。

实现li、ul和div的代码如下：

var li=null，ul=null，div=nulldiv=new create DoM()；DIV . handle=function(stop bubble){ console . log(' DIV ')；if(stop bubble){ return；} else { create DoM . prototype . handle . call(this)；}};ul=new CreateDom(div)；ul . handle=function(stop bubble){ console . log(' UL ')；if(stop bubble){ return；} else { create DoM . prototype . handle . call(this)；}};Li=new CreateDom(ul)；LI . handle=function(stop bubble){ console . log(' LI ')；if(stop bubble){ return；} else { create DoM . prototype . handle . call(this)；}};以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。