├── LICENSE ├── README.md ├── index.js └── package.json /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 吴海超(whc) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-whc-notification 2 | A react、vue、react native module to post and observer notification, it works on React 、React-Native 、Vue、H5. (支持一对多发送通知消息、主要解决react、react-native、vue、h5夸组件页面之间的通信状态管理等) 3 | 4 | ### 该组件可以用来替代Redux，Vuex进行状态管理，使用更加简单高效，强力推荐 5 | 6 | [ ![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg)](https://github.com/netyouli/react-whc-notification/pulls) 7 | [ ![NPM version](http://img.shields.io/npm/v/react-whc-notification.svg?style=flat)](https://www.npmjs.com/package/react-whc-notification) 8 | [![License MIT](http://img.shields.io/badge/license-MIT-orange.svg?style=flat)](https://raw.githubusercontent.com/crazycodeboy/react-whc-notification/master/LICENSE) 9 | 10 | 11 | ## Content 12 | 13 | - [Installation](#installation) 14 | - [Getting started](#getting-started) 15 | - [API](#api) 16 | - [Contribution](#contribution) 17 | 18 | ## Installation 19 | 20 | * 1.Run `npm i react-whc-notification --save` 21 | * 2.`import Notification from 'react-whc-notification'` 22 | 23 | ## Getting started 24 | 25 | Add `react-whc-notification` to your js file. 26 | 27 | `import Notification from 'react-whc-notification'` 28 | 29 | Add observer notification: 30 | 31 | ```javascript 32 | constructor(props) { 33 | super(props); 34 | Notification.addObserver(this, 'ObserverNotificationName' ,(param) => { 35 | console.log(param); 36 | }); 37 | 38 | // 最后一个参数true用来补发通知（主要是用于监听已经发过的通知但是监听者还没来得及注册监听的情况） 39 | Notification.addObserver(this, 'ObserverNotificationName' ,(param) => { 40 | console.log(param); 41 | }, true); 42 | } 43 | 44 | ``` 45 | 46 | Post notification: 47 | 48 | ```javascript 49 | Notification.post('ObserverNotificationName', '通知传递的参数可以是任意数据类型'); 50 | ``` 51 | 52 | Remove specified observer notification: 53 | 54 | ```javascript 55 | componentWillUnmount() { 56 | Notification.removeObserver(this, 'ObserverNotificationName'); 57 | } 58 | 59 | ``` 60 | 61 | Remove all observer notification: 62 | 63 | ```javascript 64 | componentWillUnmount() { 65 | Notification.removeObserver(this); 66 | } 67 | 68 | ``` 69 | 70 | ## API 71 | 72 | 73 | Method | Type | Optional | Description 74 | ----------------- | -------- | -------- | ----------- 75 | post(string, any) | function | true | post notification 76 | addObserver(object, string, function, boolean) | function | true | observer notification 77 | removeObserver(object, string) | function | true | remove observer notification 78 | 79 | 80 | ## Contribution 81 | 82 | Issues are welcome. Please add a screenshot of bug and code snippet. Quickest way to solve issue is to reproduce it on one of the examples. 83 | 84 | Pull requests are welcome. If you want to change API or making something big better to create issue and discuss it first. 85 | 86 | --- 87 | 88 | **MIT Licensed** 89 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // Created by WHC on 18/12/11. 2 | // Copyright © 2017年 WHC. All rights reserved. 3 | // 4 | // Github 5 | // Permission is hereby granted, free of charge, to any person obtaining a copy 6 | // of this software and associated documentation files (the "Software"), to deal 7 | // in the Software without restriction, including without limitation the rights 8 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | // copies of the Software, and to permit persons to whom the Software is 10 | // furnished to do so, subject to the following conditions: 11 | // 12 | // The above copyright notice and this permission notice shall be included in 13 | // all copies or substantial portions of the Software. 14 | // 15 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | // THE SOFTWARE. 22 | 23 | /** 24 | * 通知管理 25 | */ 26 | export default class Notification { 27 | 28 | static __default = new Notification(); 29 | 30 | constructor() { 31 | this.__observerMap = new Map(); 32 | this.__hashCodeSet = new Set(); 33 | this.__didPostNotifyMap = new Map(); 34 | this.__segmentKey = '_#$@_'; 35 | } 36 | 37 | /** 38 | * 发送通知 39 | * @param name 发送通知的名称 40 | * @param param 发送通知参数 41 | */ 42 | static post = (name, param = null) => { 43 | if (name != void 0) { 44 | Notification.__default.__observerMap.forEach((value, key, map) => { 45 | const array = key.split(Notification.__default.__segmentKey); 46 | if (array.length === 2) { 47 | const aname = array[0]; 48 | if (aname === name) { 49 | const { 50 | block = null, 51 | } = value; 52 | block && block(param); 53 | } 54 | } 55 | }); 56 | Notification.__default.__didPostNotifyMap.set(name, param); 57 | }else { 58 | console.warn('[Notification] post name not null'); 59 | } 60 | }; 61 | 62 | 63 | /** 64 | * 添加监听通知 65 | * @param observer 监听通知的对象 66 | * @param name 通知名称 67 | * @param block 通知回调 68 | * @param isResend 是否补发通知（主要是用于已经发过的通知但是还没来得及注册监听的情况） 69 | */ 70 | static addObserver = (observer, 71 | name, 72 | block = null, 73 | isResend = false) => { 74 | if (observer != void 0 && name != void 0) { 75 | const { 76 | __notification_hashCode = '' 77 | } = observer; 78 | if (__notification_hashCode.length === 0) { 79 | observer.__notification_hashCode = Notification.__default.__makeHashCode(); 80 | } 81 | const key = name + Notification.__default.__segmentKey + observer.__notification_hashCode; 82 | Notification.__default.__observerMap.set(key, {observer, block}); 83 | if (isResend) { 84 | const param = Notification.__default.__didPostNotifyMap.get(name); 85 | if (param != void 0) { 86 | block && block(param); 87 | } 88 | } 89 | }else { 90 | console.warn('[Notification] observer not null or name not null'); 91 | } 92 | }; 93 | 94 | /** 95 | * 移除通知监听 96 | * @param observer 监听通知的对象 97 | * @param name 要移除的通知的名称、如果为空则移除所有监听 98 | */ 99 | static removeObserver = (observer, name = null) => { 100 | if (observer != void 0) { 101 | const { 102 | __notification_hashCode 103 | } = observer; 104 | if (__notification_hashCode != void 0) { 105 | if (name) { 106 | const key = name + Notification.__default.__segmentKey + __notification_hashCode; 107 | Notification.__default.__observerMap.delete(key); 108 | }else { 109 | const keys = Notification.__default.__observerMap.keys(); 110 | for(let key of keys) { 111 | const array = key.split(Notification.__default.__segmentKey); 112 | if (array.length === 2) { 113 | const hasCode = array[1]; 114 | if (hasCode === __notification_hashCode) { 115 | Notification.__default.__observerMap.delete(key); 116 | } 117 | } 118 | } 119 | } 120 | }else { 121 | console.log('[Notification] observer not add'); 122 | } 123 | }else { 124 | console.warn('[Notification] observer not null'); 125 | } 126 | }; 127 | 128 | 129 | /// 生成hashCode 130 | __makeHashCode = () => { 131 | let hashCode = ''; 132 | const keys = ['0', '1', '2', '3', '4', 133 | '5', '6', '7', '8', '9', 134 | 'a', 'b', 'c', 'd', 'e', 135 | 'f', 'g', 'h', 'i', 'j', 136 | 'k', 'l', 'm', 'n', 'o', 137 | 'p', 'q', 'r', 's', 't', 138 | 'u', 'v', 'w', 'x', 'y', 139 | 'z', 'A', 'B', 'C', 'D', 140 | 'E', 'F', 'G', 'H', 'I', 141 | 'J', 'K', 'L', 'M', 'N', 142 | 'O', 'P', 'Q', 'R', 'S', 143 | 'T', 'U', 'V', 'W', 'X', 144 | 'Y', 'Z']; 145 | const keysCount = keys.length; 146 | for(let i = 0; i < 8; i++) { 147 | const pos = Math.round(Math.random() * (keysCount - 1)); 148 | hashCode += keys[pos]; 149 | } 150 | if (this.__hashCodeSet.has(hashCode)) { 151 | return this.__makeHashCode(); 152 | } 153 | this.__hashCodeSet.add(hashCode); 154 | return hashCode; 155 | }; 156 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-whc-notification", 3 | "version": "1.1.1", 4 | "description": "A react、vue、react native module to post and observer notification, it works on iOS and Android H5.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/netyouli/react-whc-notification.git" 12 | }, 13 | "keywords": [ 14 | "react-native", 15 | "react-native-component", 16 | "react-native-notification", 17 | "react-native-whc-notification", 18 | "notification", 19 | "whc-notification", 20 | "notification-ios", 21 | "lnotification-android", 22 | "react-component", 23 | "redux", 24 | "Vuex", 25 | "ios", 26 | "android" 27 | ], 28 | "author": "wuhaichao", 29 | "license": "MIT", 30 | "bugs": { 31 | "url": "https://github.com/netyouli/react-whc-notification/issues" 32 | }, 33 | "peerDependencies": {}, 34 | "homepage": "https://github.com/netyouli/react-whc-notification#readme", 35 | "dependencies": {} 36 | } 37 | --------------------------------------------------------------------------------