1. Event.js
var Event = (function() {
var clientList = {};
var triList = {};
var listen;
var trigger;
var remove;
listen = function(key, fn) {
if (!clientList[key]) {
clientList[key] = [];
}
clientList[key].push(fn);
if (triList[key] && triList[key].length) {
fn.apply(this, triList[key]);
}
};
trigger = function() {
var arg = arguments;
var key = Array.prototype.shift.call(arg);
var fns = clientList[key];
triList[key] = Array.prototype.slice.call(arg);
if (!fns || fns.length === 0) {
return false;
}
for (var i = 0; i < fns.length; i++) {
fns[i].apply(this, arguments);
}
};
remove = function(key, fn) {
var fns = clientList[key];
if (!fns) {
return false;
}
if (!fn) {
fns && (fns.length = 0);
} else {
for (var l = fns.length - 1; l >= 0; l--) {
var _fn = fns[l];
if (_fn === fn) {
fns.splice(l, 1);
}
}
}
};
return {
listen,
trigger,
remove
};
}());
export { Event };
2.使用
import { Event } from '@/utils/Event';
export default {
created() {
Event.trigger('getUserInfo', {name: '張三'}, true, 100);
Event.listen('getUserInfo', this.getUserInfo);
},
destroyed() {
Event.remove('getUserInfo', this.getUserInfo);
},
methods: {
getUserInfo(res) {
// 釋出出來的資訊會傳遞到這裡
console.log(res);
// 列印: {name: "張三"}
}
}
};
當然也能直接這樣用,(但是這種方式的使用會導緻改監聽,建議使用第一種)
Event.listen('getUserInfo', res=>{
console.log(res);
});
同時也支援多參數的傳遞:
Event.trigger('getUserInfo', { name: '張三' }, true, 100);
Event.listen('getUserInfo', (res, boo, num) => {
console.log(res);
console.log(boo);
console.log(num);
});
// 多參數依舊能傳遞到這裡
getUserInfo(res, boo, num) {
console.log(res);
console.log(boo);
console.log(num);
}