javascript的23種設計模式(持續更新中…)

NO IMAGE

(最近在忙著發表公司內部分享,本篇佔坑用,可能要很晚很晚才能補上~)

1.單例模式

定義:一個類只能有一個實例,即使多次實例化也返回的是第一次實例

意義:共享變量、減少變量、函數命名衝突、減少內存開銷

場景:登錄框、購物車、redux/Vuex中的store、JQ的$

實現:

class SingletonLogin {
constructor(name,password){
this.name = name
this.password = password
}
//使用ES6的static關鍵字,可以定義靜態方法,從而可以直接使用類名.方法的方式調用getInstance()
static getInstance(name,password){
//判斷對象是否已經被創建,若創建則返回舊對象
if(!this.instance)this.instance = new SingletonLogin(name,password)
return this.instance
}
}
let obj1 = SingletonLogin.getInstance('CJW','123')
let obj2 = SingletonLogin.getInstance('CJW','321')
console.log(obj1===obj2)    //輸出true
console.log(obj1)           //輸入obj1
console.log(obj2)           //輸入的依然是obj1{name:CJW,password:123}

8.適配器模式

  1. 介紹:適配器模式(Adapter Pattern):將一個接口轉換成客戶希望的另一個接口,使接口不兼容的那些類可以一起工作。適配器的概念不難理解,我們在生活中就常常有使用適配器的場景,例如出境旅遊插頭插座不匹配,這時我們就需要使用轉換插頭,也就是適配器來幫我們解決問題。
  2. UML類圖

    javascript的23種設計模式(持續更新中...)

    javascript的23種設計模式(持續更新中...)

  3. 代碼演示
    class Adaptee {
    test() {
    return '舊接口'
    }
    }
    class Target {
    constructor() {
    this.adaptee = new Adaptee()
    }
    test() {
    let info = this.adaptee.test()
    return `適配${info}`
    }
    }
    let target = new Target()
    console.log(target.test())
    

    javascript的23種設計模式(持續更新中...)

  4. 場景:

適配器模式的常見使用場景是封裝舊接口,我們項目中常常有很多由於歷史原因留下的舊API,這裡以JQ的AJAX舉個例子,比如說,我們在項目中寫了大量的$.ajax來進行異步請求,時過境遷,技術迭代,我們要把JQ的ajax全部換成自己封裝的ajax來進行請求,如果我們直接在代碼中替換,那麼工作量非常大並且容易出錯,這時候就可以使用適配器模式,去兼容原有的API。

//JQ的ajax
$.ajax({
url:'/api',
type:'post',
dataType:'json',
data:{},
success: function(data){
},
})

javascript的23種設計模式(持續更新中...)

//經過封裝適配的ajax
var $ = {
ajax:function(options) {
//query()是自己封裝的ajax,這裡不寫實現
return query(options)
}
}

javascript的23種設計模式(持續更新中...)

經過適配,我們就可以在去除JQ的情況下繼續使用$.ajax()

相關文章

二springcloudhystrix與原生netflix集成的關聯類

一springcloudhystrix源碼深度分析

RedisTUI一個基於命令行的Redis圖形界面客戶端

RabbitMQ發佈訂閱實戰實現延時重試隊列