目标
理解什么是装饰者模式
为输入框添加新的需求
定义
装饰者模式 (Decorator): 在不改变原对象的基础上, 通过对其进行包装拓展(添加属性或者方法) 使原有对象可以满足用户更复杂需求.
为输入框添加新的需求
- // 装饰者
- var decorator = function(input, fn) {
- // 获取事件源
- var input = document.getElementById(input);
- if (typeof input.onclick === 'function'){
- var oldClickFn = input.onclick;
- input.onclick = function(){
- oldClickFn();
- fn();
- }
- }else{
- input.onclick = fn
- }
- }
- // 电话输入框功能装饰
- decorator('tel_input',function(){
- document.getElementById('tel_demo_text').style.display = 'none'
- })
- // 姓名输入框功能装饰
- decotator('name_input', function(){
- document.getElementById('name_demo_text').style.display='none'
- })
来源: http://www.qdfuns.com/note/51152/c0b5daf85cd2dff3a76e7d058446a64b.html