JavaScript 设计模式----适配器模式

1. 适配器模式

1.1 适配器模式介绍

• 旧接口格式和使用者不兼容
• 中间加一个适配转换接口

1.2 适配器模式类图

• 传统 UML 类图
  

• 简化后的 UML 类图
  

1.3 适配器模式演示

class Adaptee {
    
    
	specificRequest() {
    
    
		return '德国标准插头'
	}
}

class Target {
    
    
	constructor() {
    
    
		this.adaptee = new Adaptee()
	}
	request() {
    
     // 转换方法
		let info = this.adaptee.specificRequest()
		return `${
      
      info} - 转换器 - 中国标准插头`
}

// 测试
let target = new Target()
let res = target.request()
console.log(res)	

1.4 适配器模式场景

1.4.1 封装旧接口

// 自己封装的 ajax，使用方式如下：
ajax({
    
    
	url:'/getData',
	type:'Post',
	dataType:'json',
	data:{
    
    
		id:"123"
	}
})
.done(function(){
    
    })

// 但因为历史原因，代码中全都是：
// $.ajax({...})

// 做一层适配器
var $ = {
    
    
	ajax:function(options) {
    
    
		return ajax(options);
	}
}

1.4.2 vue computed

<div id="app">
	<p>顺序: {
   
   { message }}</p>
	<p>逆序: {
   
   { reversedMessage }}</p>
</div>

var vm = new Vue({
    
    
	el: '#app',
	data: {
    
    
		message: 'Hello'
	},
	computed: {
    
     // 获取现有信息，进行进一步转换、适配，最终返回页面展示
		// 计算属性的 getter
		reversedMessage: function () {
    
    
			// `this` 指向 vm 实例
			return this.message.split('').reverse().join('') // 转换
		}
	}
})

1.5 适配器模式设计原则验证

• 将旧接口和使用者进行分离
• 符合开放封闭原则