設(shè)計(jì)模式是為了更好的代碼重用性，可讀性，可靠性放可，可維護(hù)性。
1朝刊、工廠模式：簡(jiǎn)單工廠模式 工廠模式 抽象工廠模式
新建立一個(gè)工廠 去根據(jù)具體需要去幾種建立或者分發(fā)到不同的工廠去實(shí)例化對(duì)象
簡(jiǎn)單工廠：比如我要生產(chǎn)一個(gè)手機(jī) 一個(gè)工廠根據(jù)傳入?yún)?shù)的不同去分別實(shí)例化華為和蘋果的手機(jī)
工廠模式：比如我要生產(chǎn)一個(gè)手機(jī) 有一個(gè)總工廠 根據(jù)傳入的品牌 去通知不同的工廠生產(chǎn)手機(jī) 然后返回
抽象工廠：生產(chǎn)手機(jī)更加具體 比如芯片和電池都是不同的工廠
2耀里、單例模式： 保證一個(gè)類只能實(shí)例化一個(gè)對(duì)象 （比如登錄和購(gòu)物車）在實(shí)例化的時(shí)候判斷是否有 沒(méi)有才創(chuàng)建新實(shí)例返回
所以實(shí)例化出來(lái)的對(duì)象都是相等的
3、適配器模式： 類似于生活中的轉(zhuǎn)換器 讓不兼容的東西兼容
相當(dāng)于 我想要的不是你 但是把你轉(zhuǎn)換成我想要的 這轉(zhuǎn)換過(guò)程就是適配器模式
比如vue的計(jì)算屬性
//HTML代碼
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
//javascirpt
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計(jì)算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實(shí)例
return this.message.split('').reverse().join('')
}
}
})
//顯示結(jié)果
Original message: "Hello"
Computed reversed message: "olleH"
4拾氓、裝飾器模式： 簡(jiǎn)單說(shuō)就是在不改變自身的情況下 對(duì)原有的類進(jìn)行功能增加和擴(kuò)展
為對(duì)象添加新功能
不改變其原有的結(jié)構(gòu)和功能
class Circle {
draw() {
console.log("畫一個(gè)圓形");
}
}
class Decorator {
constructor(circle){
this.circle = circle;
}
draw() {
this.circle.draw();
this.setRedBorder(this.circle);
}
setRedBorder(circle) {
console.log("設(shè)置紅色邊框")
}
}
// 測(cè)試代碼
let circle = new Circle();
circle.draw()
let dec = new Decorator(circle);
dec.setRedBorder();
利用AOP給函數(shù)動(dòng)態(tài)添加功能冯挎，即Function的after或者before
應(yīng)用場(chǎng)景：ES7裝飾器、Vuex中1.0版本混入Vue時(shí)咙鞍，重寫init方法房官、Vue中數(shù)組變異方法實(shí)現(xiàn)等
5、代理模式：為其他對(duì)象提供一種代理续滋，便以控制對(duì)這個(gè)對(duì)象的訪問(wèn)翰守，不能直接訪問(wèn)目標(biāo)對(duì)象
https://www.cnblogs.com/loveyt/p/11410593.html
這里的圖片預(yù)加載相使用代理模式 相當(dāng)于 myImage就只負(fù)責(zé)創(chuàng)建節(jié)點(diǎn) 設(shè)置src
而代理對(duì)象才是去再設(shè)置圖片之前去加載一層預(yù)加載圖片 相當(dāng)于我們加載某個(gè)圖片的時(shí)候我們直接去訪問(wèn)代理對(duì)象
于文檔中代碼 我們可能封裝一下 傳入2個(gè)參數(shù) 一個(gè)預(yù)加載的本地圖片地址 和 服務(wù)器上的正式圖片地址 即可復(fù)用
應(yīng)用場(chǎng)景：ES6 Proxy、Vuex中對(duì)于getters訪問(wèn)疲酌、圖片預(yù)加載等
6蜡峰、外觀模式
為一組復(fù)雜的子系統(tǒng)接口提供一個(gè)更高級(jí)的統(tǒng)一接口了袁，通過(guò)這個(gè)接口使得對(duì)子系統(tǒng)接口的訪問(wèn)更容易，不符合單一職責(zé)原則和開放封閉原則
我感覺跟工廠模式有點(diǎn)像呢湿颅。载绿。。
class A {
eat () {}
}
class B {
eat () {}
}
class C {
eat () {
const a = new A();
const b = new B();
a.eat();
b.eat();
}
}
// 跨瀏覽器事件偵聽器
function addEvent(el, type, fn) {
if (window.addEventListener) {
el.addEventListener(type, fn, false);
} else if (window.attachEvent) {
el.attachEvent('on' + type, fn);
} else {
el['on' + type] = fn;
}
}
應(yīng)用場(chǎng)景：JS事件不同瀏覽器兼容處理油航、同一方法可以傳入不同參數(shù)兼容處理等
觀察者模式
7崭庸、定義對(duì)象間的一種一對(duì)多的依賴關(guān)系，當(dāng)一個(gè)對(duì)象的狀態(tài)發(fā)生改變時(shí)谊囚，所有依賴于它的對(duì)象都將得到通知
class Subject {
constructor () {
this.state = 0;
this.observers = [];
}
getState () {
return this.state;
}
setState (state) {
this.state = state;
this.notify();
}
notify () {
this.observers.forEach(observer => {
observer.update();
})
}
attach (observer) {
this.observers.push(observer);
}
}
class Observer {
constructor (name, subject) {
this.name = name;
this.subject = subject;
this.subject.attach(this);
}
update () {
console.log(`${this.name} update, state: ${this.subject.getState()}`);
}
}
let sub = new Subject();
let observer1 = new Observer('o1', sub);
let observer2 = new Observer('o2', sub);
sub.setState(1);
觀察者模式與發(fā)布/訂閱模式區(qū)別: 本質(zhì)上的區(qū)別是調(diào)度的地方不同
雖然兩種模式都存在訂閱者和發(fā)布者（具體觀察者可認(rèn)為是訂閱者怕享、具體目標(biāo)可認(rèn)為是發(fā)布者），但是觀察者模式是由具體目標(biāo)調(diào)度的秒啦，而發(fā)布/訂閱模式是統(tǒng)一由調(diào)度中心調(diào)的熬粗，所以觀察者模式的訂閱者與發(fā)布者之間是存在依賴的，而發(fā)布/訂閱模式則不會(huì)余境。
---觀察者模式：目標(biāo)和觀察者是基類，目標(biāo)提供維護(hù)觀察者的一系列方法灌诅，觀察者提供更新接口芳来。具體觀察者和具體目標(biāo)繼承各自的基類，然后具體觀察者把自己注冊(cè)到具體目標(biāo)里猜拾，在具體目標(biāo)發(fā)生變化時(shí)候即舌，調(diào)度觀察者的更新方法。
比如有個(gè)“天氣中心”的具體目標(biāo)A挎袜，專門監(jiān)聽天氣變化顽聂，而有個(gè)顯示天氣的界面的觀察者B，B就把自己注冊(cè)到A里盯仪，當(dāng)A觸發(fā)天氣變化紊搪，就調(diào)度B的更新方法，并帶上自己的上下文全景。
---發(fā)布/訂閱模式：訂閱者把自己想訂閱的事件注冊(cè)到調(diào)度中心耀石，當(dāng)該事件觸發(fā)時(shí)候，發(fā)布者發(fā)布該事件到調(diào)度中心（順帶上下文）爸黄，由調(diào)度中心統(tǒng)一調(diào)度訂閱者注冊(cè)到調(diào)度中心的處理代碼滞伟。
比如有個(gè)界面是實(shí)時(shí)顯示天氣，它就訂閱天氣事件（注冊(cè)到調(diào)度中心炕贵，包括處理程序）梆奈，當(dāng)天氣變化時(shí)（定時(shí)獲取數(shù)據(jù)），就作為發(fā)布者發(fā)布天氣信息到調(diào)度中心称开，調(diào)度中心就調(diào)度訂閱者的天氣處理程序亩钟。
應(yīng)用場(chǎng)景：JS事件、JS Promise、JQuery.$CallBack径荔、Vue watch督禽、NodeJS自定義事件，文件流等
8总处、迭代器模式
提供一種方法順序訪問(wèn)一個(gè)聚合對(duì)象中各個(gè)元素, 而又無(wú)須暴露該對(duì)象的內(nèi)部表示
可分為：內(nèi)部迭代器和外部迭代器
內(nèi)部迭代器： 內(nèi)部已經(jīng)定義好迭代規(guī)則狈惫，外部只需要調(diào)用一次即可
應(yīng)用場(chǎng)景： JQuery.each方法
外部迭代器：必須顯示的請(qǐng)求迭代下一個(gè)元素
簡(jiǎn)單來(lái)說(shuō)就是需要顯示的調(diào)用一些方法才能去迭代 不是直接調(diào)用方法來(lái)一步到位
應(yīng)用場(chǎng)景：JS Iterator、JS Generator
9鹦马、狀態(tài)模式
狀態(tài)模式的使用場(chǎng)景也特別明確胧谈，有如下兩點(diǎn)：
①一個(gè)對(duì)象的行為取決于它的狀態(tài)，并且它必須在運(yùn)行時(shí)刻根據(jù)狀態(tài)改變它的行為荸频。
②一個(gè)操作中含有大量的分支語(yǔ)句菱肖，而且這些分支語(yǔ)句依賴于該對(duì)象的狀態(tài)。狀態(tài)通常為一個(gè)或多個(gè)枚舉常量的表示旭从。
簡(jiǎn)而言之稳强，當(dāng)遇到很多同級(jí)if-else或者switch的時(shí)候，可以使用狀態(tài)模式來(lái)進(jìn)行簡(jiǎn)化
應(yīng)用場(chǎng)景：燈泡狀態(tài)和悦、紅綠燈切換等
理解起來(lái)好難
https://www.jb51.net/article/92120.htm
