装饰者模式

装饰者模式

当有很多元素，原有功能不能满足需求，需要添砖加瓦，可以采用装饰者模式

比如修改一个表单内所有input框的点击事件，为了不破坏原有onclick事件，同时添加新的onclick事件，需要先找到原来的功能部分，然后针对性的去修改或添加事件，为了避免麻烦，可以写一个装饰者去简化

const decorator = function(input, fn){
    // 获取DOM
    const input = document.getElementById(input)
    // 修改或添加新的点击事件
    if(typeof input.onclick === "function"){
        const oldClickFn = input.onclick
        input.onclick = function(){
            oldClickFn()
            fn()
        }
    }else{
        input.onclick = fn()
    }
    // 做其他事情
}

此时使用起来就无须在意以前代码，直接添加新的功能即可

// 此时修改就可以方便一些
decorator("telInput", function(){
    // 新的点击需求
})
decorator("nameInput", function(){
    // 新的点击需求
})
decorator("adressInput", function(){
    // 新的点击需求
})