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 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
js 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
判断复选框是否被选中的两种方法
Jun 04 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
在vscode里使用.vue代码模板的方法
Apr 28 Javascript
Vue-cli@3.0 插件系统简析
Sep 05 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
基于VUE的v-charts的曲线显示功能
Oct 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 cookie的操作实现代码(登录)
2010/12/29 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
react-native之ART绘图方法详解
2017/08/08 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
python opencv 图像尺寸变换方法
2018/04/02 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
在django view中给form传入参数的例子
2019/07/19 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
如何让python的运行速度得到提升
2020/07/08 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
12岁生日演讲稿
2014/05/14 职场文书
项目建议书怎么写
2014/05/15 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
《称赞》教学反思
2016/02/17 职场文书