原生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 相关文章推荐
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
js闭包的用途详解
Nov 09 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 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 源代码压缩小工具
2009/12/22 PHP
PHP安全技术之 实现php基本安全
2010/09/04 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
php时间函数用法分析
2016/05/28 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
php7下的filesize函数
2019/09/30 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
Python如何读写二进制数组数据
2020/08/01 Python
详解anaconda安装步骤
2020/11/23 Python
环境工程求职简历的自我评价范文
2013/10/24 职场文书
大学生求职自我评价
2014/01/16 职场文书
会议活动邀请函
2014/01/27 职场文书
高三毕业寄语
2014/04/10 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
总经理人事任命书
2014/06/05 职场文书
法人身份证明书
2014/10/08 职场文书
2015团员个人年度总结
2015/11/24 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书