如何理解JavaScript的設計模式

本篇文章為大家展示了如何理解JavaScript的設計模式，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

龍山網站制作公司哪家好，找成都創新互聯公司！從網頁設計、網站建設、微信開發、APP開發、響應式網站設計等網站項目制作，到程序開發，運營維護。成都創新互聯公司2013年開創至今到現在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選成都創新互聯公司。

10年的貢山網站建設經驗，針對設計、前端、開發、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。營銷型網站建設的優勢是能夠根據用戶設備顯示端的尺寸不同，自動調整貢山建站的顯示方式，使網站能夠適用不同顯示終端，在瀏覽器中調整網站的寬度，無論在任何一種瀏覽器上瀏覽網站，都能展現優雅布局與設計，從而大程度地提升瀏覽體驗。創新互聯從事“貢山網站設計”,“貢山網站推廣”以來，每個客戶項目都認真落實執行。

今天我們就聊一下這三個設計模式

單例模式 / 組合模式 / 觀察者模式

單例模式

· 什么是單例模式呢？

· 我們都知道，構造函數可以創造一個對象

· 我們 new 很多次構造函數就能得到很多的對象

· 單例模式：就是使用構造函數實例化的時候，不管實例化多少回，都是同一個對象

· 也就是一個構造函數一生只能 new 出一個對象

· 也就是說，當我們使用構造函數，每一次 new 出來的對象屬性/功能/方法 完全一樣 的時候，我們把他設計成單例模式

核心代碼

· 單例模式的核心代碼很簡單

· 其實就是判斷一下，他曾經有沒有 new 出來過對象

· 如果有，就還繼續使用之前的那個對象，如果沒有，那么就給你 new 一個

// 準備一個構造函數// 將來要 new 的function Person() {}// 準備一個單例模式函數// 這個單例模式函數要把 Person 做成一個單例模式// 將來再想要 new Person 的時候只要執行這個 singleton 函數就可以了function singleton () {

let instance;

if (!instance) { // 如果 instance 沒有內容 // 來到這里，證明 instance 沒有內容 // 給他賦值為 new Person instance = new Person()

}

// 返回的永遠都是第一次 new Person 的實例 // 也就是永遠都是一個實例 return instance}const p1 = singleton()const p2 = singleton()console.log(p1 === p2) // true

應用

· 我們就用這個核心代碼簡單書寫一個 demo

// 這個構造函數的功能就是創建一個 div，添加到頁面中function CreateDiv() {

this.div = document.createElement('div')

document.body.appendChild(this.div)}CreateDiv.prototype.init = function (text) {

this.div.innerHTML = text}// 準備把這個 CreateDiv 做成單例模式// 讓 singleton 成為一個閉包函數const singleton = (function () {

let instance

return function (text) {

if (!instance) {

instance = new CreateDiv()

}

instance.init(text)

return instance

}})()singleton('hello') // 第一次的時候，頁面中會出現一個新的 div ，內容是 hellosingleton('world') // 第二次的時候，不會出現新的 div，而是原先的 div 內容變成了 world

組合模式

· 組合模式，就是把幾個構造函數的啟動方式組合再一起

· 然后用一個 ”遙控器“ 進行統一調用

class GetHome {

init () {

console.log('到家了')

}}class OpenComputer {

init () {

console.log('打開電腦')

}}class PlayGame {

init () {

console.log('玩游戲')

}}

· 上面幾個構造函數的創造的實例化對象的 啟動方式 都一致

· 那么我們就可以把這幾個函數以組合模式的情況書寫

· 然后統一啟動

· 準備一個 組合模式 的構造函數

class Compose {

constructor () {

this.compose = []

}

// 添加任務的方法 add (task) {

this.compose.push(task)

}

// 一個執行任務的方法 execute () {

this.compose.forEach(item => {

item.init()

})

}}

· 我們就用我們的組合模式構造函數來吧前面的幾個功能組合起來

const c = new Compose()// 把所有要完成的任務都放在隊列里面c.add(new GetHome())c.add(new OpenComputer)c.add(new PlayGame)// 直接器動任務隊列c.execute()// 就會按照順序執行三個對象中的 init 函數

觀察者模式

· 觀察者模式，通常也被叫做 發布-訂閱模式 或者 消息模式

· 英文名稱叫做 Observer

· 官方解釋：當一個對象的狀態發生改變時，所有依賴于它的對象都得到通知并被自動更新，解決了主體對象與觀察者之間功能的耦合，即一個對象狀態改變給其他對象通知的問題

· 聽起來很迷糊，但是其實沒有很難

一個例子

· 當你想去書店買書，但是恰巧今天你要買的書沒有了

· 我們又不能總在書店等著，就把我們的手機留給店員

· 當你需要的書到了的時候，他會打電話通知你，你去買了就好了

· 你買到數了以后，就告訴他，我買到了，那么以后再來了書就不會通知你了

addEventListener

· 上面的例子可能還不是很明確

· 但是 addEventListener 是一個我們都用過的東西

· 這個東西其實就是一個標準的 觀察者模式

btn.addEventListener('click', function () {

console.log('btn 被點擊了')})

· 上面這個就是有一個 無形的觀察者 再觀察著 btn 的一舉一動

· 當這個 btn 被點擊的時候，就會執行對應的函數

· 我們也可以多綁定幾個函數

· 說白了：觀察者模式就是我們自己實現一個 addEventListener 的功能

· 只不過 addEventListaner 只有固定的一些事件，而且只能給 dom 元素綁定

· 而我們自己寫的可以隨便綁定一個事件名稱，自己選擇觸發時機而已

書寫代碼

· 首先我們分析功能

· 我們要有一個觀察者（這里抽象為一個對象 {}）

· 需要有一個屬性，存放消息的盒子（把你綁定的所有事件放在里面）

· 需要一個 on 方法，用于添加事件

· 需要一個 emit 方法，用于發布事件（觸發）

· 需要一個 off 方法，把已經添加的方法取消

const observer = {

message: {},

on: function () {},

emit: function () {},

off: function () {}}

· 我們把它寫成一個構造函數的形式

class Observer {

constructor () {

this.message = {}

}

on () {}

emit () {}

off () {}}

· 現在，一個觀察者的雛形就出來了

· 接下來完善方法就可以了

ON

· 先來寫 ON 方法

· 添加一個事件

· 我們的 on 方法需要接受兩個參數

· 事件類型

· 事件處理函數

class Observer {

constructor () {

this.message = {}

}

on(type, fn) {

// 判斷消息盒子里面有沒有設置事件類型 if (!this.message[type]) {

// 證明消息盒子里面沒有這個事件類型 // 那么我們直接添加進去 // 并且讓他的值是一個數組，再數組里面放上事件處理函數 this.message[type] = [fn]

} else {

// 證明消息盒子里面有這個事件類型 // 那么我們直接向數組里面追加事件處理函數就行了 this.message[type].push(fn)

}

emit () {}

off () {}}

EMIT

· 接下來就是發布事件

· 也就是讓我們已經訂閱好的事件執行一下

· 同樣需要接受兩個參數

· 要觸發的事件類型

· 給事件處理函數傳遞的參數

class Observer {

constructor () {

this.message = {}

}

on(type, fn) {

// 判斷消息盒子里面有沒有設置事件類型 if (!this.message[type]) {

// 證明消息盒子里面沒有這個事件類型 // 那么我們直接添加進去 // 并且讓他的值是一個數組，再數組里面放上事件處理函數 this.message[type] = [fn]

} else {

// 證明消息盒子里面有這個事件類型 // 那么我們直接向數組里面追加事件處理函數就行了 this.message[type].push(fn)

}

emit(type, ...arg) {

// 判斷你之前有沒有訂閱過這個事件 if (!this.message[type]) return

// 如果有，那么我們就處理一下參數 const event = {

type: type,

arg: arg || {}

}

// 循環執行為當前事件類型訂閱的所有事件處理函數 this.message[type].forEach(item => {

item.call(this, event)

})

}

off() {}}

OFF

· 最后就是移除事件

· 就是把已經訂閱的事件處理函數移除掉

· 同樣需要接受兩個參數

· 要移除的事件類型

· 要移除的事件處理函數

class Observer {

constructor () {

this.message = {}

}

on(type, fn) {

// 判斷消息盒子里面有沒有設置事件類型 if (!this.message[type]) {

// 證明消息盒子里面沒有這個事件類型 // 那么我們直接添加進去 // 并且讓他的值是一個數組，再數組里面放上事件處理函數 this.message[type] = [fn]

} else {

// 證明消息盒子里面有這個事件類型 // 那么我們直接向數組里面追加事件處理函數就行了 this.message[type].push(fn)

}

emit(type, ...arg) {

// 判斷你之前有沒有訂閱過這個事件 if (!this.message[type]) return

// 如果有，那么我們就處理一下參數 const event = {

type: type,

arg: arg || {}

}

// 循環執行為當前事件類型訂閱的所有事件處理函數 this.message[type].forEach(item => {

item.call(this, event)

})

}

off (type, fn) {

// 判斷你之前有沒有訂閱過這個事件 if (!this.message[type]) return

// 如果有我們再進行移除 for (let i = 0; i < this.message[type].length; i++) {

const item = this.message[type][i]

if (item === fn) {

this.message[type].splice(i, 1)

i--

}

}}

· 以上就是最基本的 觀察者模式

· 接下來我們就使用一下試試看

使用一下

const o = new Observer()// 準備兩個事件處理函數function a(e) {

console.log('hello')}function b(e) {

console.log('world')}// 訂閱事件o.on('abc', a)o.on('abc', b)// 發布事件（觸發）o.emit('abc', '100', '200', '300') // 兩個函數都回執行// 移除事件o.off('abc', 'b')// 再次發布事件（觸發）o.emit('abc', '100', '200', '300') // 只執行一個 a 函數了

上述內容就是如何理解JavaScript的設計模式，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創新互聯行業資訊頻道。

文章標題：如何理解JavaScript的設計模式
文章起源：http://vcdvsql.cn/article48/iijpep.html

成都網站建設公司_創新互聯，為您提供品牌網站設計、小程序開發、標簽優化、微信公眾號、App開發、企業建站

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

如何理解JavaScript的設計模式

單例模式

核心代碼

應用

組合模式

觀察者模式

一個例子

addEventListener

書寫代碼

ON

EMIT

OFF

使用一下