JavaScript设计模式--适配器、装饰器、代理

设计模式导航

\bullet 适配器模式

    \ast 目标

        适配已有方案

    \ast 应用场景

        参数的兼容处理

    \ast 代码示例

        像诸如antd、elemetUI等组件库，常见的一个属性即可以接收一个string类型，也可以接收一个string[]类型的情况，组件内部拿到后做的参数处理过程其实就是一次适配过程

        提起适配器就不得不说起典型的插座匹配，增加一个中转站，将所有功率转为220v以适配所有

\bullet 装饰器模式

    \ast 目标

        增强已有方案

    \ast 应用场景

        ts装饰器、react高阶组件

    \ast 代码示例

        就像高阶组件一样，使用了hoc包裹后我们可以给组件添加一些额外的能力，如css样式或className。不使用也不影响原组件使用

\bullet 代理模式

    \ast 目标

        为对象架设拦截，拒绝直接访问

    \ast 应用场景

        Proxy、Object.defineProperty、事件代理

    \ast 代码示例

    像王者农药，在没有防沉迷系统之前，玩家是可以直接登录游戏的，上了该系统之后就不允许玩家直接进行登录了，因此需要对游戏类进行下拦截，在符合时放开

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容