@miapp/emitter

1.0.1 • Public • Published

emitter

事件触发器

使用

直接使用

import Emitter from '@miapp/emitter';
const emitter = new Emitter();

// 绑定事件
emitter.on('select', callback); // 字符串
emitter.on(['select', 'confirm'], callback); // 数组
emitter.on({ // 对象
  'select': selectCallback, 
  'confirm': confirmCallback
});

// 单次绑定,API 同 on
emitter.once('select', callback);

// 触发事件
emitter.emit('select', { value });

// 解除绑定
emitter.off('select', callback); // 解除单个
emitter.off('select'); // 解除整个类型
emitter.off(); // 解除所有

// 销毁
emitter.destroy();

应用/页面/组件内使用

推荐用 mixinEmitter,见下文

import Emitter from "@miapp/emitter";

// component.js
Component({
  didMount() {
    this.emitter = new Emitter(this);
    this.emitter.on('select', (e) => {
      console.log(e.src);
    });
  },
  didUnmout() {
    this.emitter.destroy();
  },
  methods: {
    handleTap(e) {
      this.emit('select', {
        src: 'component'
      });
    }
  }
});

// page.js
Page({
  onLoad() {
    this.emitter = new Emitter(this);
  },
  onUnload() {
    this.emitter.destroy();
  }
});

// app.js
App({
  onLaunch() {
    this.emitter = new Emitter(this);
  }
});

温馨提示:

  • 建议命名为 this.emitter,内部会有一些相关处理逻辑
  • 为了保证通信功能,记得初始化时传入 this
  • 页面/组件销毁时记得执行 destroy 方法

mixEmitter

为了解决以上几个问题,更方便的使用方式是,直接扩充应用/页面/组件的方法

import { mixinEmitter } from "@miapp/emitter";

Component(mixinEmitter({
  didMount() {
    this.on('select', () => {});
  },
  methods: {
    handleTap(e) {
      this.emit('select', {
        src: 'component'
      });
    }
  }
}));

// page.js
Page(mixinEmitter({
  onLoad() {
    this.on('select', () => {});
  }
}));

// app.js
App(mixinEmitter({
  onLaunch() {
    this.on('select', () => {});
  }
}));

通信功能

冒泡

冒泡至页面

// component.js
// component => page
this.emit('selected|page', {
  src: 'component'
});

// page.js
this.on('selected', (e) => {
  console.log(e.src); // component
});

同时冒泡到页面和应用

// component.js
// component => page => app
this.emit('selected|app', {
  src: 'component'
});

// page.js
this.on('selected', (e) => {
  console.log(e.src); // component
});

// app.js
this.on('selected', (e) => {
  console.log(e.src); // component
});

捕获

如果组件想捕获页面或者全局应用发出的事件

// app.js
this.emit('selected', {
  src: 'app'
});

// page.js
this.emit('selected', {
  src: 'page'
});

// component.js
// 监听 page 的 selected 事件
this.on('selected|page', (e) => {
  console.log(e.src); // page
});
// 监听 app 的 selected 事件
this.on('selected|app', (e) => {
  console.log(e.src); // app
});

组件之间通信

利用页面事件作为中转

// a => page => b

// a.js
this.emit('a:selected|page', {
  src: 'a'
});

// b.js
this.on('a:selected|page', (a) => {
  console.log(e.src); // a
});

事件命名

prefix:event|broadcast

  • event: 事件名称
  • prefix: 自定义组件前缀,用于区分来源,默认为空
  • broadcast: 监听从页面或者应用触发的事件,或者触发事件传播至页面或应用,只有两个值,pageapp,默认为空

开发

  1. yarn 或者 ayarn阿里内网)安装依赖
  2. 小程序 IDE 打开组件(下载地址

更多命令

  • miapp newbranch: 新建分支
  • miapp push: 提交代码
  • miapp prepub: 预发(发布 beta 版本)
  • miapp publish: 正式发布

Readme

Keywords

none

Package Sidebar

Install

npm i @miapp/emitter

Weekly Downloads

2

Version

1.0.1

License

none

Unpacked Size

14.6 kB

Total Files

7

Last publish

Collaborators

  • lamo
  • kingback
  • kehanshi
  • f-loat
  • azure_jyx
  • jackieyoho
  • shaoyouqing