小程序页面之间的通讯利器 - nsevent

Eric 发布于2019-08-23 14:36 / 2514人阅读

摘要：这个模块主要的原因是用在微信开发时候监听两个页面之间的状态交互比如和两个页面页面有收藏项也有同样的收藏项，监听同一个事件收藏事件改变刷新列表数据那么在页面操作收藏事件会触发自身页面回调，这时候就派上用场，在这样声明收藏事件改变刷新列表数据在

这个模块主要的原因是用在微信开发时候监听两个页面之间的状态交互

比如 pageA 和 pageB 两个页面, pageA 页面有收藏项 pageB 也有同样的收藏项，监听同一个事件

// 收藏事件改变
nsevent.on("collectChange", () => {
    // 刷新列表数据
})

那么在 pageA 页面操作 collect(收藏) 事件会触发自身页面 collectChange 回调，这时候nsevent就派上用场，

在 pageA 这样声明

// 收藏事件改变
nsevent.on("collectChange", () => {
    // 刷新列表数据
}, "pageA")

在 pageB 触发 pageA 的事件，就不会触发自身页面的回调了

// 触发collectChange事件
NSEvent.emit("collectChange", params, { ns: ["pageA"] });

还可以在 pageC 触发 pageA, pageB页面的 collectChange 事件

// 触发collectChange事件
NSEvent.emit("collectChange", params, { ns: ["pageA", "pageB"] });

nsevent document

有命名空间的事件监听器 - event emitter with namespace

安装和使用

npm i nsevent --save

const nsevent = require("nsevent");

// 浏览器

on(eventName, fn, namespace)

参数	必选	说明
eventName	是	监听事件名
fn	是	回调函数
namespace	否	命名空间

NSEvent.on("add", (a, b) => {
  console.log(a, b);
});

NSEvent.on("add", (a, b) => {
  console.log(a, b, "ns");
}, "ns");

// 1, 2
// 1, 2, "ns"
NSEvent.emit("add", a, b);

once(eventName, fn)

参数	必选	说明
eventName	是	监听事件名
fn	是	回调函数

NSEvent.once("add", (a, b) => {
  console.log(a, b);
});

NSEvent.emit("add", 1, 2);      // 1, 2
NSEvent.emit("add", 1, 2);      // nothing

emit(eventName, arg1, arg2, ..., object)

参数	必选	说明
eventName	是	监听事件名
arg[1,2,3...]	否	传递给回调函数的值
object	否	{ 最后一个传递对象，ns: ["ns"] } 可以指定命名空间触发事件

NSEvent.on("fire", () => {
  console.log("fire ns");
}, "ns");

NSEvent.on("fire", () => {
  console.log("fire ns2");
}, "ns");

NSEvent.on("fire", () => {
  console.log("fire");
});

NSEvent.emit("fire");     // fire ns, fire ns2, fire
console.log("======");
NSEvent.emit("fire", 1, 2, { ns: [] });     // nothing
NSEvent.emit("fire", 1, 2, { ns: ["ns"] }); // fire ns, fire ns2

off(eventName, [string|function|array])

参数	必选	说明
eventName	是	监听事件名
string	function	array	否	解绑回调函数
	string	指定命名空间解绑
	function	指定函数解绑
	array	通过数组指定命名空间或者函数解绑

const NSEvent = require("../dist/nsevent.cjs");

NSEvent.on("fire", () => {
  console.log("fire ns");
}, "ns");

NSEvent.on("fire", () => {
  console.log("fire ns");
}, "ns");

NSEvent.on("fire", () => {
  console.log("fire1");
}, "ns1");

NSEvent.emit("fire");   // fire ns, fire ns, fire1
console.log("==========");
NSEvent.off("fire", ["ns"]);
NSEvent.emit("fire");   // fire1
console.log("==========");
NSEvent.off("fire", "ns1");
NSEvent.emit("fire");   // none

云服务器 GPU云服务器内部服务器之间的通讯小程序即时通讯微信内h5页面打开小程序两个服务器之间通讯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100862.html

自制微信小程序通讯JS

摘要：自制微信小程序通讯起因现在微信小程序开发基本会使用到组件的开发。随着组件的不断增加，使得组件之间的通讯越发频繁。这个能使得我们在组件和页面之间随意通讯，您只需要按照规范注册，使用即可，可以帮你建立任意两个组件之间的通信通道。自制微信小程序通讯JS 起因现在微信小程序开发基本会使用到组件的开发。随着组件的不断增加，使得组件之间的通讯越发频繁。然后，微信小程序中组件之前通讯必须通过父子...

keke 2019-08-23 13:40 评论0 收藏0
小程序不同页面之间通讯的解决方案

摘要：小程序做开发的时候难免需要不同页面之间的通讯，比如首页打开新的页面搜索获取结果返回到首页，不同页面之间的数据交互等等。小程序做开发的时候难免需要不同页面之间的通讯，比如首页打开新的页面搜索获取结果返回到首页，不同tab页面之间的数据交互等等。于是做了以下总结当前页面打开新的页面打开新的页面可以通过 navigator 组件来实现，通过url传参来实现，例如搜索在新的页面 on...

Kerr1Gan 2019-08-26 13:25 评论0 收藏0
❤️❤️入行软件测试坑！！！软件测试人常用的软件测试工具软件推荐❤️❤️

软件测试工具大揭秘前言软件测试常用软件GitPycharmBCompareTyporaXMindNavicatSublime TextPostmanFiddlerCharlesXshellXftpJmeter 前言现如今，技术发展十分迅猛，开发者只有通过不断的学习才能跟得上时代的步伐。而为了便于学习和工作（减少996），涌现了很多优秀的开发工具用以帮助开发者提高工作效率。现在我把我工...

frank_fun 2021-09-28 09:35 评论0 收藏0