JS设计模式之装饰者模式

装饰者模式概述

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

实际需求

  在已有的代码基础上,为每个表单中的input默认输入框上边显示一行提示文案,当用户点击输入框时文案消失

原有代码:

var telInput = document.getElementById(‘tel_input‘);
var telWarnText = document.getElementById(‘tel_warn_text‘);
input.onclick = function(){
  telWarnText.style.display = ‘inline-block‘;
}

第一次改进后的代码:

var telInput = document.getElementById(‘tel_input‘);
var telWarnText = document.getElementById(‘tel_warn_text‘);
var telDemoText = document.getElementById(‘tel_demo_text‘);
input.onclick = function(){
  telWarnText.style.display = ‘inline-block‘;
  telDemoText.style.display = ‘none‘;
}

第一次改进后产生的问题:

其他页面的表单中还存在不同输入框,比如:姓名、地址等等,我们修改一处地方容易,可每一处代码对应的地方都需要手动一个一个地修改,那么有没有更好的改善方式呢?

第二次改进:使用装饰者模式

var decorator = function(input, fn) {
    // 获取事件源
    var input = document.getElementById(input);
    // 若事件源已绑定事件
    if(typeof input.onclick === ‘function‘) {
        // 缓存事件源原有回调函数
        var oldClickFn = input.onclick;
        // 为事件源定义新的事件
        input.onclick = function() {
            // 事件源原有回调函数
            oldClcikFn();
            // 执行事件源新增回调函数
            fn();
        }
    }else{
        // 事件源未绑定事件,直接为事件源添加新增回调函数
        input.onclick = fn;
    }
}

接下来我们可以这样添加新功能了:

// 电话输入框功能装饰
decorator(‘tel_input‘, function(){
    document.getElementById(‘tel_demo_text‘).style.display = ‘none‘;
})

// 姓名输入框功能装饰
decorator(‘name_input‘, function(){
    document.getElementById(‘tel_demo_text‘).style.display = ‘none‘;
})

说明:使用装饰者模式,我们不需再过度关注对象原有的功能,并且对象原有的方法照样可以原封不动地使用。

  

时间: 2024-10-25 10:08:12

JS设计模式之装饰者模式的相关文章

【JS设计模式】装饰者模式

装饰者模式:在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象 装饰模式的特点 (1) 装饰对象和真实对象有同样的接口.这样client对象就能以和真实对象同样的方式和装饰对象交互.(2) 装饰对象包括一个真实对象的引用(reference)(3) 装饰对象接受全部来自client的请求. 它把这些请求转发给真实的对象.(4) 装饰对象能够在转发这些请求曾经或以后添加一些附加功能.这样就确保了在执行时.不用改动给定对象的结构就能够

设计模式 2 —— 装饰者模式

设计模式目录: 设计模式 1 ——观察者模式 设计模式 2 —— 装饰者模式

JS设计模式(动态工厂模式)

<!--引入的核心JS文件--> <script type="text/javascript" src="CommonUtil.js"></script> <script type=text/javascript charset=utf-8> <!--JS设计模式(细粒度工厂模式)--> //搭建一个工厂环境 买什么车——(去什么店)卖车的店——卖车——生产车 //卖车店 super Shop 只有卖车的方

Design Pattern 设计模式 Decorator 装饰者模式

1 设计一个基类 2 继承这个基类,并包含这个基类的一个对象 3 创建继承类的时候,初始化这个基类,因为是基类指针,所以可以是所有基类的衍生类对象,那么就可以叠加任意多个衍生类对象了. 关键是在衍生类中包含一个基类对象,然后有了继承和包含两重关系,可以使得一个类一个类对象叠加,达到装饰目的. 等于是创建了一个对象指针链表,一个一个对象发挥其相应的作用. 下面程序装饰一个桌子,同时包含释放内存的处理. 关键要知道基类的析构函数必须使用虚函数,为什么? 1 如果基类不是析构函数,那么如果衍生类中包含

【JS 设计模式 】用组合模式来实现树形导航--代码结构思路分析(一)

树导航效果图: 组合模式的描述: 将对象组合成树形结构以表示"部分-整体"的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性. 我们把部分用Leaf表示, 把整体用Composite表示.组合模式是有一定规律的,在实现树导航的情况下,Composite需要包含一个以上Leaf,也可以包含一个以上Leaf和一个以Composite,为什么说要包含一个以上的,如果Composite不包含任何子child的话那么它就是Leaf,Leaf表示是最后一层结节. 树形导航代码片段:

【JS 设计模式 】用组合模式来实现树形导航--JS代码结构思路分析(二)

[JS 设计模式 ]用组合模式来实现树形导航--代码结构思路分析(一) 根据上一节中的HTML代码结构我们通过JS来渲染HTML代码,我们先提供一下JS的代码片段,这代码代码不是一个完整的代码是经过简化的.通过JS代码来分析如何组装HTML的 Composite类型的代码: function TreeComposite(id, name, total, level, last) { var root = document.createDocumentFragment(); var panel =

java设计模式之 装饰器模式

适AT java设计模式之 装饰器模式 装饰器模式 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构. 这种类型的设计模式属于结构型模式,它是作为现有的类的一个包装. 这种模式创建了一个装饰类,用来包装原有的类,并在保持类方法签名完整性的前提下,动态给一个对象添提供了额外的功能. 我们通过下面的实例来演示装饰器模式的用法.模拟一个人从想吃饭.找饭店.享受美食.结束吃饭的过程 代码展示: 首先创建一个被修饰的接口 Eat package deco

记录学习设计模式之装饰者模式

1.装饰者模式定义:给对象动态添加职责的方式称为装饰者(decorator)模式. js如何实现装饰者模式 通过保存原函数引用方式改写某函数 window.onload = function(){alert(1);}var _oldonload = window.onload || function(){};window.onload = function(){    _oldonload();    alert(2);} 缺点:1._oldonload需维护. 2.this被劫持.如docum

设计模式之装饰者模式(Decorator)

1.定义 装饰者模式动态地将责任附加到对象上.若要扩展功能,装饰者提供了比继承更有弹性的替代方案 2.类图 Component抽象构件:Component是一个接口或者是抽象类,就是定义我们最核心的对象,也就是最原始的对象.在装饰者模式中,必然有一个最基本.最核心.最原始的接口或抽象类充当Component抽象构件. ConcreteComponent具体构件:ConcreteComponent是最核心.最原始.最基本的接口或抽象类的实现,你要装饰的就是它. Decorator装饰角色:一般是一