装饰者模式

装饰者模式

让我们的代码便于扩展
扩展原有代码的一种方式
例:

<body>
    <div id="box">点击变红</div>
    <script>
    let box = document.getElementById('box')
    box.onclick = function(){
        this.style.color = 'red';
    }

    // 现在要在上面添加需求变背景颜色
    let comom = function(dom, fn){
        let ev = null
       // 判断一个有没有点击事件用ev来传存一下  再添加onclick事件 事件里ev执行,改变this指向
        dom.onclick = dom.onclick && (ev = dom.onclick, function(){
            ev.apply(this);
            fn.apply(this)
        }) || fn
    }

    comom(box, function(){
        this.style.background = 'yellow'
    })

    comom(box, function(){
        this.style.fontSize = '32px'
    })

可以添加无数
    </script>
</body>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 设计模式概述 在学习面向对象七大设计原则时需要注意以下几点:a) 高内聚、低耦合和单一职能的“冲突”实际上,这两者...
    彦帧阅读 3,870评论 0 14
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 178,445评论 25 709
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 13,812评论 2 59
  • 沟通是一个既简单又复杂的过程。 简单,是因为有时只要动动嘴皮子,说几句话,沟通就能完美完成。复杂,是因为有时需要花...
    杨梅泡酒阅读 1,049评论 0 4
  • 十六七岁的时候,王二不务正业,也不会受到责罚。他经常为一些无聊的事情激动,即使花很多时间也不要紧,现在看来简...
    慢条斯理查德阅读 331评论 0 3

友情链接更多精彩内容