JS笔记：设计模式（2）

最新推荐文章于 2024-03-11 15:22:43 发布

Tara___

最新推荐文章于 2024-03-11 15:22:43 发布

阅读量105

点赞数

分类专栏： JS 文章标签：设计模式

本文链接：https://blog.csdn.net/weixin_46831501/article/details/125178746

版权

JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

装饰器模式

概念：在不影响一个函数本身功能的情况下为这个函数赋能，也就是增强功能，它能动态的添加对象的行为。
最典型的例子就是React中的高阶组件HOC了，通过传入一个组件并对其功能进行增强，再返回一个新的组件。

代码理解如下：核心在于装饰类中要继承原始类中的功能，以便于扩展新功能而不会影响原始功能。
在这里插入图片描述

代理模式

概念：为其它对象提供一种代理以控制这个对象的访问，具体执行的功能还是这个对象本身。
经典例子是图片预加载的了，主要思路是通过一张loading图占位，然后通过异步的方式加载图片，等图片加载好了再把完成的图片加载到img标签里面。
像事件委托、事件代理这类事件都算是代理模式。
在这里插入图片描述

适配器模式

概念：适配器模式是一种事后的补救策略，用来补救设计上的缺陷（比如接口不兼容）。适配器提供跟原始类不同的接口，而代理模式、装饰器模式提供的都是跟原始类相同的接口。主要提供跟原始类不同的接口。
比如说我在react中大量的使用了一个useBoolean的库，它返回的三个对象 { boolean，setTrue，setFalse }，但是有一天这个库下架不能用了，但是我不可能将项目中所有都用到这个库的地方都改了，这个时候我就可以写一个useMyBoolean的库，也是返回 { boolean，setTrue，setFalse } 这三个对象，这时候我只要把项目中所有的 import { boolean，setTrue，setFalse } from ‘useBoolean’ 改成 import { boolean，setTrue，setFalse } from ‘useMyBoolean’，这样就相当于是适配器模式的一种了。