JavaScript设计模式

2018-09-03 本文已影响28人阿昕_

前言

以下代码以及结合设计模式所做的案例请移步github:
https://github.com/webxing/design_patterns

设计原则

单一职责原则

一个程序只做好一件事
如果功能过于复杂就拆分开，每个部分保持独立

开放封闭原则

对扩展开放，对修改封闭
增加需求时，扩展新代码，而非修改已有代码
软件设计的终极目标

李氏置换原则

子类能覆盖父类
父类出现的地方子类就能出现

接口独立原则

保持接口的单一原则，避免出现"胖接口"
类似于单一职责原则，这里更关注接口

依赖倒置原则

面向接口编程，依赖于抽象而不依赖于具体
使用方只关注接口而不关注具体类的实现

工厂模式

将 new 操作单独封装
遇到 new 时，就要考虑是否该使用工厂模式

示例

去买饭，直接点餐，取餐，不会自己亲手做
饭店要封装做饭的工作，做好直接给买者

UML类图

工厂模式

代码

class Product {
    constructor(name) {
        this.name = name
    }
    init() {
        console.log('init')
    }
    fn1() {
        console.log('fn1')
    }
    fn2() {
        console.log('fn2')
    }
}
class Creator {
    create(name) {
        return new Product(name)
    }
}

let creator = new Creator()
let p = creator.create('兰州拉面')
p.init()
p.fn1()

设计原则

构造函数与创建者分离
符合开放封闭原则

单例模式

系统中被唯一使用
一个类只有一个实例

示例

登录框
购物车
jquery
vuex中的store

代码

class LoginForm {
   constructor() {
       this.state = 'hide'
   }
   show() {
       if (this.state === 'show') {
           console.log('has been show')
           return
       }
       this.state = 'show'
       console.log('show success')
   }
   hide() {
       if (this.state === 'hide') {
           console.log('has been hide')
           return
       }
       this.state = 'hide'
       console.log('hide success')
   }
}
LoginForm.getInstance = (function() {
   let instance = null
   return function() {
       if (!instance) {
           instance = new LoginForm()
       }
       return instance
   }
})()
let login1 = LoginForm.getInstance()
login1.show()

let login2 = LoginForm.getInstance()
login2.hide()

console.log(login1 === login2)

设计原则

符合单一职责原则，只实例化唯一的对象
没有很好的体现开放封闭原则，但是没有违反开放封闭原则

适配器模式

旧接口格式和使用者不兼容
中间加一个适配转换接口
提供一个不同的接口

示例

vue的computed

UML类图

适配器模式

代码

// 适配器模式
class Adapter {
    specialRequest() {
        return '香港电压'
    }
}
class Target {
    constructor() {
        this.adapter = new Adapter()
    }
    request() {
        let info = this.adapter.specialRequest()
        return `${info} --转换器-- 中国电压`
    }
}
let target = new Target()
let res = target.request()
console.log(res)

设计原则

将旧接口和使用者进行分离
符合开放封闭原则

代理模式

使用者无权访问目标对象
中间加代理，通过代理做授权和控制
提供一模一样的接口
显示原有功能，但是经过限制或者阉割之后的

示例

访问github
经纪人

UML类图

代理模式

代码

// 代理模式
class RealImg {
    constructor(fileName) {
        this.fileName = fileName
        this.loadFromDisk() // 模拟加载图片
    }
    display() {
        console.log('display...' + this.fileName)
    }
    loadFromDisk() {
        console.log('loadFromDisk...' + this.fileName)
    }
}
class ProxyImg {
    constructor(fileName) {
        this.realImg = new RealImg(fileName)
    }
    display() {
        this.realImg.display()
    }
}
let proxyImg = new ProxyImg('1.png')
proxyImg.display()

// ES6 经纪人
let star = {
    name: 'lx',
    age: 22,
    phone: 'star: 166111100006'
}
let agent = new Proxy(star, {
    get: function(target, key) {
        if (key === 'phone') {
            return 'agent: 1661786543'
        }
        if (key === 'price') {
            return 200000
        }
        return target[key]
    },
    set: function(target, key, value) {
        if (key === 'customPrice') {
            if (value < 200000) {
                console.log('too Low')
            } else {
                target[key] = value
                return true
            }
        }
    }
})
console.log(agent.name)
console.log(agent.age)
console.log(agent.phone)
console.log(agent.price)
agent.customPrice = 300000
console.log(agent.customPrice)

设计原则

代理类和目标类分离，隔离开目标类和使用者
符合开放封闭原则

装饰器模式

为对象添加新功能
不改变原有的结构和功能
扩展功能，原有功能不变且可直接使用

示例

手机壳

UML类图

装饰器模式

代码

// 装饰器模式
class Circle {
    draw() {
        console.log('画一个圆形')
    }
}
class Decorator {
    constructor(circle) {
        this.circle = circle
    }
    draw() {
        this.circle.draw()
        this.setRedBorder(circle)
    }
    setRedBorder(circel) {
        console.log('设置红色边框')
    }
}
let circle = new Circle()
let decorator = new Decorator(circle)
decorator.draw()

// ES7 装饰器
@decoratorA
class A{}

function decoratorA(target) {
    target.isDec = true
}
console.log(A.isDec)

@decoratorB(false)
class B{}

function decoratorB(isDec) {
    return function(target) {
        target.isDec = isDec
    }
}
console.log(B.isDec)

// mixin装饰类
function mixin(...list) {
   return function(target) {
       Object.assign(target.prototype, ...list)
   }
}
const Foo = {
   foo() {
       console.log('foo')
   }
}
@mixin(Foo)
class MyClass {}
let obj = new MyClass()
obj.foo()

// readonly
function readonly(target, name, descriptor) {
    console.log(target, name, descriptor)
    descriptor.writable = false
    return descriptor
}
class Person {
    constructor() {
        this.first = '刘'
        this.last = '昕'
    }
    @readonly
    name() {
        console.log( `${this.first} ${this.last}` )
    }
}
let person = new Person()
person.name()
// person.name = function() {}
console.log(person)

// log
function log(target, name, descriptor) {
    console.log(target, name, descriptor)
    let oldValue = descriptor.value
    descriptor.value = function() {
        console.log(`calling f ${name}... `, arguments)
        return oldValue.apply(this, arguments)
    }
    return descriptor
}
class Math {
    @log
    add(a, b) {
        return a + b
    }
}
let math = new Math()
let addRes = math.add(1, 2)
console.log(addRes)

// core-decorators
import {readonly} from 'core-decorators'
class C {
    @readonly
    name() {
        console.log('lx')
    }
}
let c = new C()
c.name()
// c.name() = function(){}

设计原则

将现有对象和装饰器进行分离，两者独立存在
符合开放封闭原则

观察者模式

发布订阅
一对多

示例

点咖啡，点好之后坐等被叫
网页事件绑定
Promise
jQuery Callbacks
nodejs 自定义事件

UML类图

观察者模式

代码

// 观察者模式
class Subject {
    constructor() {
        this.state = 0
        this.observers = []
    }
    getState() {
        return this.state
    }
    setState(state) {
        this.state = state
        this.notifyObservers()
    }
    notifyObservers() {
        this.observers.forEach(observer => {
            observer.update()
        })
    }
    attach(observer) {
        this.observers.push(observer)
    }
}
class Observer {
    constructor(name, subject) {
        this.name = name
        this.subject = subject
        this.subject.attach(this)
    }
    update() {
        console.log(this.name + ' has been update,' + this.subject.getState())
    }
}

let subject = new Subject()
for(let i = 0; i< 10; i++) {
    new Observer(i, subject)
}
subject.setState(10)

设计原则

主题和观察者分离，不是主动触发而是被动监听，两者解耦
符合开放封闭原则

迭代器模式

顺序访问一个集合
使用者无需知道集合的内部结构（封装）

UML类图

迭代器模式

代码

// 迭代器模式
class Iterator {
    constructor(container) {
        this.list = container.list
        this.index = 0
    }
    next() {
        if (this.hasNext()) {
            return this.list[this.index++]
        }
        return null
    }
    hasNext() {
        if (this.index >= this.list.length) {
            return false
        }
        return true
    }
}
class Container {
    constructor(list) {
        this.list = list
    }
    getIterator() {
        return new Iterator(this)
    }
}

let arr = [1, 2, 3]
let container = new Container(arr)
let iterator = container.getIterator()
while(iterator.hasNext()) {
    console.log(iterator.next())
}

// ES6 Iterator
let iterator = arr[Symbol.iterator]()
let item = { done: false}
while (!item.done) {
    item = iterator.next()
    if(item.value) {
        console.log(item.value)
    }
}

// for..of  遍历迭代器
for (let item of arr) {
    console.log(item)
}

设计原则

迭代器对象和目标对象分离
迭代器将使用者与目标对象隔离开
符合开放封闭原则

状态模式

一个对象有状态变化
每次状态变化都会触发一个逻辑
不能总是用if...else...来控制

示例

有限状态机
简单的promise

UML类图

状态模式

代码

// 状态模式
class State {
    constructor(color) {
        this.color = color
    }
    handle(context) {
        console.log('turn to ' + this.color)
        context.setState(this)
    }
}
class Context {
    constructor() {
        this.state = null
    }
    getState() {
        return this.state
    }
    setState(state) {
        this.state = state
    }
}
let context = new Context()
let green = new State('green')
green.handle(context)
console.log(context.getState())

// 有限状态机
import StateMachine from 'javascript-state-machine'
let fsm = new StateMachine({
    init: '收藏',
    transitions: [
        {
            name: 'doStore',
            from: '收藏',
            to: '取消收藏'
        },
        {
            name: 'deleteStore',
            from: '取消收藏',
            to: '收藏'
        }
    ],
    methods: {
        onDoStore() {
            console.log('收藏了')
            updateText()
        },
        onDeleteStore() {
            console.log('取消收藏了')
            updateText()
        }
    }
})
let dom = document.querySelector('p')
dom.onclick = function() {
    if (fsm.is('收藏')) {
        fsm.doStore()
    } else {
        fsm.deleteStore()
    }
}
function updateText() {
    dom.innerHTML = fsm.state
}
updateText()

// 有限状态机 promise
import StateMachine from 'javascript-state-machine'
let fsm = new StateMachine({
    init: 'pending',
    transitions: [
        {
            name: 'resolve',
            from: 'pending',
            to: 'fullfilled'
        },
        {
            name: 'reject',
            from: 'pending',
            to: 'rejected'
        }
    ],
    methods: {
        onResolve(state, data) {
            data.successList.forEach(fn => fn())
        },
        onReject(state, data) {
            data.failList.forEach(fn => fn())
        }
    }
})

class MyPromise {
    constructor(fn) {
        this.successList = []
        this.failList = []

        fn(() => {
            fsm.resolve(this)
        }, () => {
            fsm.reject(this)
        })
    }
    then(successFn, failFn) {
        this.successList.push(successFn)
        this.failList.push(failFn)
    }
}

function loadImg(src) {
    const promise = new MyPromise(function(resolve, reject) {
        let img = document.createElement('img')
        img.onload = function() {
            resolve(img)
        }
        img.onerror = function() {
            reject()
        }
        img.src = src   
    })
    return promise
}
let result = loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535887490282&di=8e030a963f1cdf657713aedfe0eda25f&imgtype=0&src=http%3A%2F%2Fnpic7.fangtoo.com%2Fcn%2Fzixun%2Fzh-chs%2F2017-10%2F27%2F354172-2017102710051570.jpg')
result.then(function() {
    console.log('加载成功')
}, function() {
    console.log('加载失败')
})

设计原则

将状态对象和主体对象分离，状态的变化逻辑单独处理
符合开放封闭原则

原型模式

clone自己，生成一个新对象

示例

Object.create()

代码

// 原型模式
const prototype = {
    getName: function() {
        return this.first + ' ' + this.last
    },
    say: function() {
        console.log('hello')
    }
}
let x = Object.create(prototype)
x.first = 'X'
x.last = 'x'
console.log(x.getName())

let y = Object.create(prototype)
y.first = 'Y'
y.last = 'y'
console.log(y.getName())

桥接模式

用于把抽象化与实现化解耦
使得两者可以独立变化

代码

// 桥接模式
class Draw {
    constructor(type, color) {
        this.type = type
        this.color = color.name
    }
    draw() {
        console.log(`draw a ${this.type} with ${this.color} color`)
    }
}
class Color {
    constructor(name) {
        this.name = name
    }
}
let red = new Color('red')
let blue = new Color('blue')
let rect = new Draw('rect', red)
let circ = new Draw('circ', blue)
rect.draw()
circ.draw()

设计原则

抽象和实现分离，解耦
符合开放封闭原则

组合模式

生成树形结构，表示‘整体-部分’关系
让整体和部分都具有一致的操作方式

示例

虚拟DOM中的vnode
js菜单

设计原则

将整体和单个节点的操作抽象出来
符合开放封闭原则

享元模式

共享内存（主要考虑内存，而非效率）
相同的数据共享使用

设计原则

将相同的部分抽象出来
符合开放封闭原则

策略模式

不同的策略分开处理
避免出现大量的if..else或者switch..case

代码

class OrdinaryUser {
    buy() {
        console.log('普通用户')
    }
}
class MemberUser {
    buy() {
        console.log('会员用户')
    }
}
class VipUser {
    buy() {
        console.log('vip用户')
    }
}
let u1 = new OrdinaryUser()
u1.buy()
let u2 = new MemberUser()
u2.buy()
let u3 = new VipUser()
u3.buy()

设计原则

不同策略，分开处理，而不是混合到一起
符合开放封闭原则

职责链模式

一步操作可能分为多个职责角色来完成
把这些角色都分开，用一个链串起来
将发起者和各个处理者进行隔离

代码

// 职责链模式
class Action {
    constructor(name) {
        this.name = name
        this.nextAction = null
    }
    setNextAction(action) {
        this.nextAction = action
        return action
    }
    handle() {
        console.log(this.name + '====审批')
        if (this.nextAction != null) {
            this.nextAction.handle()
        }
    }
}
let a1 = new Action('组长')
let a2 = new Action('经理')
let a3 = new Action('总裁')
a1.setNextAction(a2).setNextAction(a3)
a1.handle()

设计原则

发起者与各个处理者进行隔离
符合开放封闭原则

命令模式

执行命令时，发布者和执行者分开
中间加入命令对象，作为中转站

示例

将军--吹号手--士兵

代码

// 命令模式
class Receiver {
    exec() {
        console.log('执行 exec')
    }
}
class Command {
    constructor(receiver) {
        this.receiver = receiver
    }
    cmd() {
        this.receiver.exec()
    }
}
class Invoke {
    constructor(command) {
        this.command = command
    }
    exec() {
        this.command.cmd()
    }
}
let receiver = new Receiver()
let command = new Command(receiver)
let invoke = new Invoke(command)
invoke.exec()

设计原则

命令对象与执行对象分开，解耦
符合开放封闭原则

备忘录模式

随时记录一个对象的状态变化
随时可以恢复之前的某个状态（如撤销功能）

代码

// 备忘录模式
class Momento { // 备忘类
    constructor(content) {
        this.content = content
    }
    getContent() {
        return this.content
    }
}
class CareTaker { // 备忘列表
    constructor() {
        this.list = []
    }
    add(momento) {
        this.list.push(momento)
    }
    get(index) {
        return this.list[index]
    }
}
class Editor {
    constructor() {
        this.content = null
    }
    setContent(content) {
        this.content = content
    }
    getContent() {
        return this.content
    }
    saveContentToMomento() {
        return new Momento(this.content)
    }
    getContentFromMomento(momento) {
        this.content = momento.getContent()
    }
}
let editor = new Editor()
let caretaker = new CareTaker()

editor.setContent('1111')
editor.setContent('2222')
caretaker.add(editor.saveContentToMomento()) // 备份当前内容
editor.setContent('3333')
caretaker.add(editor.saveContentToMomento()) // 备份当前内容
editor.setContent('4444')
console.log(editor.getContent())

editor.getContentFromMomento(caretaker.get(1)) // 撤销
console.log(editor.getContent())
editor.getContentFromMomento(caretaker.get(0)) // 撤销
console.log(editor.getContent())

设计原则

状态对象与使用者分开，解耦
符合开放封闭原则

中介者模式

代码

// 中介者模式
class A1 {
    constructor() {
        this.number = 0
    }
    setNumber(num, m) {
        this.number = num
        if (m) {
            m.setB()
        }
    }
}
class B1 {
    constructor() {
        this.number = 0
    }
    setNumber(num, m) {
        this.number = num
        if (m) {
            m.setA()
        }
    }
}
class Mediator {
    constructor(a, b) {
        this.a = a
        this.b = b
    }
    setA() {
        let number = this.b.number
        this.a.setNumber(number)
    }
    setB() {
        let number = this.a.number
        this.b.setNumber(number)
    }
}

let a = new A1()
let b= new B1()
let mediator = new Mediator(a, b)
a.setNumber(1000, mediator)
console.log(a, b)
b.setNumber(100, mediator)
console.log(a, b)

设计原则

各个关联对象通过中介者隔离
符合开放封闭原则

JavaScript设计模式

前言

设计原则

单一职责原则

开放封闭原则

李氏置换原则

接口独立原则

依赖倒置原则

工厂模式

示例

UML类图

代码

设计原则

单例模式

示例

代码

设计原则

适配器模式

示例

UML类图

代码

设计原则

代理模式

示例

UML类图

代码

设计原则

装饰器模式

示例

UML类图

代码

设计原则

观察者模式

示例

UML类图

代码

设计原则

迭代器模式

UML类图

代码

设计原则

状态模式

示例

UML类图

代码

设计原则

原型模式

示例

代码

桥接模式

代码

设计原则

组合模式

示例

设计原则

享元模式

设计原则

策略模式

代码

设计原则

职责链模式

代码

设计原则

命令模式

示例

代码

设计原则

备忘录模式

代码

设计原则

中介者模式

代码

设计原则

猜你喜欢

热点阅读