《JS设计模式》笔记-装饰者模式

装饰者模式:在不改变原有对象的基础上,通过其进行包装拓展(添加属性或者方法),使原有对象可以满足用户的更复杂需求

通用描述:在给对象扩展属性或者方法时,不要直接覆盖,而是将原有属性和方法缓存起来,然后一起添加上去。

示例:按钮添加了点击事件"登录",需要补充一个方法,即在登录前做一个校验。

// 已添加登录方法
var button = document.getElementById('button')
button.onclick = function () {
    console.log('登录')
}

// 补充校验方法
var decorator = function (dom, fn) {
    var dom = document.getElementById('button')
    if (dom.onclick instanceof Function) {
        var oldFn = dom.onclick
        dom.onclick = function () {
            fn()
            oldFn()
        }
    } else {
        dom.onclick = fn
    }
}
decorator('button', function () {
    console.log('校验')
})

思考整理:

对比

一:我认为和外观模式有一定相似性。 都是对既有方法对一种合并处理策略。只是装饰者模式侧重于处理内部问题,装饰者模式侧重于 添加新的属性方法。就像名字一样,一个是对外提供,一个是对内添加。

问题

在使用装饰者模式时,因为它是面向过程的,又是在不修改原有方法时对指针指向的方法做了修改,不可避免的就会存在 可能出现同一个方法不同指向的问题 ,所以这种模式使用时,需要格外注意。

随机浏览