【设计模式】装饰器模式和适配模式

装饰器模式

装饰器模式能够很好的对已有功能进行拓展,这样不会更改原有的代码,对其他的业务产生影响,这方便我们在较少的改动下对软件功能进行拓展。

类似于 router 的前置守卫和后置守卫。

js 复制代码
Function.prototype.before = function (beforeFn) {
    const _this = this;
    return function () {
        // 先执行前置函数的调用
        beforeFn.apply(this, arguments);
        // 再执行当前函数的调用
        const result = _this.apply(this, arguments);
        return result;
    }
}
Function.prototype.after = function (afterFn) {
    const _this = this;
    return function () {
        // 先执行当前函数的调用
        const result = _this.apply(this, arguments);
        // 再执行后置函数的调用
        afterFn.apply(this, arguments);
        return result;
    }
}
function fn() {
    console.log('fn')
    return 'fn';
}

let fnn = fn.before(function () {
    console.log('前置函数调用')
}).after(function () {
    console.log('后置函数调用')
})
fnn()

适配模式

将一个类的接口转换成客户希望的另一个接口。适配器模式让那些接口不兼容的类可以一起工作。

比如 axios 在 nodejs 和浏览器环境下都可以使用,本质上就是使用了适配器模式。

js 复制代码
class TencentMap {
    show() {
        console.log('渲染腾讯地图');
    }
}
class BaiduMap {
    display() {
        console.log('渲染百度地图');
    }
}
// 写一个适配器 让腾讯地图适配百度地图的方法
class TencentAdapter extends TencentMap{
    constructor() {
        super();
    }
    display() {
        this.show();
    }
}
function renderMap(map) {
    map.display();
}
renderMap(new TencentAdapter());
renderMap(new BaiduMap());
相关推荐
易元1 小时前
模式组合应用-组合模式
后端·设计模式
秋难降1 小时前
从浅克隆到深克隆:原型模式如何解决对象创建的 “老大难”?😘
后端·设计模式·程序员
ssshooter5 小时前
上下文工程:为高级大型语言模型构建信息环境
人工智能·算法·设计模式
郝学胜-神的一滴8 小时前
C++组合模式:构建灵活的层次结构
开发语言·c++·程序人生·设计模式·组合模式
程序员水自流9 小时前
Java设计模式是什么?核心设计原则有哪些?
java·设计模式
用户413079810619 小时前
面向对象六大设计原则
设计模式
YoungUpUp9 小时前
【电子设计自动化(EDA)】Altium Designer25——电子设计自动化(EDA)软件版保姆级下载安装详细图文教程(附安装包)
运维·设计模式·fpga开发·自动化·eda·电路仿真·电子设计自动化
NorthCastle10 小时前
设计模式-行为型模式-命令模式
设计模式·命令模式
Aeside11 天前
漫谈代理模式,静态代理到 JDK 和 CGLIB 动态代理
java·设计模式
小凯 ོ1 天前
实战原型模式案例
java·后端·设计模式·原型模式