JavaScript状态模式及适配器模式使用讲解

//下面以一个开灯程序演示状态模式
//灯共用三种状态，分别是‘关闭'，‘弱光‘和'强光‘。每次按下开关按钮都会换挡。
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('关闭');
    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 = '开关';
    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();

let googleMap = {
    show: function () {
        console.log('开始渲染谷歌地图');
    }
}
let baiduMap = {
    show: function () {
        console.log('开始渲染百度地图');
    }
}
let renderMap = function (map) {
    map.show();
}
/**
 * 以上代码段实现了渲染不同地图的功能。现在假设BaiduMap的api改成了display,修改源代码势必不太符合开闭原则，这时候我们可以通过新建一个适配器来达到目的
 */
let baiduMapAdapter = {
    show: function () {
        return baiduMap.display();
    }
}
renderMap(baiduMapAdapter);