/**
* 概念：装饰者模式
* 在不改变原对象的基础上，通过对其进行包装拓展（添加属性或者方法）使原有对象可以满足用户对更复杂需求
*/
// 1、为输入框增加新需求
// 原来代码
// 输入框元素
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() {
// 事件源原有回调函数
oldClickFn();
// 执行事件源新增回调函数
}
} else {
// 事件源未绑定事件，直接为事件源添加新增回调函数
input.onclick = fn;
}
}
// 用例
// 电话输入框功能装饰
decorator('tel_input', function() {
document.getElementById('tel_demo_text').style.display = 'none';
})
// 姓名输入框功能装饰
decorator('name_input', function() {
document.getElementById('name_demo_text').style.display = 'none';
})
// 地址输入框装饰
decorator('address_input', function() {
document.getElementById('address_demo_text').style.display = 'none';
})
// end
javascript装饰器模式 --- 2022-11-21
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 1. 装饰器模式的定义 在不改变其原有的结构和功能为对象添加新功能。 2. 场景 2.1 AOP 在函数执行之前或...
- -----------《我就想静静地教书》读书笔记（五） 文/李现风 2022年读书笔记 读书笔记以以下三个出发点...
- 前言 本文为译文,初次翻译,如有误导,请多多包含,阅读英文,可直接戳底下原文链接即可作者:joseph Zimme...
