设计模式

观察者模式

class subejct {
    constructor(){
       this.observers=[]
    }
    addObserver(obj){
      this.observers.push(obj)
    }
    offObserver(obj){
     this.observers=this.observers.filter((item)=>{
         return item!=obj
     })
    }
    once(obj){
       obj.update()
        this.offObserver(obj)
    }
    ontify(){
      this.observers.forEach((observer)=>{
          observer.update()
      })
    }

}
class observer {
    constructor(){
        this.update=function () {
            
        }
    }
}

发布订阅模式

class sub {
    constructor(){
        this.subs={

        }
    }
    sub(key,callback){
        if (!this.subs[key]){
            this.subs[key]=[]
        }
        this.subs[key].push(callback)
    }
    unsub(key,fn){
        let subs=this.subs[key]
        this.subs[key]=subs.filter(item=>fn!=item)
    }
    pubilish(key,...arg){
        let subs=this.subs[key]
        subs.forEach(fn=>fn(arg))
    }
}

策略模式

function strategy() {
  const cache = [];
  const strategyCol = {
    fileFormat({ format, errMsg }) {
      if (!supportFile.some(item => item === format)) {
        return errMsg;
      }
      return '';
    },
    picFormat({ format, errMsg }) {
      if (!supportPicFormat.some(item => item === format)) {
        return errMsg;
      }
      return '';
    },
  };
  return {
    check(type, params) {
      return strategyCol[type] ? strategyCol[type].call(null, params) : '';
    },
    add(rules) {
      for (let i = 0, len = rules.length; i < len; i++) {
        cache.push(strategyCol[rules[i].strategy].call(null, rules[i].params));
      }
    },
    start() {
      for (let i = 0, len = cache.length; i < len; i++) {
        const errMsg = cache[i];
        if (errMsg) return errMsg;
      }
    },
  };
}

代理模式

function ajax(params) { // 实际发送请求方法
  console.log(`发送请求${params}`)
  return params + Math.random()
}

const storage = new Map();

function cache(params) { // 缓存模式
  if (storage.has(params)) {
    return storage.get(params)
  }
  const value = ajax(params)
  storage.set(params, value)
  return value
}

function proxyAjax(params) { // 代理ajax请求
  return cache(params)
}

console.log(proxyAjax(1)) // 发送参数为1的请求
console.log(proxyAjax(1)) // 发送相同参数为1的请求，cache读取到缓存，所以不再调用ajax方法，直接返回结果
console.log(proxyAjax(2)) // 发送参数为2的请求，此时未读取到缓存，直接调用ajax方法，从后台请求

工厂模式

class Car {
  constructor(options) {
    this.doors = options.doors || 4;
    this.state = options.state || "brand new";
    this.color = options.color || "silver";
  }
}

class Truck {
  constructor(options) {
    this.state = options.state || "used";
    this.wheelSize = options.wheelSize || "large";
    this.color = options.color || "blue";
  }
}

function vehicleFactory (options) {
  if (options.type === 'car') {
    return new Car(options)  
  } else {
    return new Truck(options)
  }
}

抽象工厂模式

class Truck {
  constructor(options) {
    this.state = options.state || "used";
    this.wheelSize = options.wheelSize || "large";
    this.color = options.color || "blue";
  }
}

class Car {
  constructor(options) {
    this.doors = options.doors || 4;
    this.state = options.state || "brand new";
    this.color = options.color || "silver";
  }
}

class AbstractFactory {
  constructor() {
    this.types = {}
  }
  registerFactory(type, factory) {
    this.types[type] = factory
  }
  getInstance(type, args) {
    let factory = this.types[type]
    if (factory) {
      return new factory(args)
    }
  }
}

let abstractFactory = new AbortController()
abstractFactory.registerFactory('car', Car)
abstractFactory.registerFactory('truck', Truck)

abstractFactory.getInstance('car', options)
abstractFactory.getInstance('truck', options)

单例模式

class Obj(data) {
  // ....
}
// 利用闭包实现单例模式，确保obj类只有一个实例
function singleton (data) {
  var instance;
  return function () {
    if (!instance) {
      instance = new Obj(data)
    }
    return instance
  }
}

装饰者模式

 // o为已有对象
    var M20 = function(o){    // 这里定义一个装饰类
        var str = '20多岁的时候,';
        // o是传入的对象，调用传入对象的方法，加以装饰
        this.eat = function(){
            return str + o.eat()+",肥得很！";
        };
        this.drink = function(){
            return str + o.drink()+",就是个水桶！";
        };
        this.coding = function(){
            return str + o.coding()+",代码又写得撇！";
        };
    }
    alert(new M20(david).eat());    // 20多岁的时候,大卫是个大胖子，一天只晓得吃,肥得很！
    alert(new M20(david).drink());    // 20多岁的时候,大卫除了吃就是喝,就是个水桶！
    alert(new M20(david).coding());    // 20多岁的时候,写代码吧，大卫,代码又写得撇！

适配器模式

function api (x1, x2, x3) {
  console.log(x1 + x2 + x3);  // 用console.log来模拟接口的相关操作
}

var data = {
  a: '我',
  b: '很',
  c: '帅'
}

function adapterApi (o) {
  // 通过适配器函数来调用目的api
  api(o.a, o.b, o.c);
} 

adapterApi(data);
// 我很帅