JavaScript职责链模式概述


Posted in Javascript onSeptember 17, 2016

一、概述 

职责链模式(Chain of responsibility),就是使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系。将这个对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理他为止。 

貌似和数据结构中的链表一样。 

但,不要搞混了,职责链可不等于链表哦,因为职责链可以在任何一个节点开始往下查找,而链表,则必须从头结点开始往下查找。 

比如,DOM事件机制中的冒泡事件就属于职责链,而捕获事件则属于链表。 

二、利用职责链模拟冒泡 

假设我们有三个对象:li、ul、div,三者关系图如下:

JavaScript职责链模式概述

比如,当我们触发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时,怎么继续往下传呢? 

利用CreateDOM.prototype.handle.call(this);就好了。 

So,实现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);
  }
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript XML实现两级级联下拉列表
Nov 10 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
js简单实现自动生成表格功能示例
Jun 02 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 Javascript
JavaScript原生数组函数实例汇总
Oct 14 Javascript
JavaScript类的写法
Sep 17 #Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 #Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
Sep 17 #Javascript
JavaScript每天必学之数组和对象部分
Sep 17 #Javascript
JavaScript每天必学之基础知识
Sep 17 #Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 #Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 #Javascript
You might like
针对初学PHP者的疑难问答(1)
2006/10/09 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
JavaScript中常见陷阱小结
2010/04/27 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
积极向上的团队口号
2014/06/06 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
2015年工程师工作总结
2015/04/30 职场文书
新店开张宣传语
2015/07/13 职场文书
sql中mod()函数取余数的用法
2021/05/29 SQL Server
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android