npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

iny-bus

v2.0.0

Published

<h3 align="center" style="margin: 30px 0 35px;">iny bus 事件中心</h3>

Downloads

42

Readme

介绍

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

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

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

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

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

那么,有别的解决办法吗

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

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

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

使用

使用内置方法


  // App、Page、Component 使用方法一致
  import bus from 'iny-bus'

  // bus.app bus.page bus.component
  const page = bus.page({
    busEvents: {
      // 简单使用
      postMessage(msg) {
        this.setData({
          msg
        })
      },
      // 一次性事件
      postMessageOnce: {
        handler (msg) {
          this.setData({
            msg
          })
        },
        once: true
      }
    },
    onLoad() {
      bus.emit('postMessage', 'hello bus')
      bus.emit('postMessageOnce', 'hello bus once')
    }
  })

  Page(page)

在生命周期中使用


  // 小程序
  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)
  }
  
  // 清空所有事件监听
  onClear () {
    bus.clear()
  }
 
  1. 是否可以在 Vue 中使用呢

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

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

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

LICENSE

MIT