JavaScript 的一些常用设计模式

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

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

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

适配器模式

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

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

例子

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

[ 
  { 
    "label": "选择一", 
    "value": 0 
  }, 
  { 
    "label": "选择二", 
    "value": 1 
  } 
] 

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

[ 
  { 
    "label": "选择一", 
    "text": 0 
  }, 
  { 
    "label": "选择二", 
    "text": 1 
  } 
] 

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

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

单例模式

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

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

例子

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

const createLoginLayer = function() { 
  const div = document.createElement('div') 
  div.innerHTML = '登入浮框' 
  div.style.display = 'none' 
  document.body.appendChild(div) 
  return div 
} 

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

const getSingle = function(fn) { 
  const result 
  return function() { 
    return result || result = fn.apply(this, arguments) 
  } 
} 
const createSingleLoginLayer = getSingle(createLoginLayer) 
 
document.getElementById('loginBtn').onclick = function() { 
  createSingleLoginLayer() 
} 

代理模式

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

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

虚拟代理

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

const myImage = (function() { 
  const imgNode = document.createElement('img') 
  document.body.appendChild(imgNode) 
  return { 
    setSrc: function(src) { 
      imgNode.src = src 
    } 
  } 
})() 
 
const proxyImage = (function() { 
  const img = new Image() 
  img.onload = function() { // http 图片加载完毕后才会执行 
    myImage.setSrc(this.src) 
  } 
  return { 
    setSrc: function(src) { 
      myImage.setSrc('loading.jpg') // 本地 loading 图片 
      img.src = src 
    } 
  } 
})() 
 
proxyImage.setSrc('http://loaded.jpg') 

缓存代理

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

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

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