加入收藏 | 设为首页 | 会员中心 | 我要投稿 PHP编程网 - 黄冈站长网 （http://www.0713zz.com/）- 数据应用、建站、人体识别、智能机器人、语音技术!
当前位置： 首页 > 运营中心 > 建站资源 > 优化 > 正文

JavaScript 的一些常用设计模式

发布时间：2019-08-20 03:46:49 所属栏目：优化 来源：xianshannan
导读：副标题#e# 设计模式是前人解决某个特定场景下对而总结出来的一些解决方案。可能刚开始接触编程还没有什么经验的时候，会感觉设计模式没那么好理解，这个也很正常。有些简单的设计模式我们有时候用到，不过没意识到也是存在的。 学习设计模式，可以让我们在

然后加上目标和观察者

  1. class Subject { 
  2.   constructor() { 
  3.     this.observers = [] 
  4.   } 
  5.  
  6.   add(observer) { 
  7.     this.observers.push(observer) 
  8.   } 
  9.  
  10.   notify(data) { 
  11.     this.observers.forEach((observer) => observer.update(data)) 
  12.   } 
  13. } 
  14.  
  15. class Observer { 
  16.   constructor(callback) { 
  17.     this.callback = callback 
  18.   } 
  19.   update(data) { 
  20.     this.callback && this.callback(data) 
  21.   } 
  22. } 
  23.  
  24. // 创建观察者ob1 
  25. let ob1 = new Observer((text) => { 
  26.   document.querySelector('#dom-one').innerHTML(text) 
  27. }) 
  28. // 创建观察者ob2 
  29. let ob2 = new Observer((text) => { 
  30.   document.querySelector('#dom-two').innerHTML(text) 
  31. }) 
  32. // 创建目标sub 
  33. let sub = new Subject() 
  34. // 目标sub添加观察者ob1 （目标和观察者建立了依赖关系） 
  35. sub.add(ob1) 
  36. // 目标sub添加观察者ob2 
  37. sub.add(ob2) 
  38. // 目标sub触发事件（目标主动通知观察者） 
  39. sub.notify('这里改变了') 

组合在一起是这样的

  1. <!DOCTYPE html> 
  2. <html> 
  3.   <head> 
  4.     <meta charset="utf-8" /> 
  5.     <meta 
  6.       name="viewport" 
  7.       content="width=device-width,initial-scale=1,maximum-scale=1,viewport-fit=cover" 
  8.     /> 
  9.     <title></title> 
  10.   </head> 
  11.   <body> 
  12.     <div id="app"> 
  13.       <div id="dom-one"> 
  14.         原来的值 
  15.       </div> 
  16.       <br /> 
  17.       <div id="dom-two"> 
  18.         原来的值 
  19.       </div> 
  20.       <br /> 
  21.       <button id="btn">改变</button> 
  22.     </div> 
  23.     <script> 
  24.       class Subject { 
  25.         constructor() { 
  26.           this.observers = [] 
  27.         } 
  28.  
  29.         add(observer) { 
  30.           this.observers.push(observer) 
  31.         } 
  32.  
  33.         notify() { 
  34.           this.observers.forEach((observer) => observer.update()) 
  35.         } 
  36.       } 
  37.  
  38.       class Observer { 
  39.         constructor(callback) { 
  40.           this.callback = callback 
  41.         } 
  42.         update() { 
  43.           this.callback && this.callback() 
  44.         } 
  45.       } 
  46.  
  47.       const obj = { 
  48.         data: { description: '' }, 
  49.       } 
  50.  
  51.       // 创建观察者ob1 
  52.       const ob1 = new Observer(() => { 
  53.         console.log(document.querySelector('#dom-one')) 
  54.         document.querySelector('#dom-one').innerHTML = obj.description 
  55.       }) 
  56.       // 创建观察者ob2 
  57.       const ob2 = new Observer(() => { 
  58.         document.querySelector('#dom-two').innerHTML = obj.description 
  59.       }) 
  60.       // 创建目标sub 
  61.       const sub = new Subject() 
  62.       // 目标sub添加观察者ob1 （目标和观察者建立了依赖关系） 
  63.       sub.add(ob1) 
  64.       // 目标sub添加观察者ob2 
  65.       sub.add(ob2) 
  66.  
  67.       Object.defineProperty(obj, 'description', { 
  68.         get() { 
  69.           return this.data.description 
  70.         }, 
  71.         set(val) { 
  72.           this.data.description = val 
  73.           // 目标sub触发事件（目标主动通知观察者） 
  74.           sub.notify() 
  75.         }, 
  76.       }) 
  77.       btn.onclick = () => { 
  78.         obj.description = '改变了' 
  79.       } 
  80.     </script> 
  81.   </body> 
  82. </html> 

装饰者模式

装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能，同时又不改变其结构。

ES6/7 的decorator 语法提案，就是装饰者模式。

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
相关内容
    推荐文章
    站长推荐
    热点阅读

      【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

      建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的优质浏览效果

      Copygight © 2013-2023 http://www.0713zz.com/ All Rights Reserved. PHP编程网 - 黄冈站长网

      ICP备案：浙ICP备07501134号 浙公网安备 33038102330482号