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

1、模式定义

装饰者模式，在改变原对象的基础上，通过对其进行包装拓展（增加属性或方法），使其能够满足用户更为复杂的需求。

2、生活中的装饰者模式

新买毛坯房并不能满足我们的住宅需求，因此我们需要采购一些装饰材料和家居对毛坯房进行装饰。这个装饰过程，事实上并没有改变原有毛坯房的结构。像这样的装饰，即装饰者模式。

3、装饰者模式 举例

// 装饰者模式：封装一个用于装饰者模式的功能方法

var decorator = function(inputId,fn){
    var input = document.getElementById(inputId);
    
    // 当事件源已经绑定过事件时
    if(typeof input.onclick === 'function'){
        var oldClick = input.onclick;
        input.onclick = function(){
            // 保留旧的默认的onclick事件逻辑
            oldClick();
            // 追加新的能够满足需求的事件逻辑
            fn();
        }
    }else {
        // 当事件源没有绑定过事件时
        input.onclick = fn;
    }
}

// 测试，为输入框架追加事件
decorator('tel_input_id',function(){
    console.log("新增的事件处理逻辑");
});
decorator('tel_input_id',function(){
    console.log("再增加一个事件处理逻辑");
});

从上述示例看到，通过装饰者模式，无论事件源对象之前是否绑定过事件逻辑，我们都可以轻松地为其增加新的事件逻辑。事实上，装饰者模式，就是对原有对象的扩展，为其增加新的属性或方法。