一. 你是如何理解发布订阅模式的

  • JS中的设计模式:

    • 单例模式:处理业务逻辑
    • 构造原型模式:封装类库,组件,框架,插件等
      • 类库:jQuery

        • 只是提供了一些常用的方法,可以应用到任何的项目中,不具备业务性
      • 组件:bootstrap
        • 提供了很多通用的组件(HTML/CSS/JS都是别人规定好的),我们只需要按照要求使用,就可以直接的达到效果
      • 插件: swiper/iscroll
        • 针对于一个具体业务的封装,例如选项卡插件或者轮播图插件
      • 框架:React/Vue
        • 具备一定编程思想的(MVC/MVVM)叫做框架
    • 发布订阅模式:处理一些具体需求的
    • promise模式:处理一些具体需求的
  • 发布订阅模式
    • 发布一个计划表(发布)
    • 往计划表中追加一些需要处理的事情(订阅)

二. 发布订阅模式

发布订阅模式不是一个死的机制,他是一种思想,一种写代码的形式;主要为了处理一对多的场景,应用于不同情况下的不同函数的调用,this很重要

  • 手动进行模拟浏览器事件机制

    1. 订阅
    1. 发布

      • 执行
  • 改变this指向

    1. 创建一个小工具盒
    2. 把我们的方法放到了小工具盒里边
    3. 当我们在想用这个方法的时候,直接就到这个小工具盒变量就可以
  • 处理顺序问题的,其实根本就是处理IE事件池乱序问题,那么我们就不能用ie的事件池进行,我们模拟一个事件池(利用发布订阅的思想来模拟我们的事件池)

    1. 监听的时候添加处理程序
    2. 在发布的时候将监听的事件的处理程序都执行

这里结合ES6的语法,简单写一个发布订阅模式的小案例:

// 发布 emit 订阅 on {}
function Girl() {
this._events = {}
}
Girl.prototype.on = function (eventName,callback) { //这里判断他是不是第一次添加(订阅)
if(this._events[eventName]){
this._events[eventName].push(callback);
}else{
this._events[eventName] = [callback]
}
};
Girl.prototype.emit = function (eventName,...args) {
if(this._events[eventName]){
this._events[eventName].forEach(cb=>cb(...args));
}
}; let cry = (who) =>{console.log(who+'哭');};
let shopping = (who) =>{console.log(who+'购物');};
let eat = (who) =>{console.log(who+'吃');};
let smile=(who)=>{console.log(who+'笑')}; let girl1 = new Girl();
girl1.on('失恋',cry);
girl1.on('失恋',eat);
girl1.on('失恋',shopping);
girl1.emit('失恋','小明'); let girl2 = new Girl();
girl2.on('恋爱',shopping);
girl2.on('恋爱',smile);
girl2.emit('恋爱','小华');

JS中的发布订阅模式的更多相关文章

  1. Javascript中理解发布--订阅模式

    Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 如何实现发布--订阅模式? 发布---订阅模式的代码封装 如何取消订阅事件? 全局--发布订阅对象代码封装 理解模块间通信 回到 ...

  2. [转] Javascript中理解发布--订阅模式

    发布订阅模式介绍 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 现实生活中的发布- ...

  3. 【转】Javascript中理解发布--订阅模式

    Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时 ...

  4. javascript中的发布订阅模式与观察者模式

    这里了解一下JavaScript中的发布订阅模式和观察者模式,观察者模式是24种基础设计模式之一. 设计模式的背景 设计模式并非是软件开发的专业术语,实际上设计模式最早诞生于建筑学. 设计模式的定义是 ...

  5. js里的发布订阅模式及vue里的事件订阅实现

    发布订阅模式(观察者模式) 发布订阅模式的定义:它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 发布订阅模式在JS中最常见的就是DOM的事件绑定与触发 ...

  6. js设计模式之发布/订阅模式模式

    一.前言 发布订阅模式,基于一个主题/事件通道,希望接收通知的对象(称为subscriber)通过自定义事件订阅主题,被激活事件的对象(称为publisher)通过发布主题事件的方式被通知. 就和用户 ...

  7. 浅谈js设计模式之发布 — 订阅模式

    发布 — 订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在 JavaScript开发中,我们一般用事件模型来替代传统的发布 — ...

  8. js设计模式之发布订阅模式

    1. 定义 发布-订阅模式其实是一种对象间一对多的依赖关系,当一个对象的状态发送改变时,所有依赖于它的对象都将得到状态改变的通知. 订阅者(Subscriber)把自己想订阅的事件注册(Subscri ...

  9. 面试官:能用JS写一个发布订阅模式吗?

    目录 1 场景引入 2 代码优化 2.1 解决增加粉丝问题 2.2 解决添加作品问题 3 观察者模式 4 经纪人登场 5 发布订阅模式 6 观察者模式和发布订阅模式的对比 什么是发布订阅模式?能手写实 ...

随机推荐

  1. 最近遇到的若干Web前端问题:disable和readonly,JqueryEasyUI,KindEditor

    最近项目中用到了Jquery Easyui和KindEditor等框架组件,问题真不少啊~  一些看起来很简单理所当然的事情,竟然花费了不少时间,才解决好~  1.readonly和disable的区 ...

  2. 三种连接 & DOS & SYNFLOOD & 防御

    accept的时候,三次连接是建立的. 有一种DOS攻击是SYN FLOOD,就是大量的SYN到达,但是没有ACK,无法建立起连接. 防御的方法,有多种,如下: 比如,禁止部分源地址: 到达一定阈值之 ...

  3. 【v2.x OGE教程 12】 关卡编辑器帮助文档

    ] 关卡编辑器帮助文档 一.简单介绍 关卡编辑器用于游戏关卡界面元素的可视化编辑,包含元素的位置.尺寸以及其他自己定义属性.通过解析生成的数据文件就可以获取关卡信息,并能随时调整.以降低开发工作量,提 ...

  4. 排序(1)---------选择排序(C语言实现)

    选择排序的基本思想: 选择排序(Selection sort)是一种简单直观的排序算法. 它的工作原理例如以下.首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素 ...

  5. vim 基础学习之global

    global命令可以在指定模式下,匹配行上进行Ex命令 使用格式: :[range]g[lobal]/{pattern}/[cmd] range-是执行范围(如果缺省,是%) global-命令关键字 ...

  6. VS书签的应用

    为某一行添加书签,方便快速定位. 添加书签, 查找上一个书签, 查找下一个书签, 清空所有书签. 有意思.

  7. ElasticSearch、Kibana Web管理

    ElasticSearch的Web管理 http://localhost:9200/ http://localhost:9200/cluster/health?pretty http://localh ...

  8. Linux系统存储交换机日志

    Linux系统存储交换机日志     日志记录是为系统设备在运行过程中报告其运行情况而设的, 为了保证系统正常运行, 解决每一天可能遇到的各种各样的问题, 网络管理员必须认真地读取日志记录.目前公司系 ...

  9. 03010_防止SQL注入

    1.预处理对象 (1)使用PreparedStatement预处理对象时,建议每条sql语句所有的实际参数,都使用逗号分隔: String sql = "insert into sort(s ...

  10. codecombat之边远地区的森林12-22关及地牢39关代码分享

    codecombat中国游戏网址:http://www.codecombat.cn/ 全部代码为javascript代码分享 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...