原生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 相关文章推荐
在textarea中显示html页面的javascript代码
Apr 20 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
详解javascript实现瀑布流绝对式布局
Jan 29 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 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
php escape URL编码
2008/12/10 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
jquery下json数组的操作实现代码
2010/08/09 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
python实现飞机大战微信小游戏
2020/03/21 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
django的ORM操作 增加和查询
2019/07/26 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
python实现翻译word表格小程序
2020/02/27 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
中式面点餐厅创业计划书
2014/01/29 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript