Introduction détaillée de l'écouteur d'événements d'espace de noms nsevent (exemple de code)-js tutoriel-php.cn

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

不言

Libérer： 2019-01-10 10:04:27

avant

2776 Les gens l'ont consulté

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', () => {
    // 刷新列表数据
})

Copier après la connexion

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

Copier après la connexion

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'] });

Copier après la connexion

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'] });

Copier après la connexion

document nsevent

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

Installation et utilisation

npm i nsevent --save

Copier après la connexion

const nsevent = require('nsevent');

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!