手写发布订阅加单例模式

发布订阅

发布订阅者模式是什么?

老刘去买房,去到别墅区,他可以定很多套房子;去到平房区又可以定很多套房子(on)。交完首付后就可以安心了(emit)。如果不想买就不交钱退订(off)。售楼部有汤臣亿品,每人只能买一套房子(once)。

现在我们的任务就是帮老刘完成上面的步骤

拿上钱包

我们要帮老刘买房,那老刘拿什么买呢?当然是钱包了。 让我们帮老刘带上钱包:

js 复制代码
class Eventmitter{
    constructor() {
        this.event = {}
    }
}

先去订房

不同的房源可以买很多栋,那就好办了,老刘想买什么房就买什么房,想在哪个房源买就到哪个房源买。有钱就是任性。

js 复制代码
on(type,cb){
        if(!this.event[type]){
            this.event[type] = [cb]
        }else{
            this.event[type].push(cb)
        }
        
    }

付上首付

既然定了房那肯定帮老刘把首付搞定啊,让我们帮老刘把首付付了。

js 复制代码
    emit(type,arg){
        if(!this.event[type]){
            return
        }
        this.event[type].forEach(cb=>{
            cb(...arg)
        })
    }

退款

老刘真是的,才交完首付就想要退,没办法,谁叫老刘才是金主爸爸,那就退咯。

js 复制代码
off(type,cb){
        const index = this.event[type]
        const handles =index && index.indexOf(cb)
        if(handles !== -1){
            index.splice(handles,1)
        }
    }

买限定

原来老刘看上了一栋限定的房子,还好金主是想花更多的钱,啊呸,是想要更好的生活。

js 复制代码
once(type,cb){
        if(this.event[type] && this.event[type].indexOf(cb) !== -1){
            return
        }
        this.on(type,cb)
    }

最后参观一下老刘买的房子怎么样吧。

js 复制代码
const emiter = new Eventmitter()

function foo(){
    console.log('去买房');
}

emiter.on('sell',foo)
emiter.emit('sell')

单例模式

单例模式什么意思?你只能有一个老婆,这是法律规定的。平时你这一个女朋友,哪一个女朋友就不说你了。可是老婆只能有一个。

那单例模式可以用来干什么呢?比如弹出框、验证登陆等等。

单例模式得创建一个静态函数方法,防止其他对象发现

js 复制代码
class Person {
    constructor(name) {
      this.name = name
    }
    static getInfo(name) {
      if (!Person.instance) {
        Person.instance = new Person(name)
      }
      return Person.instance
    }
  }
  
  let p1 = Person.getInfo('李总')
  let p2 = Person.getInfo('李总')
  
  console.log(p1 == p2);

再来一个闭包的实现:

js 复制代码
function Storage() {
    this.name = '张三'
  }
  
  const Helper = (function() {
    let instance = null
    return function() {
      if (!instance) {
        instance = new Storage()
      }
      return instance
    }
  })()
  
  let p1 = new Helper()  // {name: '张三'}
  let p2 = new Helper() 
  console.log(p1 === p2); 

使用立即执行函数是为了只创建一个instance。后面再调用也不会再创建instance,保证了唯一性。

这些是不是了解起来特别简单呢。

相关推荐
RisunJan5 分钟前
Linux命令-named-checkzone
linux·前端
小陈工7 分钟前
Python Web开发入门(十):数据库迁移与版本管理——让数据库变更可控可回滚
前端·数据库·人工智能·python·sql·云原生·架构
吹晚风吧23 分钟前
解决vite打包,base配置前缀,nginx的dist包找不到资源
服务器·前端·nginx
Redemption36 分钟前
嵌软面试每日一阅----Linux驱动之字符设备驱动
linux·面试·职场和发展
东离与糖宝38 分钟前
HashMap从入门到源码:Java7/8/21区别+面试陷阱+高频追问合集
java·人工智能·面试
weixin199701080161 小时前
《施耐德商品详情页前端性能优化实战》
前端·性能优化
不想上班只想要钱1 小时前
模板里 item.xxx 报错 ,报 item的类型为未知
前端·vue
妖萌妹儿1 小时前
postman怎么做参数化批量测试,测试不同输入组合
开发语言·javascript·postman
阿琳a_1 小时前
在github上部署个人的vitepress文档网站
前端·vue.js·github·网站搭建·cesium
酉鬼女又兒1 小时前
零基础快速入门前端ES6 核心特性详解与蓝桥杯 Web 考点实践(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·职场和发展·蓝桥杯·es6·css3·html5