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

介绍

  • 旧接口格式和使用者不兼容,将旧接口和使用者进行分离
  • 中间加一个适配转换接口
    JS设计模式--适配器模式_第1张图片

演示

	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);

场景

  • 封装旧接口
	// 自己封装的ajax,使用方式如下
	ajax({
		url: '/getData',
		type: 'POST',
		dataType: 'json',
		data: { id: "123" },
	}).done(function () {})
	
	// 但由于历史原因,代码中全都是:
	// $.ajax({...})
	// 做一层适配器
	var $ = {
		ajax: function (options) {
			return ajax(options);
		}
	}
  • vue computed
	var vm = new Vue({
		el: '#app',
		data: {
			message: 'Hello',
		},
		computed: {
			reversedMessage: function () {
				return this.message.split('').reverse().join('');
			}
		},
	})

你可能感兴趣的:(JS设计模式)