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 相关文章推荐
JS读取cookies信息(记录用户名)
Jan 10 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
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
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
php array_multisort 对数组进行排序详解及实例代码
2016/10/27 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
Python新手实现2048小游戏
2015/03/31 Python
Python实现基本线性数据结构
2016/08/22 Python
Python制作刷网页流量工具
2017/04/23 Python
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
python命令行工具Click快速掌握
2019/07/04 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
中药专业大学生医药工作求职信
2013/10/25 职场文书
五水共治捐款倡议书
2014/05/14 职场文书
幼儿园课题实施方案
2014/05/14 职场文书
诚信承诺书
2015/01/19 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
《开国大典》教学反思
2016/02/16 职场文书
python requests模块的使用示例
2021/04/07 Python
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript