三分钟学JS设计模式（六）适配器模式

适配器模式

一、什么是适配器模式

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

举个栗子：美国的电压是110V，自己的手机是220V。买个适配器，手机就能用了。

二、 优缺点

• 优点：

  • 提高代码可复用性：旧的模块接口不支持新的功能，加一层适配就能复用。
  • 灵活性好：不影响原接口，不影响被适配的模块

• 缺点：

  • 过多地使用适配器，会让系统非常零乱，不易整体进行把握。比如，明明看到调用的是 A 接口，其实内部被适配成了 B 接口的实现。[菜鸟教程]

三、场景例子、代码实现

• 场景：antd 组件升级
  2.9之前的Select支持多选multiple属性，但是之后都不支持了，需要使用mode='multiple'替换

// 旧组件
var nameASelector = (
	<OldSelect multiple={true} >
		<Option value="1">张三</Option>
  		<Option value="2">李四</Option>
	</OldSelect >
)

// 新组件
var nameSelector = arnameSelector = (
	<NewSelect mode='multiple'>
		<Option value="1">张三</Option>
  		<Option value="2">李四</Option>
	</NewSelect>
)

接口适配器：

// 接口适配器：
const SelectAdapter = props => {
  let mode = props.mode;
  if(props.multiple){
    mode = 'multiple'
  }
  return (
    <NewSelect mode={mode}>
      <Option value="1">张三</Option>
      <Option value="2">李四</Option>
    </NewSelect>
  )
} 

// 使用这个接口适配器，我们就得到了可以支持两种格式的Select
nameASelector =  (
	<SelectAdapter multiple={true} >
		<Option value="1">张三</Option>
  		<Option value="2">李四</Option>
	</SelectAdapter >
)