常用的设计模式

创建型模式

工厂模式

创建对象时不会对客户端暴露创建逻辑，并且时通过使用一个共同的接口来指向新创建的对象，用工厂方法代替 new 操作的一种模式

class Creator {
    create (name) {
        return new Animal(name)
    }
}
class Animal {
    constructor (name) {
        this.name = name
    }
}
const creator = new Creator()
const duck = creator.create('Duck')
console.log(duck.name)

const chicken = creator.create('Chicken')
console.log(chicken.name)

单例模式

保证一个类仅有一个实例，并提供一个访问它的全局访问点

// 实例如果已经创建，则直接返回
class Person {
    info (kg = 60, cm = 174) {
        let key = `${kg}kg_${cm}cm`
        if (Person.result[key]) {
            console.log('已经存在')
            return Person.result[key]
        } else {
            console.log('第一次')
            const obj = {height: cm, weight: kg}
            Person.result[key] = obj
            return obj
        }
    }
}
Person.result = {}
let a = Person()
a.info()
let b = Person()
b.info()

原型模式

用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象

const prototype = {
    name: 'jack',
    getName: function () {
        return this.name
    }
}
const obj = Object.create(prototype, {
    job: {
        value: 'IT'
    }
})
console.log(obj.getName())
console.log(obj.job)
console.log(obj.__proto__ === prototype)

// 1. 方法继承
const Parent = function () {
    console.log(1)
}
Parent.prototype.show = function () {
    console.log(2)
}
const Child = function () {}

// Child继承Parent的所有原型方法
Child.prototype = new Parent()
let a = new Child()
a.show()

// 2. 所有函数默认继承Object
const Foo = function () {}
console.log(Foo.prototype.__proto__ === Object.prototype)

// 3. Object.create
const proto = {a: 1}
const propertiesObject = {
    b: {
        value: 2
    }
}
const obj = Object.create(proto, propertiesObject)
console.log(obj.__proto__ === proto) 

// 4. isPrototypeOf
proto.isPrototypeOf(obj)

// 5. instanceof
obj instanceof contructor

// 6. getPrototypeOf
Object.getPrototypeOf(obj)

// 7.setPrototypeOf
const obj = {}
const prototypeObj = {
    show () {
        console.log(1)
    }
}
Object.setPrototypeOf(obj, prototypeObj)
console.log(obj.__proto__ === prototypeObj)
obj.show()

结构型模式

适配器模式

解决俩个软件实体间的接口不兼容的问题。使用适配器模式之后，原本由于接口不兼容而不能工作的俩个软件实体可以一起工作

class GoogleMap {
    show () {
        console.log('渲染谷歌地图')
    }
}
class BaiduMap {
    display () {
        console.log('渲染百度地图')
    }
}
// 定义适配器,进行二次封装
class BaiduMapAdapter {
    show () {
        const baiduMap = new BaiduMap()
        return baiduMap.display()
    }
}
function render (map) {
    if (map.show instanceof Function) {
        map.show()
    }
}
let googleMap = new GoogleMap()
let baiduMap = new BaiduMapAdapter()
render(googleMap)
render(baiduMap)

代理模式

为一个对象提供一个代用品或占位符,以便控制对它的访问

class MyImage {
    constructor () {
        this.img = new Image()
        document.body.appendChild(this.img)
    }
    // 此方法为方便废弃预加载时，可以直接使用本体的setSrc方法,删除代理类即可
    setSrc (src) {
        this.img.src = src
    }
}
class ProxyImage () {
    constructor () {
        this.proxyImage = new Image()
    }
    setSrc (src) {
        let myImageObj = new MyImage()
        myImageObj.img.src = 'xxxx.png' // 本地路径
        this.proxyImage.src = src
        this.proxyImage.onload = function () {
            myImageObj.img.src = src
        }
    }
}
let proxyImage = new ProxyImage()
proxyImage.setSrc('http://xxx.png')

行为型模式

策略模式

定义一系列的算法,把他们一个个封装起来,并使他们可以替换

const fnA = function (val) {
    return val * 1
}
const fnB = function (val) {
    return val * 2
}
const fnC = function (val) {
    return val * 3
}

var calculate = function (fn, val) {
    return fn(val)
}
console.log(calculate(fnA, 100))
console.log(calculate(fnB, 200))
console.log(calculate(fnC, 300))

迭代器模式

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。

class Creator {
    constructor (list) {
        this.list = list
    }
    createIterator () {
        return new Iterator(this)
    }
}
class Iterator {
    constructor (creator) {
        this.list = creator.list
        this.keyArr = Object.entries(this.list)
        this.index = 0
    }
    isDone () {
        return this.index >= this.keyArr.length
    }
    next () {
        return this.keyArr[this.index++][1]
    }
}
const arr = [1, 2, 3, 4]
const obj = {a: 1, b:2}
const creator1 = new Creator(arr)
const iterator1 = creator1.createIterator()
while (!iterator1.isDone()) {
    console.log(iterator1.next())
}
const creator2 = new Creator(obj)
const iterator2 = creator2.createIterator()
while (!iterator2.isDone()) {
    console.log(iterator2.next())
}

观察者模式(发布-订阅)

定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。

class EventEmitter {
    constructor () {
        // 缓存列表
        this.list = {}
    }
    // 订阅
    on (event, fn) {
        // 如果没有event值,就给event创建个缓存列表
        // 如果有对应的event值,把fn添加到对应event的缓存列表里
        (this.list[event] || (this.list[event] = [])).push(fn)
        return this
    }
    // 监听一次
    once (event, fn) {
        // 先绑定,调用后删除
        function on () {
            this.off(event, on)
            fn.apply(this, arguments)
        }
        on.fn = fn
        this.on(event, on)
        return this
    }
    // 取消订阅
    off (event, fn) {
        let fns = this.list[event]
        // 如果缓存列表中没有对应的fn,返回false
        if (!fns) return false
        if (!fn) {
        // 如果fn不存在,就会将event值对应缓存列表中的fn都清空
            fns && (fns.length = 0)
        } else {
        // 如果有fn, 遍历缓存列表,看看传入的fn与那个函数相同,如果相同就直接从缓存列表中删除
        let cb
        let cbLen = fns.length
        for (let i = 0; i < cbLen; i++) {
            cb = fns[i]
            if (cb === fn || cb.fn === fn) {
                fns.splice(i, 1)
                break
            }
        }
        }
        return this
    }
    // 发布
    emit () {
        // 第一个参数对应的event值,直接用数组的shift方法取出
        let event = [].shift.call(arguments)
        let fns = [...this.list[event]]
        // 如果缓存列表里没有fn就返回false
        if (!fns || fns.length === 0) {
            return false
        }
        // 遍历event值对应的缓存列表,依次执行fn
        fns.forEach(fn => {
            fn.apply(this, arguments)
        })
        return this
    }
}

// 测试
function user1 (content) {
  console.log('用户1订阅了: ', content)
}
function user2 (content) {
  console.log('用户2订阅了: ', content)
}
function user3 (content) {
  console.log('用户3订阅了: ', content)
}
function user4 (content) {
  console.log('用户4订阅了: ', content)
}

let eventEmitter = new EventEmitter()
// 订阅
eventEmitter.on('article1', user1)
eventEmitter.on('article1', user2)
eventEmitter.on('article1', user3)

// 取消user2方法的订阅
eventEmitter.off('article1', user2)
eventEmitter.once('article2', user4)

// 发布
eventEmitter.emit('article1', 'JS 发布-订阅模式')
eventEmitter.emit('article1', 'JS 发布-订阅模式')
eventEmitter.emit('article2', 'JS 观察者模式')
eventEmitter.emit('article2', 'JS 观察者模式')

命令模式

定义一个传令者，暴露一个统一的接口给发布者，发布者不用去管接受者如何执行命令，做到发布者和接受者的解耦。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cmd-demo</title>
</head>
<body>
    <div>
        <button id="btn1">按钮1</button>
        <button id="btn2">按钮2</button>
    </div>
    <script>
        const btn1 = document.getElementById('btn1')
        const btn2 = document.getElementById('btn2')
        // 定义一个执行者
        class Executor {
            setCommand (btn, command) {
                btn.onclick = function () {
                    command.excute()
                }
            }
        }
        // 定义一个传令者
        class Menu {
            refresh () {
                console.log('刷新菜单')
            }
            addMenu () {
                console.log('增加菜单')
            }
        }
        // 定义一个传令者:接收刷新菜单的命令
        class RefreshMenu {
            constructor (receiver) {
                this.receiver = receiver
            }
            excute () {
                this.receiver.refresh()
            }
        }
        // 定义一个传令者:接收增加菜单的命令
        class Addmenu {
            constructor (receiver) {
                this.receiver = receiver
            }
            excute () {
                this.receiver.addMenu()
            }
        }
        const menu = new Menu()
        const excutor = new Executor()
        
        // 按钮1添加刷新功能
        const refreshMenu = new RefreshMenu(menu)
        excutor.setCommand(btn1, refreshMenu)

        // 按钮2增加菜单
        const addMenu = new Addmenu(menu)
        excutor.setCommand(btn2, addMenu)
    </script>
</body>
</html>

状态模式

状态模式的意图是让一个对象在其内部状态改变的时候，其行为也随之改变。状态模式需要对每一个系统可能取得的状态创立一个状态类的子类。当系统的状态变化时，系统便改变所选的子类。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>state-demo</title>
</head>

<body>
    <button id="btn">开关</button>
    <script>
        // 关闭状态
        class OffLightState {
            constructor (light) {
                this.light = light
            }
            pressBtn () {
                this.light.setState(this.light.weekLightState)
                console.log('开启弱光')
            }
        }
        // 弱光状态
        class WeekLightState {
            constructor (light) {
                this.light = light
            }
            pressBtn () {
                this.light.setState(this.light.strongLightState)
                console.log('开启强光')
            }
        }
        // 强光状态
        class StrongLightState {
            constructor (light) {
                this.light = light
            }
            pressBtn () {
                this.light.setState(this.light.offLightState)
                console.log('关闭电灯')
            }
        }
        class Light {
            constructor () {
                this.offLightState = new OffLightState(this)
                this.weekLightState = new WeekLightState(this)
                this.strongLightState = new StrongLightState(this)
                this.currentState = this.offLightState
            }
            setState (newState) {
                this.currentState = newState
            }
        }
        let light = new Light()
        const btn = document.getElementById('btn')
        btn.onclick = function () {
            light.currentState.pressBtn()
        }
    </script>
</body>

</html>

参考

1. 常用的设计模式

2. JavaScript设计模式es6