编程语言常用设计模式有哪些？

设计模式是前人解决某个特定场景下对而总结出来的一些解决方案。可能刚开始接触编程还没有什么经验的时候，会感觉设计模式没那么好理解，这个也很正常。有些简单的设计模式我们有时候用到，不过没意识到也是存在的。

学习设计模式，可以让我们在处理问题的时候提供更多更快的解决思路。

当然设计模式的应用也不是一时半会就会上手，很多情况下我们编写的业务逻辑都没用到设计模式或者本来就不需要特定的设计模式。

适配器模式

这个使我们常使用的设计模式，也算最简单的设计模式之一，好处在于可以保持原有接口的数据结构不变动。

适配器模式(Adapter Pattern)是作为两个不兼容的接口之间的桥梁。

例子

适配器模式很好理解，假设我们和后端定义了一个接口数据结构为(可以理解为旧接口)：

1. [ 
2.   { 
3.     "label": "选择一", 
4.     "value": 0 
5.   }, 
6.   { 
7.     "label": "选择二", 
8.     "value": 1 
9.   } 
10. ] 

但是后端后面因为其他原因，需要定义返回的结构为(可以理解为新接口)：

1. [ 
2.   { 
3.     "label": "选择一", 
4.     "text": 0 
5.   }, 
6.   { 
7.     "label": "选择二", 
8.     "text": 1 
9.   } 
10. ] 

然后我们前端的使用到后端接口有好几处，那么我可以把新的接口字段结构适配为老接口的，就不需要各处去修改字段，只要把源头的数据适配好就可以了。

当然上面的是非常简单的场景，也是经常用到的场景。或许你会认为后端处理不更好了，的确是这样更好，但是这个不是我们讨论的范围。

单例模式

单例模式，从字面意思也很好理解，就是实例化多次都只会有一个实例。

有些场景实例化一次，可以达到缓存效果，可以减少内存占用。还有些场景就是必须只能实例化一次，否则实例化多次会覆盖之前的实例，导致出现 bug(这种场景比较少见)。

例子

实现弹框的一种做法是先创建好弹框, 然后使之隐藏, 这样子的话会浪费部分不必要的 DOM 开销, 我们可以在需要弹框的时候再进行创建, 同时结合单例模式实现只有一个实例, 从而节省部分 DOM 开销。下列为登入框部分代码:

1. const createLoginLayer = function() { 
2.   const div = document.createElement('div') 
3.   div.innerHTML = '登入浮框' 
4.   div.style.display = 'none' 
5.   document.body.appendChild(div) 
6.   return div 
7. } 

使单例模式和创建弹框代码解耦

1. const getSingle = function(fn) { 
2.   const result 
3.   return function() { 
4.     return result || result = fn.apply(this, arguments) 
5.   } 
6. } 
7. const createSingleLoginLayer = getSingle(createLoginLayer) 
8.  
9. document.getElementById('loginBtn').onclick = function() { 
10.   createSingleLoginLayer() 
11. } 

代理模式

代理模式的定义：为一个对象提供一个代用品或占位符，以便控制对它的访问。

代理对象拥有本体对象的一切功能的同时，可以拥有而外的功能。而且代理对象和本体对象具有一致的接口，对使用者友好。

虚拟代理

下面这段代码运用代理模式来实现图片预加载,可以看到通过代理模式巧妙地将创建图片与预加载逻辑分离,，并且在未来如果不需要预加载，只要改成请求本体代替请求代理对象就行。

1. const myImage = (function() { 
2.   const imgNode = document.createElement('img') 
3.   document.body.appendChild(imgNode) 
4.   return { 
5.     setSrc: function(src) { 
6.       imgNode.src = src 
7.     } 
8.   } 
9. })() 
10.  
11. const proxyImage = (function() { 
12.   const img = new Image() 
13.   img.onload = function() { // http 图片加载完毕后才会执行 
14.     myImage.setSrc(this.src) 
15.   } 
16.   return { 
17.     setSrc: function(src) { 
18.       myImage.setSrc('loading.jpg') // 本地 loading 图片 
19.       img.src = src 
20.     } 
21.   } 
22. })() 
23.  
24. proxyImage.setSrc('http://loaded.jpg') 

缓存代理

在原有的功能上加上结果缓存功能，就属于缓存代理。

原先有个功能是实现字符串反转(reverseString)，那么在不改变 reverseString 的现有逻辑，我们可以使用缓存代理模式实现性能的优化，当然也可以在值改变的时候去处理下其他逻辑，如 Vue computed 的用法。

1. function reverseString(str) { 
2.   return str 
3.     .split('') 
4.     .reverse() 
5.     .join('') 
6. } 
7. const reverseStringProxy = (function() { 
8.   const cached = {} 
9.   return function(str) { 
10.     if (cached[str]) { 
11.       return cached[str] 
12.     } 
13.     cached[str] = reverseString(str) 
14.     return cached[str] 
15.   } 
16. })() 

订阅发布模式

订阅发布使前端常用的数据通信方式、异步逻辑处理等等，如 React setState 和 Redux 就是订阅发布模式的。

但是要合理的使用订阅发布模式，否则会造成数据混乱，redux 的单向数据流思想可以避免数据流混乱的问题。

例子

1. class Event { 
2.   constructor() { 
3.     // 所有 eventType 监听器回调函数（数组） 
4.     this.listeners = {} 
5.   } 
6.   /** 
7.    * 订阅事件 
8.    * @param {String} eventType 事件类型 
9.    * @param {Function} listener 订阅后发布动作触发的回调函数，参数为发布的数据 
10.    */ 
11.   on(eventType, listener) { 
12.     if (!this.listeners[eventType]) { 
13.       this.listeners[eventType] = [] 
14.     } 
15.     this.listeners[eventType].push(listener) 
16.   } 
17.   /** 
18.    * 发布事件 
19.    * @param {String} eventType 事件类型 
20.    * @param {Any} data 发布的内容 
21.    */ 
22.   emit(eventType, data) { 
23.     const callbacks = this.listeners[eventType] 
24.     if (callbacks) { 
25.       callbacks.forEach((c) => { 
26.         c(data) 
27.       }) 
28.     } 
29.   } 
30. } 
31.  
32. const event = new Event() 
33. event.on('open', (data) => { 
34.   console.log(data) 
35. }) 
36. event.emit('open', { open: true }) 

观察者模式

观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个目标对象，当这个目标对象的状态发生变化时，会通知所有观察者对象，使它们能够自动更新。

Vue 的数据驱动就是使用观察者模式，mbox 也是使用观察者模式。

例子

模仿 Vue 数据驱动渲染模式(只是类似，简单的模仿)。

首先使用 setter 和 getter 监听到数据的变化：

1. const obj = { 
2.   data: { description: '' }, 
3. } 
4.  
5. Object.defineProperty(obj, 'description', { 
6.   get() { 
7.     return this.data.description 
8.   }, 
9.   set(val) { 
10.     this.data.description = val 
11.   }, 
12. }) 

然后加上目标和观察者

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('这里改变了')