小程序不能通过js操作节点样式，只能给节点添加一个style="{{customStyle}}"达到效果

但是要给整个页面添加背景色，就需要自定义一个根节点，相应的就要给这个节点添加行内样式

由于每次添加根节点和对应样式比较麻烦，可以使用一个组件来完成

如果每次都是手动去更新每一个组件的样式比较麻烦，就需要使用订阅发布者模式

组件包含功能：

• 传入自定义class、
• 组件挂载节点时添加样式、
• 手动刷新样式（父组件使用selectComponent查找组件并调用刷新方法）
• 订阅样式变化通知
  这里在订阅通知的时候需要注意书写方式，否则会出现this丢失的情况，addUiConfigDep(this.setUiConfig.bind(this))
• 取消订阅样式变化通知

样式查询模块功能

查询样式时如果样式发送变化，给所有订阅者发布通知。

主要代码

发布订阅者

class dep {
  subs = new Set()

  addSub (sub) {
    if (!sub) return

    this.subs.add(sub)
  }

  deleteSub (sub) {
    // console.log('--deleteSub--', this.subs.has(sub))
    if (this.subs.has(sub)) {
      this.subs.delete(sub)
    }
  }

  notify () {
    wechat.nextTick().then(() => {
      // console.log('size=', this.subs.size)
      this.subs.forEach((sub) => {
        sub()
      })
    })
  }
}

创建全局实例

const uiConfigDep = new dep()

export const addUiConfigDep = (cb) => {
  uiConfigDep.addSub(cb)
}

export const deleteUiConfigDep = (cb) => {
  uiConfigDep.deleteSub(cb)
}

订阅（微信小程序组件）

  lifetimes: {
    attached () {
      this.constrator = this.setUiConfig.bind(this)
      addUiConfigDep(this.constrator)
    },
  },

取消订阅（微信小程序组件）

  lifetimes: {
    detached () {
      deleteUiConfigDep(this.constrator)
    },
  },