Options
All
  • Public
  • Public/Protected
  • All
Menu

iny bus 事件中心

npm version Coverage Status Build Status downloads downloads JS Gzip Size

如果对你有帮助或者有任何收获、点个 赞,给个星星,鼓励一下作者😄

介绍

在各种小程序中,我们经常会遇到 这种情况

有一个 列表,点击列表中的一项进入详情,详情有个按钮,删除了这一项,这个时候当用户返回到列表页时,发现列表中的这一项依然存在, 这种情况,就是一个 bug

那我们怎么解决这个问题呢

有的人会将所有请求放到 生命周期 onShow 中,只要我们页面显示,就会重新请求,诚然,这也是解决问题的一个办法

但是,所有请求放置于 onShow 中,就会造成服务器压力,多余的请求,用户体验不好的问题

那么,有别的解决办法吗

有,有的同学说,我可以用 getCurrentPages 获取页面栈,然后找到对应的 页面实例,调用实例方法,去刷新数据

这也是解决问题的一个办法,然而,当你需要刷新两个页面呢,三个页面呢,是不是要处理很多

iny-bus 就是一个非常好的解决方法,请求放置于 onLoad,数据随时随地刷新,便于控制,代码量极小,经过业务考验

只要是能运行 js 的地方,iny-bus 就支持

功能

  • 100% 测试用例覆盖
  • 兼容各大平台小程序
  • 支持 TS
  • 文档地址

安装

方式一. 通过 npm 安装

小程序已经支持使用 npm 安装第三方包,详见 npm 支持

# npm
npm i iny-bus -save

# yarn
yarn add iny-bus --production

方式二. 下载代码

直接通过 git 下载 iny-bus 源代码,并将dist目录 中的 index.js 拷贝到自己的项目中

git clone https://github.com/landluck/iny-bus.git

基本使用方法

  1. 在小程序中使用

  // 小程序
  import bus from 'iny-bus'

  // 添加事件监听
  // 在 onLoad 中注册, 避免在 onShow 中使用
  onLoad () {
    this.eventId = bus.on('事件名', (a, b, c, d) => {
      // 支持多参数
      console.log(a, b, c, d)

      this.setData({
        a,
        b,
        c
      }
    })
  }

  // 移除事件监听,该函数有两个参数,第二个事件id不传,会移除整个事件监听,传入ID,会移除该页面的事件监听,避免多余资源浪费, 在添加事件监听后,页面卸载(onUnload)时建议移除
  onUnload () {
    bus.remove('事件名', this.eventId)
  }

  // 派发事件,触发事件监听处更新视图
  // 支持多参传递
  onClick () {
    bus.emit('事件名', a, b, c)
  }
  1. 是否可以在 Vue 中使用呢

    可以,当 Vue 的项目使用 keep-alive 后,页面数据会被缓存,生命周期函数不会执行,虽然有 activited 生命周期供我们使用,但是它每次都会执行,我们只需要想让它刷新的时候刷新, 是可以使用的,当让,Vue 中也有解决方案,比如说,Vuexevent bus 事件总线,总的来说,用在各大平台的原生小程序更为合适

  2. 有没有必要在 tarouni-app 中使用呢

    没必要,因为各大跨段框架内部都实现了事件机制,大家可以使用框架内部提供的,我们这里只建议在 原生小程序中使用

LICENSE

MIT

Index

Enumerations

Classes

Interfaces

Type aliases

Variables

Functions

Type aliases

EventType

EventType: 1 | 2

Variables

Const bus

bus: EventBusInstance = createInstance()

Functions

createInstance

createUid

  • createUid(): string
  • 创建唯一id

    Returns string

Legend

  • Module
  • Object literal
  • Variable
  • Function
  • Function with type parameter
  • Index signature
  • Type alias
  • Enumeration
  • Enumeration member
  • Property
  • Method
  • Interface
  • Interface with type parameter
  • Constructor
  • Property
  • Method
  • Index signature
  • Class
  • Class with type parameter
  • Constructor
  • Property
  • Method
  • Accessor
  • Index signature
  • Inherited constructor
  • Inherited property
  • Inherited method
  • Inherited accessor
  • Protected property
  • Protected method
  • Protected accessor
  • Private property
  • Private method
  • Private accessor
  • Static property
  • Static method

Generated using TypeDoc