介紹
- 舊接口模式和使用者不兼容
- 中間加一個適配器轉(zhuǎn)接口
比如你去香港或者出國去一些國家，他們的插排接口和我們都不一樣，我要充電不能直接用眷唉，這個時候就需要一個適配器來轉(zhuǎn)換一下電壓曹铃。
UML類圖
適配器模式UML類圖
代碼演示
class Adaptee {
specificRequest() {
return "德國標準插頭";
}
}
class Target {
constructor() {
this.adaptee = new Adaptee()
}
request() {
let info = this.adaptee.specificRequest();
return `${info} - 轉(zhuǎn)換器 - 中國插頭`
}
}
// 測試
let target = new Target();
let res = target.request();
console.log(res);
場景
- 封裝舊接口
- vue computed
封裝舊接口
// 自己封裝的 ajax 使用方法如下
ajax({
url: '/getData',
type: 'post',
dataType: 'json',
data: {
id: "123"
}
})
.done(function(){})
// 但因為歷史原因妓局，代碼中全都是：
// $.ajax({...})
如果這時候不適用jquery了，手動去一個個替換$.ajax不靠譜哺眯，舊接口不兼容谷浅，這時候我們只需要一個適配器來封裝舊接口來實現(xiàn)，而且以后的也還可以繼續(xù)像Jquery使用
// 做一層適配器
var $ = {
ajax: function(options){
return ajax(options);
}
}
vue的計算屬性也是一個適配器奶卓，這里我拿官網(wǎng)demo來展示下一疯，可以仔細品味下
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>計算后反轉(zhuǎn)字符串: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
}
}
})
</script>
設(shè)計原則驗證
- 將舊接口和使用者進行分離
- 符合開放封閉原則
本文資料來自慕課網(wǎng)-雙越老師-Javascript 設(shè)計模式系統(tǒng)講解與應(yīng)用視頻課程
