js设计模式

单例

保证一个类仅有一个实例，并提供一个全局访问点

1,保证类只有一个实例

2，构造出唯一的实例

 

饿汉模式

const createOne=(function(){
    let instance=null
    const Create=function(name){
        if(instance){
            return instance
        }
        instance=this
        this.name=name
        return instance
    }
    return Create
})()

var dd=new createOne('asdadasdad')
var bb=new createOne(1213231231321)

dd===bb//true

 

 

 

懒汉模式

const createOne=(function(){
    let instance={}
    const Create=function(name){
        instance.name=name
        return instance
    }
    return Create
})()

var dd=new createOne('asdadasdad')
var bb=new createOne(1213231231321)

dd===bb//true

 

 

懒汉和饿汉不同点在于，这个唯一类是先创建好，还是需要后面来构建

 

 

工厂模式

同样形式的参数返回不同的的实例

将函数具体的逻辑封装，只留下一个入口，传入不同的参数，可以获取各种类型的对象

var BicycleShop = function () { };
BicycleShop.prototype = {
  sellBicycle: function (model) {
    var bicycle;
    switch (model) {
      case "A"://A类型的自行车  
        bicycle = new A();
        break;
      case "B":
        bicycle = new B();
        break;
      case "C":
        bicycle = new C();
        break;
    }
    return bicycle;
  }
} 

 

 

 

 

观察者模式

观察者模式里的观察者，理解为订阅者，被发布者，观察是否有执行信号的对象

class Subject{//主题函数
    constructor(){
        this.Observers=[]
    }
    add(observer){
        this.Observers.push(observer)
   }
   remove(observer){
       let index=this.Observers.findIndex(item => item === observer);
       index?this.Observers.splice(index,1):''
   }
   notify(){
    this.Observers.forEach(item => {
       item.update();
    })
   }
}


//定义观察着对象
class Observer {
  constructor(name) {
    this.name = name;
  }
  update() {
    console.log(`my name is:${this.name}`);
  }
}


let sub =new Subject()
let obs1=new Observer('666')
let obs2=new Observer('555')

sub.add(obs1)
sub.add(obs2)
sub.notify()

 

这里的主题对象会把观察者一同录入，因此主题对象是知道观察者的

 

 

发布订阅

与观察者不同的是，发布订阅模式发布者与订阅者之间并不会有对方的信息

let pubSub = {
  subs:{},
  on(key, fn) { //订阅
    if (!this.subs[key]) {
      this.subs[key] = [];
    }
    this.subs[key].push(fn);
  },
  emit(key,...arg) {//发布
    let fns = this.subs[key];
 
    if (!fns || fns.length <= 0) return;
 
    for (let i = 0, len = fns.length; i < len; i++) {
      fns[i](...arg);
    }
  },
  unSubscribe(key) {
    delete this.subs[key]
  }
}
 
//测试
pubSub.on('name', name => {
  console.log(`your name is ${name}`);
})
pubSub.on('gender', gender => {
  console.log(`your name is ${gender}`);
})
pubSub.emit('name', 'leaf333');  // your name is leaf333
pubSub.emit('gender', '18');  // your gender is 18