Introduction détaillée de l'écouteur d'événements d'espace de noms nsevent (exemple de code)

Cet article vous apporte une introduction détaillée (exemple de code) sur l'écouteur d'événement d'espace de noms nsevent. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

La raison principale de ce module est de surveiller l'interaction de statut entre deux pages pendant le développement de WeChat

Par exemple, pageA et pageB, la pageA a des favoris et la pageB a le même élément de favoris, écoutez. au même événement

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

Ensuite, l'exploitation de l'événement collect sur la pageA déclenchera le rappel collectChange de sa propre page. À ce moment-là, nsevent est utile,

le déclare ainsi sur la pageA.

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

Le déclenchement de l'événement de la pageA sur la pageB ne déclenchera pas le rappel de sa propre page

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

Vous pouvez également déclencher l'événement collectChange de la pageA et de la pageB sur la pageC

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

document nsevent

Émetteur d'événements avec espace de noms

Installation et utilisation

npm i nsevent --save

const nsevent = require('nsevent');

// 浏览器
<script src="dist/nsevent.umd.js"></script>

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);

une fois(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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!