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

 

4.观察者模式

//首先是目标的构造函数，他有个数组，用于添加观察者。还有个广播方法，遍历观察者数组后调用他们的update方法：
class Subject {
    constructor() {
        this.subs = [];
    }
    addSub(sub) {
        this.subs.push(sub);
    }
    notify() {
        this.subs.forEach(sub=> {
            sub.update();
        });
    }
}

//观察者有个update方法：
class Observer {
    update() {
        console.log('update');
    }
}

//测试代码
let subject = new Subject();
let ob = new Observer();
//目标添加观察者了
subject.addSub(ob);
//目标发布消息调用观察者的更新方法了
subject.notify();   //update

观察者和发布/订阅者区别

1.观察者模式是一种紧耦合的状态；而发布/订阅模式是一种松耦合的状态；

2.观察者模式是通过主题自己本身去遍历观察者，然后调用订阅者的通知方法去实现的；

而发布/订阅模式是通过事件管道去通知的