JavaScript设计模式(十)【装饰者模式】

傷城~ 2021-07-04 19:38 839阅读 0赞

装饰已有功能对象

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>装饰已有功能对象</title>
  6. </head>
  7. <body>
  8. <script> //装饰者 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; } } window.onload = function() { //具体使用 decorator('tel_input', function() { //新功能 }); } </script>
  9. </body>
  10. </html>

发表评论

表情：
评论列表 （有 0 条评论，839人围观）

还没有评论，来说两句吧...

相关阅读

    相关 设计模式--装饰者模式

    定义 使用组合和委托动态的将责任附加到对象上，如果要扩展功能，装饰者提供了比继承更有弹性的替代方案。 通俗来说，装饰者就是一些具有独特用途的小组件，它们依赖于一些基础

    小鱼儿小鱼儿/ 0 赞/ 544 阅读