本篇文章給大家帶來了關于JavaScript中設計模式的相關知識,其中包括單例模式、組合模式、觀察者模式等等,希望對大家有幫助。
1 設計模式
概念
設計模式是為了解決某種問題,而設計的一套最佳解決方案。
面向對象 – 更加注重對象 – 找一種最佳的定義對象并個對象添加屬性和方法 的 方案
找到的最佳的解決方案 – 就是一種設計模式
針對不同的問題,我們會有不同的最佳解決方案 – 設計模式
常見的設計模式:
- 單例模式
- 組合模式
- 觀察者模式
- 命令模式
- 代理模式
- 工廠模式
- 策略模式
- 適配器模式
- 。。。
1.1 單例模式
數據庫連接 – 多個功能都需要操作數據庫 – 重新連接數據庫 – 1000個功能,連接1000次數據庫
注冊功能,每次注冊都需要操作數據庫 – 同一時間有1000個人在注冊
mysql數據庫有一個連接限制:最多只能支持同時又200個連接
我們連接一次數據庫,得到一個連接,多次操作數據庫,使用這一個連接其就能操作
怎么操作,讓多次執行數據庫語句使用同一個連接 – 我們就可以設計一個設計模式
設計模式:定義一個類,這個類new以后就得到一個連接,以后每次執行數據庫語句的時候,都可以從這個類中得到一個連接
單例模式:從一個類中只能得到一個對象 – 不管操作了多少次這個類,最終得出的所有連接對象都是同一個對象
讓一個類創建出來的所有對象,里面的所有屬性和方法都一模一樣。比如封裝一個類,將一些常用的操作函數作為方法放進去,以后每次都使用同一個對象來調用這些方法
正常情況,一個類創建出來的每個對象都是不一樣的。
class Carousel{ }var a = new Carousel();var b = new Carousel();console.log(a === b); // false
單例模式就是讓這兩個對象是一樣的,也就是說,一個類永遠只有一個實例對象
var single = (function(){ class Carousel{ } var res = undefined; return function(){ if(!res){ res = new Carousel(); } return res; }})();var s1 = single();var s2 = single();console.log(s1 === s2); // true
變量P暴露在全局的變量會造成全局的污染
利用閉包解決每次都會重新定義p的問題
單例模式的核心代碼:
function Person(){}function fn(Person){ var p; return function(){ if(!p){ p = new Person; } return p; }}var f = fn(Person)var p1 = f()var p2 = f()
單例模式的應用場景在封裝工具庫。
例:封裝封裝一個工具庫
單例模式 應用 封裝工具庫
工具庫中會有很多的方法 - 方法每次的使用 應該是同一個對象使用的,而不是應該每次都有一個新對象在使用工具
// var t = new Tool; // t.setCookie('username', 'zs', 20); const Tool = (function () { class Tool { constructor() { if (window.getComputedStyle) { this.flag = true; } else { this.flag = false; } } /獲取節點屬性 getStyle(ele, attr) { if (this.flag) { return window.getComputedStyle(ele)[attr]; } else { return ele.currentStyle[attr]; } } getStyle(ele, attr) { 嘗試一段代碼 不知道會不會報錯 嘗試成功 后面代碼沒有什么事 嘗試失敗 會報錯 被cathch 捕獲到 會將錯誤信息放到err參數里 catch{} 里可以處理這個錯誤 也可以不處理這個錯誤對上面的錯誤代碼進行補救 錯誤不會再瀏覽器里報錯 try { return window.getComputedStyle(ele)[attr]; } catch (err) { return ele.currentStyle[attr]; } } // 設置節點css屬性 setStyle(ele, styleObj) { for (let attr in styleObj) { ele.style[attr] = styleObj[attr]; } } // 設置cookie setCookie(key, value, second, path = '/') { let data = new Date(); date.setTime(date.getTime() - 8 * 3600 * 1000 + second * 1000); document.cookie = `${key}=${value};expires=${date};path=${path}`; } } var tool; return (function () { if (!tool) { tool = new Tool(); } return tool; })(); })();
1.3 組合模式
組合模式就是制作啟動器。多個類在實例化以后,執行起來使用一個同名的方法來啟動,這時候可以做一個啟動器,讓多個類一起啟動。
class Carousel{ init(){ console.log("輪播圖開始運行"); }}class Tab{ init(){ console.log("選項卡開始運行"); }}class Enlarge{ init(){ console.log("放大鏡開始運行"); }}// 這3個類要運行起來需要各自實例化,并調用每個類中的init方法,此時就可以使用組合模式做一個啟動器
組合模式制作啟動器:
class Starter{ constructor(){ this.arr = []; // 定義一個數組 } add(className){ this.arr.push(className); // 將這個多個類放進數組 } run(){ for(var i=0;i<this.arr.length;i++){ arr[i].init(); // 讓數組中的每個類都調用init方法 } }}var starts = new Starter();starts.add(new Carousel);starts.add(new Tab);starts.add(new Enlarge);starts.run();
1.4 發布訂閱模式
https://blog.csdn.net/weixin_44070254/article/details/117574565?spm=1001.2014.3001.5501
有人訂閱 有人發布
發布訂閱模式:需要一個觀察者 需要一個被觀察者 如果觀察者發現被觀察者的狀態發生了改變,就需要執行一個任務
定義一個觀察者:
class Observer{ // 觀察者有名字和任務 constructor(name,task){ this.name = name this.task = task }}// 定義班主任var bzr = new Observer('班主任',function(state){ console.log("因為"+state+",所以"+this.name+"罰站");})// 定義了一個年級主任var zr = new Observer('年級主任',function(state){ console.log("因為"+state+",所以"+this.name+"要找班主任");})// 被觀察者class Subject{ // 有自己的狀態 constructor(state){ this.state = state // 觀察者們 this.observer = []; } // 添加被觀察者 add(...arr){ this.observer = this.observer.concat(arr) } // 改變狀態 changeSate(state){ this.state = state // 觸發觀察者的任務 for(let i=0;i<this.observer.length;i++){ this.observer[i].task(state) } }}var xm = new Subject('學習')xm.add(bzr,zr)// xm.changeSate('摸了一下小紅的手')xm.changeSate('玩游戲')
觀察者模式,又稱發布-訂閱模式。意思是讓一個人不停的監控某件某件東西,當這個東西要發生某種行為的時候,這個人就通知一個函數執行這個行為的操作。
例:當事件的代碼寫好以后,其實這個事件就不停的監控用戶在頁面中的行為,一旦用戶觸發這個事件的時候,就調用函數處理這個事件。
p.addEventListener("click",function(){}); // 這個事件寫好以后,就一直在頁面中監控用戶行為,用戶點擊這個元素的時候,就調用函數
觀察者模式就是類似的操作,寫觀察者模式的目的,是為了給一個非元素的數據綁定一個自定義事件。
例:給一個obj綁定一個abc的事件
分析:
給一個元素綁定事件,有綁定方法,有觸發條件,有取消綁定。
要給一個對象綁定一個自定義事件。那么這個事件如何綁定,如何觸發,如何解綁這個事件。
所以:
- 需要一個方法處理事件的綁定。
- 需要一個方法處理如何觸發這個事件。
- 需要一個方法處理如何解綁這個事件。
元素的事件,一個事件類型可以綁定多個處理函數。
對象的自定義事件如何讓一個事件類型綁定多個函數。
所以:
需要一個空間,存儲事件類型對應的處理函數們。
1.4.1 雛形:
class watch{ bind(){ } touch(){ } unbind(){ }}var w = new watch();
此時,如要給這個對象綁定事件和處理函數的話,需要事件類型和處理函數作為參數,所以調用時要傳入實參
var w = new watch();w.bind("cl",a); // 給w對象綁定cl事件類型,執行a函數w.bind("cl",b); // 給w對象綁定cl事件類型,執行b函數function a(){ console.log("事件處理函數a");}function b(){ console.log("事件處理函數b");}
1.4.2 綁定
在bind方法中接收參數,并將事件類型和處理函數對應存儲起來:
constructor(){ this.obj = {} // 存儲格式:{事件類型:[函數1,函數2]}}bind(type,handle){ this.obj[type] = [handle]; // 對象存儲方式{"cl":[a]}}
如果給這個事件再綁定一個函數b的話,會將原來的a覆蓋掉,所以,應該先判斷,如果對應的這個數組中沒有數據就直接放進去,如果有了就應該追加
bind(type,handle){ if(!this.obj[type]){ this.obj[type] = [handle]; // 對象存儲方式{"cl":[a]} }else{ this.obj[type].push(handle); } }
打印w對象的結果:
綁定后的存儲結果 |
---|
![]() |
1.4.3 觸發
觸發這個事件需要傳入觸發哪個事件類型
touch(type){ // 首先要判斷,這個事件類型是否綁定,沒有綁定不能觸發 if(!this.obj[type]){ return false; }else{ // 將這個事件的所有綁定的處理函數一起調用 for(var i=0;i<this.obj[type].length;i++){ this.obj[type][i](); } }}
測試:
觸發測試 |
---|
![]() |
這兩個處理函數都沒有參數,如果要傳入參數的時候該怎么處理?
觸發事件的時候就要傳入實參
w.touch("cl","張三",20);
觸發事件的方法就應該處理這些參數
touch(type,...arr){ // 因為參數不定長,所以使用合并運算符 // 首先要判斷,這個事件類型是否綁定,沒有綁定不能觸發 if(!this.obj[type]){ return false; }else{ // 處理參數:模擬系統事件的參數事件對象,將所有參數都集中在一個對象中 var e = { type:type, args:arr } // 將這個事件的所有綁定的處理函數一起調用 for(var i=0;i<this.obj[type].length;i++){ this.obj[type][i](e); } }}
添加一個帶參數的處理函數,并觸發事件執行:
w.bind("cl",c); // 給w對象綁定cl事件類型,執行c函數w.touch("cl","張三",20);function c(e){ console.log("我是處理函數c,打?。盒彰?quot;+e.name+",年齡"+e.age);}
結果:
帶參數的處理函數處理結果 |
---|
![]() |
1.4.5 解綁
解綁也需要知道解綁的事件類型和處理函數
unbind(type,handle){ // 先判斷是否綁定了這個事件 if(!this.obj[type]){ return false; }else{ // 從數組中將這個處理函數刪除 for(var i=0;i<this.obj[type].length;i++){ if(this.obj[type][i] === type){ this.obj[type].splice(i,1); i--; // 放置數組塌陷 } } }}
解綁測試:
解綁測試結果 |
---|
![]() |
如果綁定事件的時候使用的匿名函數,就無法進行解綁了,所以再添加一個解綁事件所有處理函數的方法:
clear(type){ if(!this.obj[type]){ return false; }else{ // 直接從對象中將這個屬性刪除 delete this.obj[type]; } }
1.5 觀察者模式
觀察者模式跟發布訂閱模式不一樣的地方在于,要有觀察者和被觀察者。
創建觀察者:
// 創建觀察者class Observer{ // 觀察者有姓名和技能 - 技能是一個函數 constructor(name,skill){ this.name = name; this.skill = skill }}// 創建觀察者var bzr = new Observer('班主任',function(state){ console.log('因為'+state+'叫家長')})var xz = new Observer('校長',function(state){ console.log('因為'+state+'叫班主任')})console.log(bzr,xz)
創建被觀察者:
// 創建被觀察者 class Subject{ // 被觀察者有狀態 和 觀察者列表 constructor(state){ this.state = state this.observers = [] } // 添加觀察者 addObserver(observer){ var index = this.observers.findIndex(v=>v === observer) if(index<0){ this.observers.push(observer) } } // 改變狀態 setState(val){ if(val!==this.state){ this.state = val; this.observers.forEach(v=>{ v.skill(this.state) }) } } // 刪除觀察者 delObserver(observer){ var index = this.observers.findIndex(v=>v === observer) if(index>=0){ this.observers.splice(index,1) } } } // 創建被觀察者 var xm = new Subject('學習') // 添加觀察者 xm.addObserver(bzr) xm.addObserver(xz) xm.addObserver(bzr) console.log(xm) // 改變狀態 xm.setState('玩游戲')
1.6 策略模式
一個問題有多種解決方案,且隨時還可以有