微信小程序开发笔记 进阶篇③——onfire.js事件订阅和发布在微信小程序中的使用
2024-04-25 07:36:26
文章目录
- 一、前言
- 二、onfire.js介绍
- 三、API介绍
- 四、实例应用
- 五、onfire源码
- 六、实例源码
一、前言
微信小程序开发笔记——导读
二、onfire.js介绍
一个简单实用的事件订阅和发布的库。
onfire.js 的 github地址
三、API介绍
| 函数 | 说明 |
|---|---|
on(eventName, callback, context)
|
订阅eventName事件，当事件触发时，回调callback
|
one(eventName, callback, context)
|
订阅eventName事件，当事件触发时，只回调一次callback
|
fire(eventName)
|
异步触发eventName事件，将数据发送给回调函数
|
fireSync(eventName)
|
同步触发eventName事件，将数据发送给回调函数
|
un(event)
|
取消event事件订阅
|
clear()
|
取消所有事件订阅 |
四、实例应用
- 新建小程序项目
- 选择
JavaScript - 基础模板 - 导入
TDesign - 组件库 - 导入
utils/onfire.js - 编写实例应用代码
- 订阅事件1
- 异步触发，同步触发，都有回调
- 取消订阅事件1
- 触发之后无回调
- 单次订阅事件2
- 异步触发，有回调
- 再触发，无回调
- 订阅事件1
- 单次订阅事件2
- 取消所有订阅
- 怎么触发，都没有回调
五、onfire源码
onfire.js源码浅析请查阅：一个事件订阅和发布的库（onfire.js）的源码浅析
/**Copyright (c) 2016 hustcc http://www.atool.org/License: MIT https://github.com/hustcc/onfire.js
**/
/* jshint expr: true */
!function (root, factory) {if (typeof module === 'object' && module.exports)module.exports = factory();elseroot.onfire = factory();
}(typeof window !== 'undefined' ? window : this, function () {var __onfireEvents = {},__cnt = 0, // evnet counterstring_str = 'string',function_str = 'function',hasOwnKey = Function.call.bind(Object.hasOwnProperty),slice = Function.call.bind(Array.prototype.slice);function _bind(eventName, callback, is_one, context) {if (typeof eventName !== string_str || typeof callback !== function_str) {throw new Error('args: '+string_str+', '+function_str+'');}if (! hasOwnKey(__onfireEvents, eventName)) {__onfireEvents[eventName] = {};}__onfireEvents[eventName][++__cnt] = [callback, is_one, context];return [eventName, __cnt];}function _each(obj, callback) {for (var key in obj) {if (hasOwnKey(obj, key)) callback(key, obj[key]);}}/*** onfire.on( event, func, context ) -> Object* - event (String): The event name to subscribe / bind to* - func (Function): The function to call when a new event is published / triggered* Bind / subscribe the event name, and the callback function when event is triggered, will return an event Object**/function on(eventName, callback, context) {return _bind(eventName, callback, 0, context);}/*** onfire.one( event, func, context ) -> Object* - event (String): The event name to subscribe / bind to* - func (Function): The function to call when a new event is published / triggered* Bind / subscribe the event name, and the callback function when event is triggered only once(can be triggered for one time), will return an event Object**/function one(eventName, callback, context) {return _bind(eventName, callback, 1, context);}function _fire_func(eventName, args) {if (hasOwnKey(__onfireEvents, eventName)) {_each(__onfireEvents[eventName], function(key, item) {item[0].apply(item[2], args); // do the functionif (item[1]) delete __onfireEvents[eventName][key]; // when is one, delete it after triggle});}}/*** onfire.fire( event[, data1 [,data2] ... ] )* - event (String): The event name to publish* - data...: The data to pass to subscribers / callbacks* Async Publishes / fires the the event, passing the data to it's subscribers / callbacks**/function fire(eventName) {// fire eventsvar args = slice(arguments, 1);setTimeout(function () {_fire_func(eventName, args);});}/*** onfire.fireSync( event[, data1 [,data2] ... ] )* - event (String): The event name to publish* - data...: The data to pass to subscribers / callbacks* Sync Publishes / fires the the event, passing the data to it's subscribers / callbacks**/function fireSync(eventName) {_fire_func(eventName, slice(arguments, 1));}/*** onfire.un( event ) -> Boolean* - event (String / Object): The message to publish* When passed a event Object, removes a specific subscription.* When passed event name String, removes all subscriptions for that event name(hierarchy)** Unsubscribe / unbind an event or event object.** Examples** // Example 1 - unsubscribing with a event object* var event_object = onfire.on('my_event', myFunc);* onfire.un(event_object);** // Example 2 - unsubscribing with a event name string* onfire.un('my_event');**/function un(event) {var eventName, key, r = false, type = typeof event;if (type === string_str) {// cancel the event name if existif (hasOwnKey(__onfireEvents, event)) {delete __onfireEvents[event];return true;}return false;}else if (type === 'object') {eventName = event[0];key = event[1];if (hasOwnKey(__onfireEvents, eventName) && hasOwnKey(__onfireEvents[eventName], key)) {delete __onfireEvents[eventName][key];return true;}// can not find this event, return falsereturn false;}else if (type === function_str) {_each(__onfireEvents, function(key_1, item_1) {_each(item_1, function(key_2, item_2) {if (item_2[0] === event) {delete __onfireEvents[key_1][key_2];r = true;}});});return r;}return true;}/*** onfire.clear()* Clears all subscriptions**/function clear() {__onfireEvents = {};}return {on: on,one: one,un: un,fire: fire,fireSync: fireSync,clear: clear};
});
六、实例源码
onfire.js
import Message from 'tdesign-miniprogram/message/index';
var onfire = require("../../utils/onfire.js");Page({data: {},onEvent1Btn(e) {console.log("订阅事件1")onfire.on("event1",function (data) {console.log("事件1回调，数据=" + data)Message.info({offset: [20, 32],duration: 2000,icon: false,content: "事件1回调，数据=" + data,});})},unEvent1Btn(e) {console.log("取消订阅事件1")onfire.un("event1")},oneEvent2Btn(e) {console.log("单次订阅事件2")onfire.one("event2",function (data) {console.log("事件2回调，数据=" + data)})},unEvent2Btn(e) {console.log("取消订阅事件2")onfire.un("event2")},clearBtn(e) {console.log("取消所有订阅")onfire.clear()},fireEvent1Btn(e) {console.log("异步触发事件1(数据123)")onfire.fire("event1", 123)},fireSyncEvent1Btn(e) {console.log("同步触发事件1(数据456)")onfire.fire("event1", 456)},fireEvent2Btn(e) {console.log("异步触发事件2(数据789)")onfire.fire("event2", 789)},fireSyncEvent2Btn(e) {console.log("同步触发事件2(数据012)")onfire.fireSync("event2", "012")},
});
onfire.json
{"navigationBarTitleText": "onfire","navigationBarBackgroundColor": "#fff","usingComponents": {"t-button": "tdesign-miniprogram/button/button","t-demo": "../../components/demo-block/index"}
}
onfire.wxml
<view class="demo"><view class="demo-title">onfire.js </view><view class="demo-desc"> 一个简单实用的事件订阅和发布的库。 </view><t-demo title="订阅"><view class="box"><!-- <t-button theme="primary" block bindtap="">强按钮</t-button> --><t-button theme="primary" variant="plain" block bindtap="onEvent1Btn">订阅事件1</t-button><t-button theme="plain" variant="plain" block bindtap="unEvent1Btn">取消订阅事件1</t-button><t-button theme="primary" variant="plain" block bindtap="oneEvent2Btn">单次订阅事件2</t-button><t-button theme="plain" variant="plain" block bindtap="unEvent2Btn">取消订阅事件2</t-button><t-button variant="plain" block bindtap="clearBtn">取消所有订阅</t-button></view></t-demo><t-demo title="发布"><view class="box"><t-button theme="primary" block bindtap="fireEvent1Btn">异步触发事件1(数据123)</t-button><t-button theme="primary" variant="plain" block bindtap="fireSyncEvent1Btn">同步触发事件1(数据456)</t-button><t-button theme="primary" block bindtap="fireEvent2Btn">异步触发事件2(数据789)</t-button><t-button theme="primary" variant="plain" block bindtap="fireSyncEvent2Btn">同步触发事件2(数据012)</t-button></view></t-demo><t-message id="t-message" bind:actionBtnClick="clickMessageBtnHadnle" t-class="t-class-content" />
</view>
onfire.wxss
page {background: #fff;
}
.demo-block__oper {padding: 0 32rpx;
}
.button-group {margin-top: 32rpx;
}
.button-group .button-group-item {margin-bottom: 32rpx;
}.box {margin: 0 32rpx;
}.demo .t-button {margin-top: 32rpx;
}
.demo .full-width {background: rgba(0, 0, 0, 0.4);padding: 8px 0;margin-top: 16px;
}
.demo .full-width .t-button {margin-top: 0;
}
.demo .no-border {border: 0;
}
.demo .no-border-radius {border-radius: 0;
}
.demo .content-margin-right {margin-right: 32rpx;
}
.demo .box {margin: 0 32rpx;
}
.demo .align-bottom {display: flex;flex-direction: row;align-items: flex-end;
}
觉得好，就一键三连呗（点赞+收藏+关注）
微信小程序开发笔记 进阶篇③——onfire.js事件订阅和发布在微信小程序中的使用相关推荐
- 微信小程序开发笔记 进阶篇④——getPhoneNumber 获取用户手机号码（小程序云）
文章目录 一.前言 二.前端代码wxml 三.前端代码js 四.云函数 五.程序流程 一.前言 微信小程序开发笔记--导读 大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码. 但是,因 ...
- 微信小程序开发笔记 进阶篇⑤——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之前）
文章目录 一.前言 二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程 六.参考 一.前言 微信小程序开发笔记--导读 大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
- 微信小程序开发笔记 进阶篇⑥——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之后）
文章目录 一.前言 二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程 六.参考 一.前言 微信小程序开发笔记--导读 大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
- 微信小程序开发笔记 进阶篇②——多个微信小程序一个用户体系，同一个UnionID
目录 微信开放平台绑定小程序 微信小程序login和getUserInfo 后台请求auth.code2Session 后台解密开放数据 微信开放平台绑定小程序 微信官方文档:UnionID 机制说明 ...
- 微信小程序开发笔记 进阶篇④——基于iconfont快速实现icon图标显示
文章目录 一.iconfont素材网 二.iconfont项目设置 三.微信小程序项目配置 四.全部源码 一.iconfont素材网 进入iconfont素材网 挑选想要的素材,加入购物车 点击右上角 ...
- 微信小程序开发笔记 支付篇②——微信小程序通过小程序云实现微信支付功能
文章目录 一.前言 二.开通微信支付 2.1 关联商户号 2.2 添加商户号 2.3 管理员授权 三.云函数开发 3.1 新建云函数 3.2 云函数代码 3.3 云函数上传并部署 四.小程序调用 4. ...
- 微信小程序开发笔记 支付篇④——基于微信支付SDK实现Java后端接口使用
文章目录 一.前文 二.微信支付 Java SDK 三.示例 一.前文 微信小程序开发笔记--导读 微信支付-SDK与DEMO下载 先看README.md 二.微信支付 Java SDK 对微信支付开 ...
- 微信小程序开发笔记 基础篇②——微信小程序 手动查看和代码查看开发者ID（AppID）
文章目录 一.手动查看 二.代码查看 一.手动查看 微信小程序后台 开发管理-->开发设置-->开发者ID 二.代码查看 app.js onLaunch(opts) {const acco ...
- 微信小程序开发笔记 支付篇③——微信支付JSAPI下单和微信小程序调起支付（V2版本）
文章目录 一.前文 二.流程图 三.SpringBoot接口实现 2.1 微信调起支付所需数据 2.2 下单接口 2.3 支付回调接口 三.微信小程序实现 3.1 JSAP统一下单 3.2 小程序调起 ...
最新文章
- JAVA String format 方法使用介绍
- 欢迎来怼第二周Scrum会议六（总第十三次）
- 【Hibernate】getHibernateTemplate.find()和session.createQuery()方法总结
- oracle存储过程如何传递一个bean对象_java程序员如何在短期内抓住面试重点，成为大厂offer收割机...
- 怒肝三个月啃完这110道面试题，跳槽薪资翻倍
- 【操作系统】虚拟存储器(上)-思维导图 ：虚拟存储器概述、请求分页存储方式
- Zookeeper选举算法原理
- echarts常用术语
- jquery实现简单的滑动解锁
- Linux版Flash亮相，但64位版需时间
- 西门子定时器有几种_西门子定时器类型
- windows 7远程桌面和被远程连接电脑启动远程桌面服务
- 若依vue版菜单点不开 Error: Cannot find module ‘@/views/system/user/index‘
- 对小波变换中DWT和CWT的理解
- The operated node must be in the list returned by getNodeIDList
- 基于 Python 的全国空气质量监测与可视化分析平台
- 专访亚创集团CEO田行智：业务规模进入拐点 上市迎来好时机
- Win10台式电脑网线正常但连不上网。
- linux bazel 源码,ubuntu 18.04编译安装bazel
- 安卓移动软件开发：简易录音软件实现