原生js实现的观察者和订阅者模式简单示例


Posted in Javascript onApril 18, 2020

本文实例讲述了原生js实现的观察者和订阅者模式。分享给大家供大家参考,具体如下:

观察者模式也叫 发布者-订阅者模式,发布者发布事件,订阅者监听事件并做出反应

在传统的前端解耦方面,观察者模式作为比较常见一种设计模式,大量使用在各种框架类库的设计当中。

核心代码:

// eventProxy.js
'use strict';
const eventProxy = {
 onObj: {},
 oneObj: {},
 on: function(key, fn) {
  if(this.onObj[key] === undefined) {
   this.onObj[key] = [];
  }
 
  this.onObj[key].push(fn);
 },
 one: function(key, fn) {
  if(this.oneObj[key] === undefined) {
   this.oneObj[key] = [];
  }
 
  this.oneObj[key].push(fn);
 },
 off: function(key) {
  this.onObj[key] = [];
  this.oneObj[key] = [];
 },
 trigger: function() {
  let key, args;
  if(arguments.length == 0) {
   return false;
  }
  key = arguments[0];
  args = [].concat(Array.prototype.slice.call(arguments, 1));
 
  if(this.onObj[key] !== undefined
   && this.onObj[key].length > 0) {
   for(let i in this.onObj[key]) {
    this.onObj[key][i].apply(null, args);
   }
  }
  if(this.oneObj[key] !== undefined
   && this.oneObj[key].length > 0) {
   for(let i in this.oneObj[key]) {
    this.oneObj[key][i].apply(null, args);
    this.oneObj[key][i] = undefined;
   }
   this.oneObj[key] = [];
  }
 }
};
 
export default eventProxy;

使用:引入全局事件类,或通过配置webpack将事件类设置为全局变量

import { eventProxy } from '@/utils'
 
class Parent extends Component{
 render() {
  return (
   <div style={{marginTop:"50px"}}>
    <Child_1/>
    <Child_2/>
   </div>
  );
 }
}
// componentDidUpdate 与 render 方法与上例一致
class Child_1 extends Component{
 componentDidMount() {
  setTimeout(() => {
   // 发布 msg 事件
   console.log(eventProxy)
   eventProxy.trigger('msg', 'end','lll');
  }, 5000);
 }
 render() {
  return (
   <div>我是组件一</div>
  )
 }
}
// componentDidUpdate 方法与上例一致
class Child_2 extends Component{
 state = {
  msg: 'start'
 };
 
 componentDidMount() {
  // 监听 msg 事件
  eventProxy.on('msg', (msg,mm) => {
   console.log(msg,mm)
   this.setState({
    msg:msg
   });
  });
 }
 
 render() {
  return <div>
   <p>child_2 component: {this.state.msg}</p>
  </div>
 }
}

参考:淘宝前端团队技术库

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
jquery向上向下取整适合分页查询
Sep 06 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 09 Javascript
微信小程序input抖动问题的修复方法
Mar 03 Javascript
es6函数name属性功能与用法实例分析
Apr 18 #Javascript
es6数组includes()用法实例分析
Apr 18 #Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 #Javascript
es6函数中的作用域实例分析
Apr 18 #Javascript
es6函数之rest参数用法实例分析
Apr 18 #Javascript
vue实现短信验证码输入框
Apr 17 #Javascript
JS监听组合按键思路及实现过程
Apr 17 #Javascript
You might like
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
python实现rest请求api示例
2014/04/22 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
大学生应聘求职信
2014/05/26 职场文书
工作表扬信
2015/01/17 职场文书
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server