Skip to content

ocean-fe/ocean-message

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@ocean/message

Introduction

message可以订阅、发布消息,实现组件之间的通信

Installation

Using npm:

$ npm i @ocean/message

Using yarn:

$ yarn add @ocean/message

API

 /**
   * MsgRegister
   * 注册事件
   * @export
   * @param {string} eventName (参考格式:EVENT:NAME)
   * @param {func} callback
   * @return null
   */

message.MsgRegister('EVENT:NAME', callback);

  /**
   * MsgTrigger
   * 触发事件
   * @export
   * @param {string} eventName
   * @param {any} data
   * @return null
   */
message.MsgTrigger('EVENT:NAME', data);

  /**
   * MsgUnregister
   * 撤销事件绑定
   * @export
   * @param {string} eventName
   * @param {func} callback
   * @return null
   */
message.MsgUnregister('EVENT:NAME', callback); 

Example

import React, { useState, useEffect } from 'react';
import { Button } from 'antd';
import message from '@ocean/message';
const OceanMessageDemo = () => {
const [messageText, setMessageText] = useState(null);
const onMessage = () => {
 setMessageText('这是一段触发message消息事件生成的文本');
};
useEffect(()=>{
message.MsgRegister('TRIGGER', onMessage);
// 为避免造成内存泄漏,必须return message的注销方法
return () => {
message.MsgUnregister('TRIGGER');
}
});
const sendMessage = () => {
message.MsgTrigger('TRIGGER')
};
return (
<div>
<div>{messageText}</div>
<Button type='primary' onClick={ sendMessage }>调用message</Button>
</div>
)
}
export default OceanMessageDemo;

Support

Tested in Chrome 74-75, Firefox 66-67, IE 11, Edge 18, Safari 11-12, & Node.js 8-12.

Contributors

© 2019 powered by 贝壳金服房产前端团队

License

This software is free to use under the Apache License Apache license.

About

基于订阅模式实现的消息中心

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published