使用钩子,解耦应用生命周期上触发的业务逻辑
/*
Pubsub.js
定义钩子基础
on监听
emit触发
off脱离监听
*/
function Pubsub(){
//存放事件和对应的处理方法
this.handles = {};
}
Pubsub.prototype={
//传入事件类型type和事件处理handle
on: function (type, handle) {
if(!this.handles[type]){
this.handles[type] = [];
}
this.handles[type].push(handle);
},
emit: function () {
//通过传入参数获取事件类型
let type = Array.prototype.shift.call(arguments);
if(!this.handles[type]){
return false;
}
for (let i = 0; i < this.handles[type].length; i++) {
let handle = this.handles[type][i];
//执行事件
handle.apply(this, arguments);
}
},
off: function (type, handle) {
handles = this.handles[type];
if(handles){
if(!handle){
handles.length = 0;//清空数组
}else{
for (let i = 0; i < handles.length; i++) {
let _handle = handles[i];
if(_handle === handle){
handles.splice(i,1);
}
}
}
}
},
/*
//数据格式处理
dataHandle: function (data) {
if(!data) { return }
Object.keys(data).forEach(item => {
// 性别格式化
if (item.indexOf('_sex') > -1 && data[item] !== null && data[item] !== undefined) {
if (data[item] === '0' || data[item] === 'female' || data[item] === 0) {
data[item] = '女'
} else if (data[item] === '1' || data[item] === 'male' || data[item] === 1) {
data[item] = '男'
}
}
})
return data
},*/
}
export default Pubsub
/* businessHook.js*/
import baseHook from "@/base"
const businessDataHook = new baseHook()
businessDataHook.on('selectPage', (data) => {
console.log('do something')
// dos something when emit the event 'selectPage'
})
export default peopleDataHook
/* businessPage.js */
import businessHook from "@/businessHook"
// 业务触发‘selectPage’将执行businessHook中的on selectPage。执行打印 :do something
businessHook.emit('selectPage', 'selectSomething')
如果要在小程序生命周期中,需要触发很多的不相干的业务逻辑,且多处要触发同样的事件,可用以上方式解耦。
目前我用的业务逻辑是,当用户登录/用户注册/小程序显示都需要往缓存更新数据,同时向用户行为手收集平台上传数据。