设计模式总结

东哥aigc

已于 2022-08-09 09:42:30 修改

阅读量104

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签：设计模式单例模式

于 2022-08-08 17:55:16 首次发布

本文链接：https://blog.youkuaiyun.com/monk96/article/details/126232886

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了四种常用的设计模式：单例模式用于确保类只有一个实例；代理模式通过代理对象增加额外功能；工厂模式通过工厂类创建对象；观察者模式则允许对象在状态改变时通知其他对象。这些模式在软件开发中起着关键作用，提高代码复用性和灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单例模式

new 多少次，只会返回一个对象

// 单例模式
class Single {
    protected  _name: string = "NAME";
    static instance<T extends {}>(this: new() => T) {
        if((<any>this)._instance) {return (<any>this)._instance};
        (<any>this)._instance = new this();
        return (<any>this)._instance;
    }
}

class BagM extends Single {
    constructor() {
        super();
        console.log('初始化了我');
    }
    private count = 0;
    addItem(i: number) {
        this.count += i;
        console.log(this.count);
    }
}
BagM.instance().addItem(1);
BagM.instance().addItem(1);
BagM.instance().addItem(1);

代理模式

//租房。抽象角色
interface Rent {
    rent():any;
}
//房东 真实角色
class Host implements Rent{
    public  rent():any {
        console.log("房东要出租房子了");
    }
}
//代理角色。代理房东租房
class worker implements Rent{
    private host:Host;
    
    public constructor(host: Host ){
        this.host = host;   
    }

    //租房操作，可以添加一些额外操作
    public rent() {
        this.seeHouse();//看房
        this.host.rent();
        this.hetong();//签合同
        this.fare();//收中介费
    }

    public seeHouse(){
        console.log("中介带你看房子");
    }
    public hetong(){
        console.log("签订租赁合同");
    }
    public fare(){
        console.log("收中介费");
    }
}
const host = new Host();
        //代理房东。可以加一些附属操作
const worker1 = new worker(host);
worker1.rent();

工厂模式

利用一个工厂类，所有的实例类都通过工厂产出

enum colorType {
    RED,
    BLUE,
    GREEN,
}
class Factory {
    static createColor(color: colorType) {
        let renderColor = null;
        switch(color) {
            case colorType.RED:
                console.log('我是红色');
                break;
                case colorType.BLUE:
                    console.log('我是蓝色');
                    break;
                    case colorType.GREEN:
                        console.log('我是率色');
                        break;
        }   
        return renderColor;
    }
}

console.log(Factory.createColor(colorType.BLUE))
console.log(Factory.createColor(colorType.RED))

观察者模式

修改当前属性触发某个方法

interface Observer {
    onMessage(message: string): void;
}

class Dep {
    private _message: string = "";
    private _observerList: Observer[] = new Array<Observer>();
    set message(message: string){
        this._message = message;
        this._observerList.forEach(observer => {
            observer.onMessage(message);
        })
    }

    get message() {
        return this._message;
    }

    enterRoom(observer: Observer) {
        this._observerList.push(observer);
    }
}

class player implements Observer {
    onMessage(message: string): void {
        console.log(message);
    }
}

const player1 = new player();
const player2 = new player();
const player3 = new player();

const dep = new Dep();
dep.enterRoom(player1);
dep.enterRoom(player2);
dep.enterRoom(player3);
dep.message = '开始聊天';