JS设计模式之适配器模式.md

title	categories	tags	toc	comments
JS设计模式之适配器模式	原创	JavaScript 设计模式 结构型模式	true	true

前言

本文709字，阅读大约需要5分钟。

总括: 在Javascript中实现23种经典设计模式的适配器模式。

• 公众号：「前端进阶学习」，回复「666」，获取一揽子前端技术书籍

理想的书籍是智慧的钥匙。

正文

适配器模式(Adapter pattern): 将一个类（对象）的接口（方法或属性）转化成另外一个接口（方法或属性）。

两个比喻

说起适配器现实中最先想到的可能就是电源适配器，Mac中的电池支持的电压是220V，但我们生活中的交流电压一般是220V，而日本和韩国的电压是100V，笔记本电脑的电源适配器就承担了电压转换的工作，从而使得笔记本电脑在100V~220V的电压下都能正常工作，这就是一个适配器。

另外一个比较常见的适配器是水管之间的直角弯管，这个直角弯管就是一个典型的适配器。

适配器模式的应用

假如我们有如下函数在项目中使用：

var util = {
	indexOf(array, value, fromIndex) {
    // ...省略实现
  }
  // ...省略实现
}

如上我们自己实现了很多的util工具方法，此时引入lodash后，我们可能需要适配一下直接调用lodash的方法：

var util = {
	indexOf(array, value, fromIndex) {
    _.indexOf(array, value, fromIndex)
  }
  // ...省略实现
}

再看一个参数适配的实现：

function doSomething(params) {
  var _adapter = {
    name: 'tangitan',
    title: '设计模式'
  };
  Object.keys(params).forEach((key) => {
    _adapter[key] =  params[key];
  });
  // ... 省略代码
}

如上就是对参数的一个简单的适配。

• 适配器就是一个中间实现，它不会关心两个对象是如何实现的，也不会对两个对象作出更改，但通过它两个对象就可以共同存在；
• 装饰者模式和代理模式也不会改变原有的对象，但装饰者模式是为了给对象增加功能，代理模式更多的是为了控制对对象的访问；
• 外观模式和适配器也很相似，但外观模式不一样，它实现了一个新的对象，实际调用的也是这个新对象，解决的是兼容问题；

以上。

---

能力有限，水平一般，欢迎勘误，不胜感激。

转载请获本人授权，并注明作者和出处。

订阅更多文章可关注公众号「前端进阶学习」，回复「666」，获取一揽子前端技术书籍