個人簡介
??個人主頁： 前端雜貨鋪
???♂?學習方向： 主攻前端方向，正逐漸往全干發(fā)展
??個人狀態(tài)： 研發(fā)工程師，現(xiàn)效力于中國工業(yè)軟件事業(yè)
??人生格言： 積跬步至千里，積小流成江海
??推薦學習：??前端面試寶典 ??Vue2 ??Vue3 ??Vue2/3項目實戰(zhàn) ??Node.js??Three.js ??JS版算法
??個人推廣：每篇文章最下方都有加入方式，旨在交流學習&資源分享，快加入進來吧
??前言
大家好，這里是前端雜貨鋪。
上一節(jié)，我們學習了簡單工廠模式、抽象工廠模式和建造者模式，它們都隸屬于設計模式中的 創(chuàng)建型模式。這一節(jié)，我們學習單例模式、裝飾器模式和適配器模式…
一、單例模式
單例模式是一種創(chuàng)建型設計模式。它保證一個類僅有一個實例，并提供一個訪問它的全局訪問點。主要解決一個全局使用的類頻繁地創(chuàng)建和銷毀，占用內存。
如下例子，在不刷新網(wǎng)頁的情況下，我們再次修改已經(jīng)創(chuàng)建的實例，實例不會發(fā)生更改，因為單例模式只在第一次創(chuàng)建的時候有效。
應用場景：創(chuàng)建一個對象要消耗的資源多（如寫日志）、只允許一個線程訪問（如計數(shù)器，確保線程安全）。
class Singleton {
constructor(name, age) {
if (!Singleton.instance) {
this.name = name;
this.age = age;
Singleton.instance = this;
}
return Singleton.instance;
}
}
let zahuopu;
zahuopu = new Singleton('前端雜貨鋪', 22);
zahuopu = new Singleton('CSDN', 2023);
console.log('zahuopu', zahuopu);
二、裝飾器模式
裝飾器模式能夠很好的 對已有功能進行拓展，它不會更改原有的代碼，極大地減小了對其他業(yè)務的影響，這樣就可以方便我們在較少改動下對軟件功能進行拓展。
舉個栗子：原本的程序有 test() 主業(yè)務，現(xiàn)在我們想在不更改原有代碼的情況下在 主業(yè)務之前 或 主業(yè)務之后 添加一些新的業(yè)務，那么這個時候就可以使用我們的裝飾器模式。
應用場景：API 參數(shù)驗證、日志記錄等。
Function.prototype.before = function (beforeFn) {
let _this = this;
return () => {
// 前置函數(shù)調用
beforeFn.apply(this, arguments);
// 執(zhí)行原來的函數(shù)
return _this.apply(this, arguments);
}
}
Function.prototype.after = function (afterFn) {
let _this = this;
return () => {
let result = _this.apply(this, arguments);
// 后置函數(shù)調用
afterFn.apply(this, arguments);
// 執(zhí)行原來的函數(shù)
return result;
}
}
function test() {
console.log('主業(yè)務');
}
let test1 = test.before(() => {
console.log('前置業(yè)務');
}).after(() => {
console.log('后置業(yè)務');
});
test1();
三、適配器模式
適配器模式 將一個類的接口轉換成客戶希望的另一個接口。它讓那些接口不兼容的類可以一起工作。
舉個栗子：我們家庭用電基本都是 220V 的，但直接給電器這么大伏特的電顯然是不行的（直接燒了），這個時候就需要一個轉接頭對伏特進行處理，使得電器能夠正常使用。
再舉個栗子：對于 百度地圖 和 騰訊地圖 是由兩個團隊各自研發(fā)的，它們里面的 接口顯然是不一樣的。我們 在美團上找店鋪位置的時候會讓我們選擇打開百度地圖還是騰訊地圖。這個時候美團就可以 默認調用百度地圖的接口，再使用適配器模式讓不兼容的騰訊地圖變的兼容起來。
// 騰訊地圖
class TencentMap {
show() {
console.log("開始渲染騰訊地圖");
}
}
// 百度地圖
class BaiduMap {
display() {
console.log("開始渲染百度地圖");
}
}
// 由于 renderMap 默認調用的是 display(), 而 TencentMap 調用的是 show()
// 所以我們需要做一個適配器 TencentAdapter 繼承自 TencentMap, 通過 display() 去調用 show()
class TencentAdpater extends TencentMap {
constructor() {
super();
}
display() {
this.show();
}
}
// 渲染地圖（由于百度地圖和騰訊地圖是兩個團隊，內置方法不統(tǒng)一，我們先默認渲染百度地圖）
function renderMap(map) {
map.display()
}
renderMap(new TencentAdpater());
renderMap(new BaiduMap())
????本篇小結
本文我們了解了單例模式、裝飾器模式和適配器模式。
單例模式 是一種 創(chuàng)建型設計模式，它確保一個類只有一個實例，并提供一個全局訪問點來訪問該實例。
裝飾器模式 是一種 結構型設計模式，它允許向一個現(xiàn)有的對象添加新的功能，同時又不改變其結構。
適配器模式 是一種 結構型設計模式。它是兩個不兼容接口之間的橋梁，把兩個獨立接口的功能進行了良好的結合。
好啦，本篇文章到這里就要和大家說再見啦，祝你這篇文章閱讀愉快，你下篇文章的閱讀愉快留著我下篇文章再祝！
參考資料：文章來源：http://www.zghlxwxcb.cn/news/detail-695718.html
- 百度百科 · 軟件設計模式（設計模式）
- 菜鳥教程 · 設計模式
- JavaScript設計模式 【作者：千鋒教育】
文章來源地址http://www.zghlxwxcb.cn/news/detail-695718.html
到了這里，關于JavaScript設計模式（三）——單例模式、裝飾器模式、適配器模式的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
