有命名空間的事件監聽器nsevent的詳細介紹（程式碼範例）

本篇文章帶給大家的內容是關於有命名空間的事件監聽器nsevent的詳細介紹（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

這個模組主要的原因是用在微信開發時候監聽兩個頁面之間的狀態交互

比如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');

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

#on(eventName, fn, namespace)

eventName#fnnamespace

參數	#必須	#說明
是	監聽事件名稱
是	回呼函數

否

#命名空間

#

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是emit(eventName, arg1, arg2, ..., object)說明是否

回呼函數		NSEvent.once('add', (a, b) => {   console.log(a, b); }); NSEvent.emit('add', 1, 2);      // 1, 2 NSEvent.emit('add', 1, 2);      // nothing
	參數	必選
		eventName
監聽事件名稱		arg[1,2,3...]

#傳遞給回呼函數的值

#object否#參數必選#eventNamefunctionarray 否指定命名空間解綁 指定函數解綁

{ 最後一個傳遞對象，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])
說明
	#監聽事件名稱
#string			解綁回呼函數
#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

######

以上是有命名空間的事件監聽器nsevent的詳細介紹（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！