您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要为大家展示了原生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> } }
以上就是关于原生js如何实现观察者和订阅者模式的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。