原生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 组件之旅(四):测试 JavaScript 组件
Oct 28 Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
javascript对象之内置对象Math使用方法
Apr 16 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 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
当海贼王变成JOJO风
2020/03/02 日漫
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
php递归创建目录的方法
2015/02/02 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
IE8 浏览器Cookie的处理
2009/01/31 Javascript
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
深入理解js promise chain
2016/05/05 Javascript
Angular路由简单学习
2016/12/26 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
详解vue 组件
2020/06/11 Javascript
python制作花瓣网美女图片爬虫
2015/10/28 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
浅谈react路由传参的几种方式
2021/03/23 Javascript
搞笑征婚广告词
2014/03/17 职场文书
社区健康教育实施方案
2014/03/18 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
超市采购员岗位职责
2015/04/07 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python