JavaScript设计模式--装饰者模式

奋飛

修改于 2020-10-21 10:03:23

3960

修改于 2020-10-21 10:03:23

有时我们不希望某个类天生就非常庞大，一次性包含许多职责。那么我们就可以使用装饰着模式。装饰着模式可以动态地给某个对象添加一些额外的职责，从而不影响这个类中派生的其他对象。 装饰着模式将一个对象嵌入另一个对象之中，实际上相当于这个对象被另一个对象包装起来，形成一条包装链。

一、不改动原函数的情况下，给该函数添加些额外的功能

1. 保存原引用

window.onload = function() {
    console.log(1);
};

var _onload = window.onload || function() {};

window.onload = function() {
    _onload();
    console.log(2);
}

问题：（1）必须维护中间变量（2）可能遇到this被劫持问题

在window.onload的例子中没有这个烦恼，是因为调用普通函数_onload时，this也指向window，跟调用window.onload时一样。

2. this被劫持：

var _getElementById = document.getElementById;
document.getElementById = function(id) {
    console.log(1);
    return _getElementById(id);
}

return _getElementById(id);  // 报错“Uncaught TypeError: Illegal invocation”

因为_getElementById是全局函数，当调用全局函数时，this是指向window的，而document.getElementById中this预期指向document。

3. 解决this被劫持：

var _getElementById = document.getElementById;
document.getElementById = function(id) {
    console.log(1);
    return _getElementById.call(document, id);
}

二、用AOP装饰函数

/* 让新添加的函数在原函数之前执行（前置装饰）*/
Function.prototype.before = function(beforefn) {
    var _self = this;
    return function() {
        beforefn.apply(this, arguments);    // 新函数接收的参数会被原封不动的传入原函数
        return _self.apply(this, arguments);
    };
};

/* 让新添加的函数在原函数之后执行（后置装饰）*/
Function.prototype.after = function(afterfn) {
    var _self = this;
    return function() {
        var ret = _self.apply(this, arguments);
        afterfn.apply(this, arguments);
        return ret;
    };
};

document.getElementById = document.getElementById.before(function() {
    console.log(1);
});

三、避免污染原型

var before = function(fn, beforefn) {
    return function() {
        beforefn.apply(this, arguments);
        return fn.apply(this, arguments);
    };
};

var after = function(fn, afterfn) {
    return function() {
        var ret = fn.apply(this, arguments);
        afterfn.apply(this, arguments);
        return ret;
    };
};

document.getElementById = before(document.getElementById, function(){
    console.log(1);
});

四、示例–插件式的表单验证

结合《JavaScript设计模式–策略模式》中的【表单验证】，运用到ajax提交数据验证，效果很棒！

修改上述before方法

var before = function(fn, beforefn) {
    return function() {
        if(beforefn.apply(this, arguments) === false) {
            // beforefn返回false，直接return，不执行后面的原函数
            return;
        }
        return fn.apply(this, arguments);
    };
};

/* 模拟数据验证*/
var validate = function() {
    if(username === "") {
        console.log("验证失败！");
        return false;
    }
    return true;
}
/* 模拟ajax提交*/
var formSubmit = function() {
    console.log("提交！！！");
}


username = 1;
formSubmit = before(formSubmit, validate);  // 提交！！！
formSubmit();

username = "";
formSubmit = before(formSubmit, validate);  // 验证失败！
formSubmit();

五、装饰者模式和代理模式

相同点：这两种模式都描述了怎么为对象提供一定程度上的间接引用，它们的实现部分都保留了对另外一个对象的引用，并且向那个对象发送请求。

区别： （1）代理模式：当直接访问本地不方便或者不符合需求时，为这个本体提供一个替代者。本地定义关键功能，而代理提供或拒绝对它的访问，或者在访问本体之前走一些额外的事情。（其做的事情还是跟本体一样）（2）装饰者模式：为对象动态加入行为。（一开始不能确定对象的全部功能，实实在在的为对象添加新的职责和行为）

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2015年12月20日，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

javascript

登录后参与评论

0 条评论

热度