typescript 设计模式 - 适配器模式(三)

定义：

适配器是一种结构型设计模式，它能使不兼容的对象能够相互合作。

适配器可担任两个对象间的封装器， 它会接收对于一个对象的调用， 并将其转换为另一个对象可识别的格式和接口。

typescript 实现

我们日常开发中，经常会使用到适配器模式，可能你没有觉察到。

举个日常前端开发中适配模式的简单例子。

🌰：

服务端网络请求适配器。

日常开发中，我们离不开 Ajax 来跟服务器进行数据交换来达到实现功能目的。 但是，如果每次都调用 XMLHttpRequest 或者 开源的封装库，其实很难满足我们的项目使用需求。 大多数公司都会对，网络请求进行一次适配器封装，来达到统一处理一些数据和抽象底层灵活访问的目的。

下边，我们就以网络请求为例子，做一个简单的 适配器模式实现。

// 类似于 Axios 网络请求库

class FetchRequest {

	constructor() {
		console.log('这就是网上的，开源网络请求库封装。');
	}
	
 	public post(url, header, params) {
 		console.log('我是一个Post 请求', url, header, params);
 	}
 	
 	public get(url, header, params) {
 	
 	}
}


interface MyRequest {
	fetch(): Promise<void>
}

type fetchParams = {
	method: String,
	url: String,
	params: Object,
	header?: Object
}

class AdaptaRequest implements MyRequest {

	private _fetchRequest;
	private _commonHeader;

	constructor ( FetchRequest, header) {
		this._fetchRequest = new FetchRequest();
		this._commonHeader = header;
	}
	
	fetch(params: fetchParams) {
	
		// 其他统一处理
                // 一些动作 
		
		if(params.method === 'POST') {
			const header = Object.assign(this._commonHeader, params.header || {});
			this._fetchRequest.post(params.url, header, params.params)
		} else if(params.method === 'GET') {
			const header = Object.assign(this._commonHeader, params.header || {});
			this._fetchRequest.get(params.url, header, params.params)
		} else {
			this._fetchRequest.get(params.url, header, params.params)
		}
		
	}
	
}


// 使用示例：


const adapterRequest = new AdaptaRequest(FetchRequest, {test: '1'});

// 接下来，我们发起一个get 请求。

adapterRequest.fetch({
	methd: 'GET',
	url: 'https://baidu.com'
}).then(res => {
	console.log('我适配了，底层的网络请求类。 ')
})

// ... and so on 

额， 上边的使用示例代码是不是有点眼熟？？

嗯， 没错。就是和 JQuery 中的， $.ajax 一毛一样的 适配实现哦。！！！ 现在是不是能把老旧代码中的，JQ 写法的网络请求，换成W3c 最新的fetch 呢？ 或者是 开源库 Axios ？

管他呢，只要你爽。你可以在不动老代码的前提下，随意去适配了。

感谢您的阅读，希望能对您有一点点帮助和启发。