js单例模式实现与页面之间的监听通知

前言：

在写项目的时候遇到的问题。需求都开发完了，想要优化性能，有与多个页面都有地图并且每个页面加载的时候都会重新初始化地图，非常耗费性能，所以就想把地图抽到一个js里统一管理，放到html最外层，哪个页面要用就放到哪个页面，整个程序地图就初始化一次地图。

遇到的问题是地图的方法每次拖动地图的时候都会调用onRegionChange方法来获取移动后的位置缩放大小等信息，需要每次移动地图之后通知到用到地图的页面。

正题：

首先先在创建单例

class MapCommon {

    constructor(uid) {
      this.callBackList={},
      this.uid=uid;
    }
    //创建单例
    static getInstance(uid) {
        if (!this.instance) {
            this.instance = new MapCommon(uid);
        }else if(uid){
            this.instance.uid=uid
        }
        return this.instance;
    }
    
}
复制代码

这一步先在这个页面的this上挂上回调函数的对象和调用它的页面的uid之后注册单例。

之后在外边写一个onRegionChange的回调：

class onRegionChangeCallBack {
    onRegionChange(e){
  }
}
复制代码

再之后写一个能调用回调的方法，在要需要的地方调用他：

_mapMoveEnd(e) {
    let mapThis = MapCommon.getInstance().getMap();
     MapCommon.getInstance().addCallBack({
         type: 'end',
         zoom:  mapThis.getZoom(),
         latitude: center.lat,
         longitude: center.lng,
     })
}
addCallBack(e){
    this.callBackList[this.uid]?this.callBackList[this.uid].onRegionChange(e):''
}
复制代码

在方法的最后把这两个方法暴露出去：

export {onRegionChangeCallBack,MapCommon}
复制代码

这样方法就算写好了，只后就是接受回调了,首先在要调用他的页面引入和注册：

import  {onRegionChangeCallBack,MapCommon} from '../../common/mapCommon/mapCommon.js';

export class mapChangeCallBack extends onRegionChangeCallBack {
  constructor(delegate) {
    super();
    this._delegate = delegate;
  }

  onRegionChange(e) {
    this._delegate.onRegionChange(e);
  }
}
复制代码

之后在这个页面的初始化方法里注册单例：

mounted() {
    let callBack = new mapChangeCallBack(this);
    MapCommon.getInstance().addObserverActionCallback(this.uid,callBack);
  }
复制代码

最后在这个页面里写一个onRegionChange方法就可以调用他了。 因为这里继承了mapCommon里的onRegionChangeCallBack方法所以在地图方法里调用onRegionChange，就可以通知到调用他的页面了。

转载于:https://juejin.im/post/5c9d96a4f265da61173a499b