在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設計模式...