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 相关文章推荐
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
npm scripts 使用指南详解
Oct 08 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 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
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
高性能PHP框架Symfony2经典入门教程
2014/07/08 PHP
php和asp语法上的区别总结
2019/05/12 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
一个符号插入器 中用到的js代码
2007/09/04 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
Vue中Quill富文本编辑器的使用教程
2018/09/21 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
Python中datetime常用时间处理方法
2015/06/15 Python
Saltstack快速入门简单汇总
2016/03/01 Python
Scrapy的简单使用教程
2017/10/24 Python
通过Pandas读取大文件的实例
2018/06/07 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
秋游活动策划方案
2014/02/16 职场文书
三年级学生评语
2014/04/23 职场文书
乡镇干部先进性教育活动个人整改措施
2014/09/16 职场文书
医德医风自我评价
2014/09/19 职场文书
检讨书怎么写
2015/01/23 职场文书
团员个人总结
2015/02/26 职场文书
清明节寄语2015
2015/03/23 职场文书
前台岗位职责范本
2015/04/16 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书