使用钩子,解耦应用生命周期上触发的业务逻辑
发布于 4 年前 作者 ping81 4664 次浏览 来自 分享
/* 
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(thisarguments);
      }
  },
  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')

如果要在小程序生命周期中,需要触发很多的不相干的业务逻辑,且多处要触发同样的事件,可用以上方式解耦。

目前我用的业务逻辑是,当用户登录/用户注册/小程序显示都需要往缓存更新数据,同时向用户行为手收集平台上传数据。

回到顶部