原生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 相关文章推荐
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
JavaScript基于ajax编辑信息用法实例
Jul 15 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
jquery实现轮播图效果
Feb 13 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
Vue 自定义指令功能完整实例
Sep 17 Javascript
如何实现iframe父子传参通信
Feb 05 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
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
JavaScript 加号(+)运算符号
2009/12/06 Javascript
js event事件的传递与冒泡处理
2009/12/06 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
js表单登陆验证示例
2016/10/19 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
vue实现简单跑马灯效果
2020/05/25 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
家具促销活动方案
2014/02/16 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
利群广告词
2014/03/20 职场文书
党性观念心得体会
2014/09/03 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL