*装饰者模式(Decorator)

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

 1 <body>
 2     用户:<input id="user" type="text" value='user' />
 3     密码:<input id='password' type="password" value="121212"/><br/>
 4     <div class='parent'>
 5         <div class='fixed'>高度固定</div>
 6         <div class='fill'>填满剩下的高度</div>
 7     </div>
 8     <script type="text/javascript">
 9         // 装饰者:不改变原有对象的基础上,通过对其进行包装拓展(添加方法或者属性)使原有对象可以满足用户更复杂的需求
10         // 比如绑定focus事件
11         function addEvent(dom, type, fn) {
12             // 对于支持DOM2级事件处理程序addEventListener方法的浏览器
13             if(dom.addEventListener) {
14                 dom.addEventListener(type, fn, false);
15                 
16             }
17             // 对于不支持addEventListener方法但支持attachEvent方法的浏览器
18             else if(dom.attachEvent){ 
19                 dom.attachEvent('on' + 'type', fn);
20             }
21             // 对于不支持addEventListener方法也不支持attachEvent方法,但支持on+'事件名'的浏览器
22             else {
23                 dom['on' + type] = fn;
24             }
25         }
26         // 获取事件对象
27         var getEvent = function(event) {
28             // 标准浏览器返回event,IE下window.event
29             return event || window.event;
30         }
31         // 获取元素
32         var getTarget = function(event) {
33             var event = getEvent(event);
34             // 标准浏览器下event.target,IE下event.srcElement
35             return event.target || event.srcElement;
36         } 
37         var user = document.getElementById('user');
38         var password = document.getElementById('password');
39         addEvent(user, 'focus' , function(){
40             console.log("首次绑定focus")
41         });
42         addEvent(password, 'focus' , function(){
43             console.log("首次绑定focus")
44         });
45 
46         // 装饰者
47         var decorator = function(input, fn) {
48             // 获取事件源
49             var input = document.getElementById(input);
50             // 若事件源已经绑定事件
51             if(typeof input.onfocus === 'function') {
52                 // 缓存事件源原有回调函数
53                 var oldClickFn = input.onfocus;
54                 // 为事件源定义新的事件
55                 input.onfocus = function() {
56                     // 事件源定义新的事件
57                     oldClickFn();
58                     // 执行事件源新增的回调函数
59                     fn();
60                 }
61             }else {
62                 // 事件源未绑定事件,直接为事件源添加新增回调函数
63                 input.onfocus = fn;
64             }
65             // 做其他事件
66         }
67 
68         // 举例
69         decorator('user', function() {
70             console.log('2')
71         })
72         decorator('password', function() {
73             console.log('3')
74         })
75     </script>
76 </body>

 

posted on 2021-01-29 11:12  大黑ylx  阅读(60)  评论(0编辑  收藏  举报