观察者模式&工厂模式

最新推荐文章于 2026-04-24 15:46:18 发布

原创最新推荐文章于 2026-04-24 15:46:18 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#观察者模式

设计模式专栏收录该内容

2 篇文章

订阅专栏

本文介绍了JavaScript中两种重要的设计模式——观察者模式和工厂模式。通过实例展示了如何使用观察者模式来实现对象间的依赖通知，以及工厂模式如何简化对象创建。观察者模式用于当一个对象的状态改变时，所有依赖于它的对象都会得到通知并被自动更新。工厂模式则提供了一种创建对象的最佳方式，通过抽象出创建过程，使得代码更具扩展性和灵活性。

观察者模式

class Person{
    private _name: String;
    //所有的观察值模式
    observers: Array<IObserver> = new Array<IObserver>();

    set name(value) {
        this._name = value;
        //发生变化
        //遍历观察值数组，给所有观察者发消息
        for (let observer of this.observers) {
            observer.nameChanged(this._name);
            
        }
    }

    get name() {
        return this._name;
    }
}

interface IObserver{
    nameChanged(newName);
}

class Test implements IObserver{
    nameChanged(newName) {
        document.write("监听到变化，名字变为" + newName);
    }
}

let person = new Person();
let test = new Test();

person.observers.push(test);
person.name = "哈哈哈";

工厂模式

方便创建对象

enum CarType{
    Bmw,
    Audi,
    Benz
}

class Car{
    name: string;
    //工厂方法
    static Create(carType: CarType): Car{
        let car: Car;
        switch (carType) {
            case CarType.Bmw:
                car = new BMW();
                break;
            case CarType.Audi:
                car = new AUDI();
                break;
            case CarType.Benz:
                car = new BENZ();
                break;
        }
        return car;
        
    }
}

class BMW extends Car{ }
class AUDI extends Car{ }
class BENZ extends Car{ }

let bmw = Car.Create(CarType.Bmw);