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

装饰器模式

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

类似于 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());
相关推荐
cooldream20096 小时前
深入理解MVP架构:让UI层与业务逻辑完美分离的设计模式
ui·设计模式·架构·系统架构师
摘星编程9 小时前
并发设计模式实战系列(3):工作队列
设计模式·并发编程
Pasregret9 小时前
访问者模式:分离数据结构与操作的设计模式
数据结构·设计模式·访问者模式
Aniugel12 小时前
JavaScript高级面试题
javascript·设计模式·面试
不当菜虚困12 小时前
JAVA设计模式——(四)门面模式
java·开发语言·设计模式
Niuguangshuo12 小时前
Python设计模式:MVC模式
python·设计模式·mvc
Lei活在当下13 小时前
【现代 Android APP 架构】01. APP 架构综述
android·设计模式·架构
前端大白话13 小时前
震惊!90%前端工程师都踩过的坑!computed属性vs methods到底该怎么选?一文揭秘高效开发密码
前端·vue.js·设计模式
前端大白话13 小时前
前端必看!figure标签在响应式图片排版中的王炸操作,grid/flex布局实战指南
前端·设计模式·html
ApeAssistant13 小时前
Spring + 设计模式 (十四) 行为型 - 观察者模式
spring·设计模式