js 设计模式

1. 单例模式

保证一个类只有一个实例,并提供一个访问它的全局访问点(调用一个类,任何时候返回的都是同一个实例)。

class Singleton {
    constructor(name) {
        this.name = name
        this.instance = null   // 
    }
    getName() {
	return this.name
    }
    static getInstance(name) {
        if (!this.instance) {
      	     this.instance = new Singleton(name)
        }
        return this.instance
    }
}

const instanceA = Singleton.getInstance('seven1')
const instanceB = Singleton.getInstance('seven2')

2. 工厂模式

工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。

class Car {
    constructor(name) {
        this.name = name
    }
	
    getName () {
        return this.name
    }
	
    setName(name) {
	this.name = name
    }
}

class Bus {
    constructor(name) {
	this.name = name
    }
	
    getName () {
	return this.name
    }
	
    setName(name) {
	this.name = name
    }
	
    use () {
	console.log('I can run')
    }
}

class Factory {
    constructor(name) {
	this.name = name
    }
    static getInstance(name) {
	switch (name) {
	    case 'car':
		  return new Car('car')
	    case 'bus':
		  return new Bus('bus')
	    default:
		  return new Factory('factory');
	}
    }
    getName () {
	return this.name
    }
	
    setName(name) {
	this.name = name
    }
}

var car = Factory.getInstance('car')
var bus = Factory.getInstance('bus')
console.log(car)
console.log(bus)

3.发布/订阅者模式

发布订阅模式,基于一个主题/事件通道,希望接收通知的对象(称为subscriber)通过自定义事件订阅主题,被激活事件的对象(称为publisher)通过发布主题事件的方式被通知。

就和用户订阅微信公众号道理一样,一个公众号可以被多个用户同时订阅,当公众号有新增内容时候,只要发布就好了,用户就能接收到最新的内容。

js中的事件监听机制就是一种观察者模式。

class Publish {
    constructor() {
        this.handlers = {}
    }
    // 订阅事件
    on(eventType, handler) {
        if(!(eventType in this.handlers)) {
           this.handlers[eventType] = []
        }
        this.handlers[eventType].push(handler)
    }
    // 触发事件(发布事件)
    emit(eventType) {
        var handlerArgs = Array.prototype.slice.call(arguments,1);
        for(var i = 0; i < this.handlers[eventType].length; i++) {
            this.handlers[eventType][i].apply(this,handlerArgs);
        }
    }
    // 删除订阅事件
    off(eventType, handler) {
        var currentEvent = this.handlers[eventType];
        var len = 0;
        if (currentEvent) {
            len = currentEvent.length;
            for (var i = len - 1; i >= 0; i--){
                if (currentEvent[i] === handler){
                    currentEvent.splice(i, 1);
                }
            }
        }
    }
}

var Publisher = new Publish();
 
//订阅事件a
Publisher.on('a', function(data){
    console.log(1 + data);
});
Publisher.on('b', function(data){
    console.log(2 + data);
});
 
//触发事件a
Publisher.emit('a', '我是a调用的参数1');
Publisher.emit('a', '我是a调用的参数2');
//触发事件b
Publisher.emit('b', '我是b调用的参数1');
Publisher.emit('b', '我是b调用的参数2');

//console 控制台
//1我是a调用的参数1
//1我是a调用的参数2
//2我是b调用的参数1
//2我是b调用的参数2

猜你喜欢

转载自blog.csdn.net/davidPan1234/article/details/84939787