【设计模式】装饰器模式-一一网

一、定义

**定义：**装饰者模式能够在不改变对象自身的基础上，在运行程序期间给对象动态地添加职责。

使用场景： 类似于拦截器，添加对象的前置和后置事件等。

装饰器模式就是给对象动态增加功能

二、可改进的场景代码


const Ican =  {
    canEnglish: () => {
        console.log('我会英语了')
    },
    canFrench: () => {
        console.log('我会法语了')
    },
    init: function () {
        this.canEnglish()
        this.canFrench()
    }
}

Ican.init()
//我会英语了
//我会法语了
复制代码

后面，我又学会了德语，俄语呢？大多数情况下，我们会选择直接修改 Ican 方法，代码如下：

const Ican =  {
    canEnglish: () => {
        console.log('我会英语了')
    },
    canFrench: () => {
        console.log('我会法语了')
    },
    canGerman: () => { //  新增技能 
        console.log('我会德语了')
    },
    init: function () {
        this.canEnglish()
        this.canFrench()
        this.canGerman()
    }
}

Ican.init()
// 我会英语了
// 我会法语了
// 我会德语了

复制代码

后续，我又学会了其他的语言，那么，我如果让别人帮我修改代码，他担心如果直接在Ican内部添加方法会影响到什么。

三、通过装饰器模式，不直接修改原始方法，通过外部函数，引用原始方法，添加功能

于是他想到了一个好方法，不直接修改Ican方法内部，而是通过一个外部函数，引用Ican，并为外部函数添加学会俄语的功能。

const before = function (fn, beforeFn) {
    return function () {
        beforeFn.apply(this, arguments)
        return fn.apply(this, arguments)
    }
}

const after = function (fn, afterFn) {
    console.log('this1', this); // Window
    return function () {
        console.log('this2', this); // Ican 对象
        const __ = fn.apply(this, arguments);
        afterFn.apply(this, arguments)
        return __
    }
}

const Ican =  {
    canEnglish: () => {
        console.log('我会英语了')
    },
    canFrench: () => {
        console.log('我会法语了')
    },
    canGerman: () => { 
        console.log('我会德语了')
    },
    init: function () {
        this.canEnglish()
        this.canFrench()
        this.canGerman()
    }
}



after(Ican.init, function canRussian () {//  新增技能
    console.log('我又学会俄语了')
}).apply(Ican);// 调用after()()返回的函数时改变了其返回函数的this

// 我会英语了
// 我会法语了
// 我会德语了
// 我又学会俄语了

复制代码

这就是装饰器模式，动态的为 Ican 添加功能，而不直接修改 Ican 本身。

四、实际场景

1) 数据上报

自定义事件的数据上报一般都依赖于点击事件，那么这个点击事件既要承担原本的功能，又要承担数据上报的功能。

1.1) 普通做法

先上代码：

const loginBtnClick = () => {
    console.log('去登录'）
    console.log('去上报')
} 

复制代码

好像没毛病，这样的代码中项目中随处可见，逃避(面向过程编程)虽可耻但有用。

1.2) 装饰器模式做法

可以通过装饰器模式来重构上述代码，将职责划分更细，代码松耦合，可复用性更高。


const after = function (fn, afterFn) {
    return function () {
        const __ = fn.apply(this, arguments)
        afterFn.apply(this, arguments)
        return __
    }
}

const showLogin = function () {
    console.log('去登录')
}

const log = function () {
    console.log('去上报')
}

const loginBtnClick = after(showLogin, log)

loginBtnClick()
复制代码

2) 动态增加参数

一个常规的 ajax 请求参数包括 type / url / param，当突发一个特殊情况，需要在 ajax 的参数中，新增一个 token 参数。

2.1) 普通做法

先上代码：

const ajax = function (type, url, param) {
    // 新增token参数
    param.token = 'xxx'
    // ...ajax请求...省略
}

复制代码

好了，又一次违反开放-封闭原则，直接修改了 ajax 函数内部.

2.2) 装饰器做法

通过装饰器模式，在 ajax 调用之前，为 ajax 增加 token 参数，代码如下：

const before = function (fn, beforeFn) {
    return function () {
        beforeFn.apply(this, arguments)
        return fn.apply(this, arguments)
    }
}

let ajax = function (type, url, param) {
    console.log(arguments)
    // ...ajax请求...省略
}

ajax = before(ajax, function (type, url, param) {
    console.log(param)
    param.token = 'xxx'
})

ajax('type', 'url', {name: 'tj'})

复制代码

这样做可以减少 ajax 函数的职责，提高了 ajax 函数的可复用性，

五装饰器模式优点

装饰器模式，让对象更加稳定，且易于复用。而不稳定的功能，则可以在个性化定制时进行动态添加。

通过装饰器模式，将职责划分更细，代码松耦合，可复用性更高。

五装饰器模式demo2

Function.prototype.before = function(beforefn) {
    let _self = this;                          
    return function () {
        beforefn.apply(this, arguments);
        return _self.apply(this, arguments);
    }
}
Function.prototype.after = function(afterfn) {
    let _self = this;
    return function(){
        let ret = _self.apply(this, arguments);
        afterfn.apply(this, arguments);
        return ret;
    }
}
let func = function() {
    console.log('2');
}
//func1和func3为挂载函数
let func1 = function() {
    console.log('1');
}
let func3 = function() {
    console.log('3');
}

func = func.before(func1).after(func3);
func();   // 1  2  3

复制代码