微信小程序之设计模式

一、观察者模式

代表对象间的一对多的依赖。需要自动更新数据的地方就有它的存在。

1.1 相关类图

图片仅供参考

观察者模式提供了一种对象设计，让主题和观察者之间松耦合。主题不需要知道观察者具体类是什么，做了什么或者其他细节。

1.2 观察者的定义

/**
 * 观察者
 */
class Observer {
  constructor() {

  }

  /**
   * 具体实现在各自的子类中进行
   * @param {*} data 需要更新的数据
   */
  update(data) {

  }

}
module.exports = Observer

1.3 主题的定义

/**
 * 主题，通知观察者去更新数据
 */
class Subject {
  constructor() {
    this.mList = new Set();
    this.mData = null;
  }

  addObserver(Observer) {
    this.mList.add(Observer);
  }

  removeObserver(Observer) {
    this.mList.delete(Observer);
  }

  removeAllObservers() {
    this.mList.clear();
  }

  notifyAll() {
    const list = this.mList;
    list.forEach((observer) => {
      observer.update(this.mData);
    });
  }

  setData(data) {
    this.mData = data;
  }
}

module.exports = Subject

1.4 页面使用示例

1.4.1 创建Observer

在需要使用的页面中创建HomeObserver 实例。

class HomeObserver extends Observer {
  constructor(page) {
    super();
    this.mPage = page;
  }

  update(data) {
	// 根据需求更新页面的数据
  }
}

module.exports = HomeObserver

1.4.2 创建Subject

import Subject from '../../../moudles/patterns/observer/Subject'

let BLE_SUBJECT = null;

class BleSubject extends Subject {
  constructor() {}

  static getInstance() {
    if (BLE_SUBJECT == null) {
      BLE_SUBJECT = new BleSubject();
    }
    return BLE_SUBJECT;
  }
}
module.exports = BleSubject

1.4.3 添加Observer

import HomeObserver from './data/HomeObserver'
import Subject from './data/BleSubject'
let mHomeObserver;
let mSubject;

Page({
  data: {

  },
  onLoaded() {
    
    mHomeObserver = new HomeObserver(this);
    mSubject = Subject.getInstance();
    mSubject.addObserver(mHomeObserver);
  }
)

在需要的地方调用mSubject.notifyAll()，页面就会自动更新数据了。

希望对你们有所帮助，之后还会继续写其他设计模式。