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实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
js如何获取网页所有图片
May 12 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
JavaScript设计模式之单例模式详解
Jun 09 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
vue axios请求拦截实例代码
Mar 29 Javascript
async/await地狱该如何避免详解
May 10 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 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中的一些常用函数收集
2015/05/26 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
一些不错的js函数ajax
2008/08/20 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
python字符串排序方法
2014/08/29 Python
python字符串,数值计算
2016/10/05 Python
python 异常处理总结
2016/10/18 Python
简单谈谈Python流程控制语句
2016/12/04 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
python将数组n等分的实例
2019/12/02 Python
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
中专生职业生涯规划书范文
2014/01/10 职场文书
给酒店员工的表扬信
2014/01/11 职场文书
高一政治教学反思
2014/01/28 职场文书
车间核算员岗位职责
2014/07/01 职场文书
标准版离职证明书
2014/09/12 职场文书
钱学森电影观后感
2015/06/04 职场文书
获奖感言怎么写
2015/07/31 职场文书
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL