javascript设计模式

2,763 阅读1分钟

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

定义主题 Subject

class Subject {
    constructor() {
        this.state = 0
        this.observers = []
    }
    getState() {
        return this.state
    }
    setState(state) {
        this.state = state
        //触发这个方法的时候,循环所有的观察者,通知每一个观察者,可以调用观察里面的方法
    }
    //把所有的观察者添加到observers中,以便通知所有观察者
    attach(observer) {
        this.observers.push(observer)
    }
}

定义观察者 Observer

class Observer {
    constructor(name, subject) {
        this.name = name
        this.subject = subject
        this.subject.attach(this)
    },
    methods() {
        //这里可以设置一些方法,以便每一个观察者调用,获取每一个观察者的不同行为
    }
}

使用观察者

const sub = new Subject()
const observer1 = new Observer('observer1', sub)
const observer2 = new Observer('observer2', sub)
const observer3 = new Observer('observer3', sub)

装饰器模式

装饰类

function mixins (...list) {
    return function (target) {
        // console.log("list", target)
        Object.assign(target.prototype, ...list)
    }
}

const Foo = {
    foo () { alert('foo') }
}

@mixins(Foo)
class MyClass { }

装饰方法

function log (target, name, descriptor) {
    var oldValue = descriptor.value;

    descriptor.value = function () {
        console.log(`Calling ${name} with`, arguments);
        return oldValue.apply(this, arguments);
    };

    return descriptor;
}
class Math {
    @log
    add (a, b) {
        return a + b;
    }
}

core-decorators 状态模式库