你不知道的javascript设计模式(十三) ----职责链模式

简介: 你不知道的javascript设计模式(十三) ----职责链模式

前言

       清明节三天假期过去了,一直没有更新,这里先祝大家清明节安好!上一章节我们介绍了享元模式,享元模式分离了对象的内部和外部状态,实现了对象的复用,从而去减少资源上的消耗。这一章我们将继续学习一种新的设计模式,职责链模式。


正文

职责链模式的定义

使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止

       职责链模式就是将一些都有可能处理请求的对象连成一条链,将请求逐步传递,直到找到可以处理这个请求的对象为止。

       举个通俗易懂的例子方便大家理解,假设小陈去坐公交车,人实在太多了,来不及自己投币,只能将硬币给旁边的人让他投进硬币箱,然后旁边的人再递给另一个人直到小陈的硬币进硬币箱子。这就是一个很典型的职责链模式。不难发现职责链模式有一个很明显的优点,就是小陈并不需要知道硬币箱的位置,他只需要把硬币给旁边的人就好,其实是弱化了请求发送者与接受者之间的强联系


职责链模式的实现

       一如既往,在实现职责链模式之前,我们先引入一个业务场景,假设一个电商平台购买物品有这么一个规则,有三种购买模式,500押金的购买模式,可以返回100代金劵,200押金的购买模式,可以返回50代金劵,前两者保证库存的提前预定,无押金购买,在库存不存在的时候会买不到,选定购物模式之后,但是如果没付押金就会做降级处理,比如选了500押金模式,但是没付押金就会降级成200押金模式,以此类推。

       很明显的,这个业务场景是很适合使用职责链模式来实现的,三种模式,从500押金模式作为起点,如果不能处理就不断传递下去,在实现之前,我们先分析我们需要实现哪些内容,首先是三种模式,这个不难实现,主要就是orderType, pay, stock三个参数,第一个用来表示购买的类型,pay表示是否按时支付了押金,而stock表示是否库存充足,如果大于0,表示库存充足,如果当前模式不能处理,需要传递给下一个模式,将返回一个标记字符串,我们定义为‘nextSuccessor‘

       当然光靠这三个方法是没办法实现链式的请求传递的,我们还需要实现一个链类,把这三个函数包装进职责链中,来处理链式的传递,我们需要为这个链类实现两个方法,设置链子节点,以及将当前进度传给下一个链子节点

640.png

       然后我们就只需要将上面定义的三个函数传入链类进行包装,并且用setNextSuccessor定义好他们的下家就行,最后使用passRequest去调用这个链式即可


基于AOP实现职责链模式

       通常,在 JavaScript 中实现 AOP,都是指把一个函数“动态织入”到另外一个函数之中, 也就是我们俗称的面向切面编程,是一种装饰者模式的体现,上面我们利用定义了链类Chain去实现职责链模式,这里我们可以利用AOP的思想简化上面的职责链模式

640.png

       这样实现相对上面的更加简单且优雅,但是这种写法将会叠加函数的作用域,如果链式过长,对性能的影响也比较大


小结

       这一章我们学习了职责链模式,职责链弱化了请求发送者与接收者之间的关系,我们只需要知道请求的起点,就可以顺利将请求传递到接收者的位置,同时我们还尝试使用了AOP的编程思想去实现了职责链模式,AOP模式是一种装饰者模式的体现,这样实现的职责链模式更加简单且优雅


目录
相关文章
|
4月前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 职责链模式
js设计模式【详解】—— 职责链模式
76 8
|
1月前
|
设计模式 JavaScript 前端开发
JavaScript设计模式--访问者模式
【10月更文挑战第1天】
31 3
|
3月前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
50 1
|
3月前
|
设计模式 JavaScript 前端开发
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
|
4月前
|
设计模式 JavaScript Go
js设计模式【详解】—— 状态模式
js设计模式【详解】—— 状态模式
80 7
|
4月前
|
设计模式 JavaScript
js设计模式【详解】—— 桥接模式
js设计模式【详解】—— 桥接模式
68 6
|
4月前
|
设计模式 JavaScript
js设计模式【详解】—— 原型模式
js设计模式【详解】—— 原型模式
50 6
|
4月前
|
设计模式 JavaScript 算法
js设计模式【详解】—— 模板方法模式
js设计模式【详解】—— 模板方法模式
48 6
|
4月前
|
设计模式 JavaScript 前端开发
JavaScript进阶 - JavaScript设计模式
【7月更文挑战第7天】在软件工程中,设计模式是解决常见问题的标准解决方案。JavaScript中的工厂模式用于对象创建,但过度使用可能导致抽象过度和缺乏灵活性。单例模式确保唯一实例,但应注意避免全局状态和过度使用。观察者模式实现了一对多依赖,需警惕性能影响和循环依赖。通过理解模式的优缺点,能提升代码质量。例如,工厂模式通过`createShape`函数动态创建对象;单例模式用闭包保证唯一实例;观察者模式让主题对象通知多个观察者。设计模式的恰当运用能增强代码可维护性。
81 0
|
4月前
|
设计模式 缓存 JavaScript
js设计模式实例
【7月更文挑战第2天】JavaScript设计模式包含工厂、单例、建造者、抽象工厂和代理模式等,它们是最佳实践和可重用模板,解决创建、职责分配和通信等问题。例如,工厂模式封装对象创建,单例确保全局唯一实例,建造者模式用于复杂对象构建,抽象工厂创建相关对象集合,而代理模式则控制对象访问。这些模式提升代码质量、可读性和灵活性,是高效开发的关键。
37 0