5分钟速读系列-观察者模式/Mixin模式

这个系列是Improve how you architect webapps上文章的读书笔记。

观察者模式

观察者模式(发布订阅模式)是定义对象间一种一对多的依赖关系，使得当每一个被观察方改变状态，则所有依赖于它的观察者都会得到通知并自动更新。

// 被观察者提供观察者通知逻辑、订阅逻辑
class Observable {
    constructor() {
        this.observers = [];
    }
    // 观察者订阅入口
    subscribe(func) {
        this.observers.push(func);
    }

    unsubscribe(func) {
        this.observers = this.observers.filter(observer => observer !== func);
    }
    // 通知观察者
    notify(data) {
        this.observers.forEach(observer => observer(data));
    }
}
function logger(data) {
    console.log(data)
}
const observable = new Observable() 
// 订阅操作
observable.subscribe(logger);
// 通知操作
observable.notify('this is a test!')

观察者模式的优点是可以做到逻辑的分离，做到单一职责。缺点是当观察者数目较多的时候会有性能的问题

Mixin模式

Mixin模式可以在不通过继承的方式实现为类(对象)增加复用的能力。当你需要将一个特定的feature添加到不同的类或者为类提供可插拔能力的时候可以考虑Mixin模式。

// 基础类 只有name能力
class Dog {
    constructor(name) {
        this.name = name;
    }
}
// mixin方法 可以为基础类提供复用的能力
const dogFunctionality = {
    bark: () => console.log("Woof!"),
    wagTail: () => console.log("Wagging my tail!"),
    play: () => console.log("Playing!")
};
// 通过方法的拷贝 在Dog的原型上就有了对象的方法
Object.assign(Dog.prototype, dogFunctionality);
const pet1 = new Dog("Daisy");
pet1.bark(); // Woof!

可以在mixin函数中通过指定__proto__实现mixin的继承能力

const sayMixin = {
    say(phrase) {
        alert(phrase);
    }
};
const sayHiMixin = {
    // 设置原型 实现mixin的继承
    __proto__: sayMixin, // (可以在这儿使用 Object.setPrototypeOf 来设置原型)
    sayHi() {
        // 调用父类方法
        super.say(`Hello ${this.name}`); // (*)
    },
    sayBye() {
        super.say(`Bye ${this.name}`); // (*)
    }
};
class User {
    constructor(name) {
        this.name = name;
    }
}
// 拷贝方法
Object.assign(User.prototype, sayHiMixin);

// 现在 User 可以打招呼了
new User("Dude").sayHi(); // Hello Dude!

mixin模式会存在覆盖功能和增加项目代码复杂度的问题