js 事件發布訂閱銷毀

2022-08-24 19:54:09 字數 954 閱讀 1517

在vue中 通過$on訂閱事件,通過$emit觸發事件以此可用來事件跨元件傳值等功能,但是有個弊端就是通過這種方式訂閱的事件可能會觸發多次。

特別是通過$on訂閱的事件中如果有http請求,將會造成觸發一次會發出很多同樣的http請求,造成資源浪費。

因此 對事件機制做出一下改造,保證同乙個事件觸發一次,訂閱的事件只執行一次

**如下:

class event;

on(eventtype,handleobj);

}this.handlers[eventtype][handleobj.name] =handleobj.fun;

return

this

; }

emit(...data);

}else

事件`)

}return

this

; }

off(...data) );

return

this

; }

}export

default

new event();

event.js

在vue專案中的使用:

首先在min.js中引入event.js

然後賦給vue.prototype

具體操作如下:

import e from './utils/event'

vue.prototype.e = e;

在元件中使用:

1/**

2* 訂閱事件3*/

4this.e.on('hahaha',

9});

10this.e.on('hahaha',

17});

18/**19

* 觸發

20*/

21this.e.emit('hahaha', 1, 2, 3)

JavaScript事件發布 訂閱

1 發布 訂閱模式也是諸多設計模式當中的一種 2 這種方式可以在es5下相當優雅地處理非同步操作 3 什麼是發布 訂閱呢?我們舉個栗子 假設fn1,fn2,fn3都可以視作乙個事件的發布者,執行它,就會發布乙個事件。這個時候,我們可以通過乙個事件的訂閱者去批量訂閱並處理這些事件,包括它們的先後順序。...

訂閱發布模式 事件

實現訂閱發布模式的基本思路 訂閱者把自己想訂閱的事件註冊到排程中心,所以第一步應該先實現訂閱者到排程中心的方法。訂閱方法 排程中心統一排程訂閱者註冊到排程中心的處理 發布方法 訂閱者取消訂閱事件 取消訂閱方法 直接附上 var pubsub one function evt,fn,ctx off f...

js發布訂閱模式

再開始之前先簡單介紹下訂閱 發布模式,因為這種設計模式在vue 中起到比較關鍵的作用。首先,簡單來說訂閱 發布模式是一種定義一對多依賴關係的設計模式,當乙個物件狀態發生變化時候,所依賴於他的所有物件都將得到通知。舉個簡單例子 很多學生到書店買書,a同學定了一本 js高程 b同學定了一本 js設計模式...