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

装饰器模式

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

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

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 和浏览器环境下都可以使用，本质上就是使用了适配器模式。

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());