本文共 1068 字，大约阅读时间需要 3 分钟。

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

   
	
    
顺序: {
  { message }}
	
    
逆序: {
  { reversedMessage }}
   

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

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

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

转载地址：http://mcqwi.baihongyu.com/