什么是 pubsub?

PubSubJS 是 一个利用 JAVAScript 进行发布/订阅式通信的库。

gitHub：https://github.com/mroderick/PubSubJS

 

 

主要特征

• 无依赖
• 同步解耦
• 与ES3兼容。PubSubJS应该能够在任何可以执行JavaScript的地方运行。浏览器，服务器，电子书阅读器，旧手机，游戏机。
• AMD / CommonJS模块支持
• 不修改订阅者（jQuery自定义事件修改订阅者）
• 易于理解和使用（由于同步解耦）
• 小（ish），少于1kb，已压缩并压缩

 

下载引入

通过CDN方式：

• http://www.jsdelivr.com/#!pubsubjs
• https://cdnjs.com/libraries/pubsub-js
• https://unpkg.com/pubsub-js

<script src="https://unpkg.com/pubsub-js"></script><script>console.log(PubSub)</script>

 

npm：

npm install pubsub-js

yarn：

yarn add pubsub-js

import PubSub from 'pubsub-js'// orconst PubSub = require('pubsub-js')

 

基本例子

通过PubSub变量的 publish(id, data) 方法发布，并且传递需要交流的信息。

id：发布的消息ID 为pubsub-js提供辨识，唯一性，不可重复

data: 发布消息传递的参数，如果要传递多个参数，请传递对象类型

 

发布完消息之后，就可以开始订阅了

通过 PubSub.subscribe(id, callback(message, data){}) 订阅消息

id：对应之前 publish的 id

callback: 回调函数，第一个参数为 id , 第二个参数为 publish(id, data) 中 data 传递的参数

 

在 react 中简单使用

实现一个父组件中包含两个兄弟组件，它们分别是 search 搜索组件，以及根据 search 组件搜索结果的不同 ，Result 组件进行不同的响应。

父组件：

    render () {        return (            <div className="App">                <Search />                <Result />            </div>          )    }

Search组件

import React, { Component }from 'react'import PubSub from 'pubsub-js'export default class Search extends Component {    handleSearch () {        const searchName = this.input.value.trim()        // 发布 search、传递用户在搜索框中输入的结果        PubSub.publish('search', searchName)     }    render () {        return (           <div>                <input type="text" name="search" ref={input => this.input = input} />                <button onClick={this.handleSearch.bind(this)}>搜索</button>           </div>        )    }}

 

 

Result 组件

import React, { Component }from 'react'import PubSub from 'pubsub-js'export default class Search extends Component {    state = { searchName: null }       componentDidMount () {        // 订阅 search 消息， 并根据输入结果进行不同处理        PubSub.subscribe('search', (msg, data) => {            console.log('msg：', msg)            console.log('data：', data)            this.setState({ searchName: data })        })    }    render () {        return (        <div>{this.state.searchName}</div>        )    }}

 

 

 

 

 

总结

PubSubJS 可以让我们很轻松的处理不同组件之间的通信，同时不足 1k 的体积也不同对项目造成什么负担。

不只是React, PubSubJS也适用于 Vue 等其它框架项目。

官方文档传送门：https://github.com/mroderick/PubSubJS

源码传送门：https://unpkg.com/pubsub-js@1.7.0/src/pubsub.js