JavaScript狀態(tài)模式及適配器模式使用講解

更新時間：2022年12月30日 10:15:49 作者：volit_

這篇文章主要介紹了理解JavaScript中的狀態(tài)模式及適配器模式,適配器模式即Adapter Pattern，是作為兩個不兼容的接口之間的橋梁。這種類型的設計模式屬于結(jié)構(gòu)型模式，下文更多相關(guān)介紹需要的小伙伴可以參考一下

一、狀態(tài)模式

允許一個對象在其內(nèi)部狀態(tài)改變時改變它的行為，對象看起來似乎修改了它的類

1.基本實現(xiàn)

//下面以一個開燈程序演示狀態(tài)模式
//燈共用三種狀態(tài)，分別是‘關(guān)閉'，‘弱光‘和'強光‘。每次按下開關(guān)按鈕都會換擋。
let OfflightState = function (light) {
    this.light = light;
}
OfflightState.prototype.buttonPressed = function () {
    console.light('弱光');
    this.light.setState(this.light.weakLightState);
}
let WeakLightState = function (light) {
    this.light = light;
}
WeakLightState.prototype.buttonPressed = function () {
    console.log('強光')
    this.light.setState(this.light.strongLightState);
}
let StrongLightState = function (light) {
    this.light = light;
}
StrongLightState.prototype.buttonPressed = function () {
    console.log('關(guān)閉');
    this.light.setState(this.light.offlightState)
}
let Light = function () {
    this.offlightState = new OfflightState(this); 
    this.weakLightState = new WeakLightState(this);
    this.strongLightState = new StrongLightState(this);
    this.button = null;
}
Light.prototype.init = function () { 
    let button = document.createElement('button');
    self = this;
    this.button = document.body.appendChild(button);
    this.button.innerHTML = '開關(guān)';
    this.button.currState = this.offlightState;
    this.button.onclick = function () { 
        self.currState.buttonPressed;
    }
}
Light.prototype.setState = function (newState) {
    this.currState = newState;
}
let light = new Light();
light.init();

以上代碼實現(xiàn)了一個基本的狀態(tài)模式，狀態(tài)的切換規(guī)律事先被定義好在各個狀態(tài)類中，主體上無需關(guān)心切換的細節(jié)。如果日后又新增了一個狀態(tài)，那我們只要編寫好新的狀態(tài)類，加入到原有代碼中就可以了。

2.狀態(tài)模式的優(yōu)缺點

（1）狀態(tài)模式定義了狀態(tài)與行為之間的關(guān)系，并將它們封裝在一個類里。通過增加新的狀態(tài)類，很容易增加新的狀態(tài)和轉(zhuǎn)換

（2）避免Context無限膨脹，狀態(tài)切換的邏輯被分布在狀態(tài)類中，也去掉了Context中原本過多的分支。

（3）用對象代替字符串來記錄當前狀態(tài)，使得狀態(tài)的切換更加一目了然。

（4）Context中的請求動作和狀態(tài)類中封裝的行為可以非常容易地獨立變化而互不影響。

3.狀態(tài)模式中的性能優(yōu)化點

（1）狀態(tài)可以等待需要的時候再創(chuàng)建，也可以一開始就創(chuàng)建好，具體依據(jù)實際場景、

（2）state對象可以在多個類之間共享。

二、適配器模式

解決兩個軟件實體間接口不兼容問題

適配器模式的應用

let googleMap = {
    show: function () {
        console.log('開始渲染谷歌地圖');
    }
}
let baiduMap = {
    show: function () {
        console.log('開始渲染百度地圖');
    }
}
let renderMap = function (map) {
    map.show();
}
/**
 * 以上代碼段實現(xiàn)了渲染不同地圖的功能?，F(xiàn)在假設BaiduMap的api改成了display,修改源代碼勢必不太符合開閉原則，這時候我們可以通過新建一個適配器來達到目的
 */
let baiduMapAdapter = {
    show: function () {
        return baiduMap.display();
    }
}
renderMap(baiduMapAdapter);

到此這篇關(guān)于JavaScript狀態(tài)模式及適配器模式使用講解的文章就介紹到這了,更多相關(guān)JavaScript狀態(tài)模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: