Js设计模式,工厂、订阅、单体、观察者等

如果觉得还有点用，请您给我一个赞！您的赞是我坚持下去的动力！

为了不为学习设计模式而学习设计模式,我们从实际运用的角度来看一下常用的设计模式,我会用尽量少的代码来描述设计模式

工厂模式
产生规定规格内的相似对象
应用场景：创建组件、创建各类对象等

  function createPerson(name,age,sex){
    let obj=new Object();
    obj.name=name;
    obj.age=age;
    obj.sex=sex;
    return obj;
  }

观察者模式
每次触发行为将通知所有的观察者
应用场景：事件监听、拦截器

  let eatWacher=[fn,fn2,fn3];//存放所有的观察者
  function eat(){
    console.log('eatting');
    eatWacher.map((fn)=>{fn()});//当触发一个事件时,通知所有的观察者
  }

单体模式
对象只被实例化一次，重复调用时为已创建的实例
应用场景：只需要创建一次对象即可的，比如全局的组件

  function getInstance(){
    if(!this.instance){
      this.instance=new Object();
    }
    return this.instance;
  }

订阅-发布模式
订阅者像订阅中心预定自己关心的消息类型
订阅中心在收到事件的时候，分发给订阅者他们关心的事务
应用场景：消息中心

  var buyPhoneEvent={
    list:[],
    listen(key,fn){
      this.list[key]=this.list[key]||[];
      this.list[key].push(fn);
    },
    tigger(...params){
      var key = (params&&params[0])?params[0]:"";
      if(!key)return;
      var lst = this.list[key];
      if(!lst||lst.length===0)return;
      lst.map((fn)=>{fn.apply(this,params)})
    }
  };

  buyPhoneEvent.listen('iphone',(...params)=>{console.log(`buy iphone ${params[0]}-${params[1]}`)});
  buyPhoneEvent.listen('huawei',(...params)=>{console.log(`buy huawei ${params[0]}-${params[1]}`)});

  buyPhoneEvent.tigger("iphone","4999");
  buyPhoneEvent.tigger("huawei","2999");
  buyPhoneEvent.tigger("xiaomi","999");

利用闭包和Map给数据创建表，利用查表法快速查找数据
使用场景:
有一个几万长度的员工列表，需要快速能找到员工对应的数据

function makeBufferMap(list){
    let map = {};
    list.forEach(item=>map[item]=true);//这里true也可以换成数据
    return function (val){
      return map[val];
    }
}
var findStaff = makeBufferMap(['jack','tom','peter']);
findStaff('jack');//true
findStaff('a');//false
findStaff('peter');//true

最后编辑于：2022.07.20 11:23:07