From 8a1078b4687a8c3355dbb0b34a14e2d405992f2b Mon Sep 17 00:00:00 2001
From: hustcc <i@hust.cc>
Date: Thu, 3 Jan 2019 20:51:24 +0800
Subject: [PATCH] add documents

---
 README.md                                  | 19 +++++--
 README_zh.md                               | 58 ++++++++++++++++++++++
 doc/cross-component-communication-react.md | 58 ++++++++++++++++++++++
 3 files changed, 131 insertions(+), 4 deletions(-)
 create mode 100644 README_zh.md
 create mode 100644 doc/cross-component-communication-react.md

diff --git a/README.md b/README.md
index fcd173f..2154745 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,9 @@
 [![npm](https://img.shields.io/npm/v/onfire.js.svg)](https://www.npmjs.com/package/onfire.js)
 
 
+[中文文档](./README_zh.md) | [English Doc](./README.md)
+
+
 ## Install
 
 > npm i --save onfire.js
@@ -35,10 +38,18 @@ ee.off('click');
 Simple and similar with `event-emitter`.
 
 
- - **on(eventName: string, callback: Function)**: listen an event.
- - **once(eventName: string, callback: Function)**: listen a event only once.
- - **fire(eventName: string, ...parameters: any[])**: emit / trigger an event with parameters.
- - **off(eventName?: string, callback?: Function)**: unsubscribe an event.
+ - `on(eventName: string, callback: Function)`: listen an event.
+ - `once(eventName: string, callback: Function)`: listen a event only once.
+ - `fire(eventName: string, ...parameters: any[])`: emit / trigger an event with parameters.
+ - `off(eventName?: string, callback?: Function)`: unsubscribe an event.
+
+
+
+## Used
+
+ - Events subscribe and dispatcher.
+ - `Cross-component communication` for React / Vue / Angular.
+ - System event mechanism.
 
 
 
diff --git a/README_zh.md b/README_zh.md
new file mode 100644
index 0000000..5445f3e
--- /dev/null
+++ b/README_zh.md
@@ -0,0 +1,58 @@
+# onfire.js
+
+> 一个迷你版（~ 500b）的事件订阅和发布的库，简单实用。
+
+[![Build Status](https://travis-ci.org/hustcc/onfire.js.svg?branch=master)](https://travis-ci.org/hustcc/onfire.js)
+[![npm](https://img.shields.io/npm/v/onfire.js.svg)](https://www.npmjs.com/package/onfire.js)
+
+
+[中文文档](./README_zh.md) | [English Doc](./README.md)
+
+
+## 安装
+
+> npm i --save onfire.js
+
+
+
+## 使用
+
+```js
+import EE from 'onfire.js';
+
+const ee = new EE();
+
+ee.on('mouseover', () => {});
+
+ee.once('click', () => {});
+
+ee.fire('click', 1, 'hello', true);
+
+ee.off('click');
+```
+
+
+
+## API 文档
+
+非常简单，类似于 `event-emitter`。
+
+
+ - `on(eventName: string, callback: Function)`：监听一个事件，触发后，执行指定的方法。
+ - `once(eventName: string, callback: Function)`：仅监听一个事件一次，，触发后，执行指定的方法。
+ - `fire(eventName: string, ...parameters: any[])`：触发一个指定的事件，并发送对应的数据。
+ - `off(eventName?: string, callback?: Function)`：取消监听一个事件及方法，如果 callback 为空，则取消事件的所有方法；如果都为空，则取消所有事件监听。
+
+
+
+## 使用场景
+
+ - 事件订阅和发布的场景。
+ - 在 React、Vue、Angular 中进行`跨组件通信`。
+ - 系统的自定义事件机制。
+ - 应用：[如何进行跨组件通信 —— React 实例](./doc/cross-component-communication-react.md)
+
+
+## License
+
+MIT@[hustcc](https://github.com/hustcc).
diff --git a/doc/cross-component-communication-react.md b/doc/cross-component-communication-react.md
new file mode 100644
index 0000000..318a0df
--- /dev/null
+++ b/doc/cross-component-communication-react.md
@@ -0,0 +1,58 @@
+# 如何进行跨组件通信
+
+> 分步骤介绍如何在 React 中使用 onfire.js 事件的方式去进行跨组件通信。
+
+举个场景例子：页面顶部的搜索框（Search）根据下面加载的内容（Content）页面不同，显示不同的默认内容。也就是 Content 组件需要发送数据给 Search 组件。
+
+
+ - 安装
+ 
+> npm i --save onfire.js
+
+
+ - 公共模块创建事件
+
+例如，在整个系统的公共模块中创建一个 onfire 实例，用于数据通信。比如 `common.js` 中：
+
+```js
+import OnFire from 'onfire.js';
+// 创建 onFire 事件实例
+const onFire = new OnFire();
+
+// 导出，给 Search、Content 组件使用
+export default onFire;
+```
+
+ - Search 组件中监听事件
+ 
+我们定义事件名称为：`keywordEventName`，然后在 Search 组件中监听事件，代码如下：
+
+```js
+import onFire from './common.js';
+
+// 组件加载之后，监听事件
+function onLoad() {
+  onFire.on('keywordEventName', function(keyword) {
+    // 设置搜索框默认的搜索关键字
+    setDefaultKeyword(keyword);
+  });
+}
+```
+
+ - Content 组件发送数据
+ 
+```js
+import onFire from './common.js';
+
+// 组件加载之后，发送数据
+function onLoad() {
+  onFire.fire('keywordEventName', 'Content 页面的关键字');
+}
+```
+
+> 完成之后，效果就是，在 Content 组件加载之后，会将 `'Content 页面的关键字'` 发送到 Search 组件中。切换不同的内容，可以实现发送不同的数据。
+
+
+----
+
+以上伪代码，并不一定在 React 才能使用，在 Vue、Angular，甚至小程序上，原理都是一样的，通过事件的监听和发布机制，事件数据的通信。