装饰者模式【javascript设计模式】

其实生命就是这样,从无到有,从稚嫩到成熟。现状态转变自前一个状态,只是多了点东西,它们就变得相互独立,形同陌路。

装饰者模式,听名字就会明白,是在原有对象的基础上,给其装饰一些东西,使其成为一个新的对象。举个例子:我现在是一个单身狗,给我一个女朋友,我就变成了有女朋友的单身狗;换句话说就是,我现在是一个单身狗对象,给我装饰了一个女朋友,我就成为一个有女朋友的单身狗对象。接下来用代码阐述一下:

const SingleDog = function () {

}

SingleDog.prototype.say = function () {
    console.log('我是一只单身狗');
}

const DecorateGfriend = function (men) {
    this.men = men;
}

DecorateGfriend.prototype.say = function () {
    this.men.say();
    console.log('我有女朋友');
}

const me = new DecorateGfriend(new SingleDog());

me.say(); // 我是一只单身狗,我有女朋友

OK,我们先来看一下上面的代码,至关重要的DecorateGfriend做了二件事情:1. 调用了SingleDog的say函数;2. 额外打印出了一句话。这两点其实就是装饰者模式的精髓:在保持原有对象功能的基础上,增加新功能
上面的代码看起来不太好看,又多又乱而且DecorateGfriend似乎违反了开放-封闭原则,即我要是想秀波恩爱,额外打印出一句“我很幸福”之类云云,需要直接改DecorateGfriend的代码,这样子是不行的,所以有没有什么好的方法嘞?下面给出 2 个经典的AOP装饰函数:

Function.prototype.before = function(beforefn) {
    const self = this;
    return function () {
        beforefn.apply(this, arguments);
        return self.apply(this, arguments);
    }
}

Function.prototype.after = function(afterfn) {
    const self = this;

    return function () {
        const ret = self.apply(this, arguments);
        afterfn.apply(this, arguments);
        return ret;
    }
}

来看看第一个函数,正如上面提到的,做了两件事情:1. 先调用了传递进来的函数,2. 在调用了函数本身。第二个函数和上面相反。所以,我们可以用上面的函数来重构单身狗的例子:

Function.prototype.after = function(afterfn) {
    const self = this;

    return function () {
        const ret = self.apply(this, arguments);
        afterfn.apply(this, arguments);
        return ret;
    }
}

const singleDogSay = function () {
    console.log('我是一只单身狗');
}

const decorateGfriend = function () {
    console.log('我装饰了一个女朋友');
}

const flaunt = function () {
    console.log('秀死你们');
}

const me = singleDogSay.after(decorateGfriend).after(flaunt);

me(); // 我是一只单身狗 我装饰了一个女朋友 秀死你们

是不是很爽,想秀多少波都可以,只要一直after下去。


接下来,我们来思考一个问题,装饰者模式能给我们日常的开发中带来哪些好处呢?

可以把行为依照职责分成更细的粒度,随后将它们合并到一起,这有助于我们编写一个松耦合高复用的系统

下面是两个启发性例子:

1、

大家或许都接触过“埋点”,一种统计的方式。比如想获取有多少用户点击了这个活动的按钮,会在这个按钮点击时发送一条统计数据到服务器。
按照正常思维大家会写这样的代码:

const btn = document.getElementById('J_btn');

const doSomething = function() {
    console.log('用户点击这个按钮后发生的事情');
}

const sendInfo = function() {
    console.log('发送埋点信息');
}

btn.onClick = function() {
    doSomething();
    sendInfo();
}

上面这段代码违反了单一职责原则,这个按钮要做的事情仅仅是doSomething里面的,但是它不得不在onClick实践中又执行了发送埋点信息这一个操作。所以,我们需要将它, 分开,而装饰者模式正好为我们提供了完美的解决方案:

Function.prototype.after = function(afterfn) {
    const self = this;

    return function () {
        const ret = self.apply(this, arguments);
        afterfn.apply(this, arguments);
        return ret;
    }
}

const btn = document.getElementById('J_btn');

let doSomething = function() {
    console.log('用户点击这个按钮后发生的事情');
}

const sendInfo = function() {
    console.log('发送埋点信息');
}

doSomething = doSomething.after(sendInfo);

btn.onClick = doSomething;

这样就很清晰了,按钮点击后只是执行doSomthing里面的内容,而埋点只不过是“附带”执行的操作,在代码可读性方面一目了然,而且两个函数各自的修改并不会对其他函数造成影响,完美符合单一职责原则。

2、

表单验证
大家应该都编写过表单验证的程序:在用户填写好一堆表单数据后,在上传至服务器前要对表单数据进行校验,比如,用户名密码是否为空之类。遇到这种情况,很直观的思路是写下面这样的代码实现:

const name = document.getElementById('name');
const password = document.getElementById('password');
const submit = document.getElementById('submit');

submit.onClick = function() {
    if (name === '') {
        console.log('用户名不能为空');
        return;
    }
    if (password === '') {
        console.log('密码不能为空');
        return;
    }

里面校验的逻辑可以抽出来,所以变成这样:

const name = document.getElementById('name');
const password = document.getElementById('password');
const submit = document.getElementById('submit');

const validate = function () {
    if (name === '') {
        console.log('用户名不能为空');
        return false;
    }
    if (password === '') {
        console.log('密码不能为空');
        return false;
    }
    return ture;
}

submit.onClick = function() {
    if (!validate()) return;
    console.log('开始上传');
}

但是同样违反了单一职责原则,上传只做上传的事情就OK,不应该参杂校验的逻辑,我们可以用装饰者模式改写如下:

const name = document.getElementById('name');
const password = document.getElementById('password');
const submit = document.getElementById('submit');

Function.prototype.before = function(beforefn) {
    const self = this;

    return function () {
        if (!beforefn.apply(this, arguments)) {
            return;
        }
        return self.apply(this, arguments);
    }
}

const validate = function () {
    if (name === '') {
        console.log('用户名不能为空');
        return false;
    }
    if (password === '') {
        console.log('密码不能为空');
        return false;
    }

    return ture;
}

let forSubmit = function () {
    console.log('开始上传');
}

submit.onClick = forSubmit.before(validate);;

咋们稍稍改了一下before函数,使其前面执行的函数返回为false时不执行后面的函数。用装饰者模式重构一波后,是不是感觉很清爽。。。


最后打两个广告:
酷家乐内推欢迎找我,邮箱:chonger@qunhemail.com
单身妹子欢迎找我,微信:mz975066610^ _ ^

知识共享许可协议
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。