原因

在上一篇《微信小程序实现数据侦听器,类似vue的watch,替代Observer》中,我们实现的watch功能,但使用起来还是有点麻烦。能不能像Vue那样直接写个watch属性呢?当然可以,这就是写这一片博客的目的。我们要实现以下几个目标:

  1. 支持侦听对象的变化,侦听对象的子属性的变化,支持立即执行
  2. 少量几行代码即可引入,不修改之前代码结构,不需要每个页面都引入
  3. 使用方式和vue的watch一样
  4. 页面销毁时可以注销watch,减少开销

在组件和Page中实现

微信小程序实现watch功能,有如下四个关键点:

  1. 侦听子属性变化时,watch的key类似于'a.b.c.d',需要解析这个key,在下面的parseKey函数中实现。
  2. watch功能要在组件的attached生命周期和page的onLoad生命周期中实现。一个原因是要获取this,另一个原因是在Component初始化时,有data和properties两个可以定义数据的地方。而在created生命周期中,会将properties中的属性复制到data中。所以我们在created的下一阶段,attached只用侦听data中的属性变化,而不用侦听data和properties两个对象的属性变化,减少实现复杂度。
  3. watch的原理是使用Object.defineProperty的set方法来侦听值的变化。
  4. 销毁watch的方案,可以用临时变量先保存这个属性的值,删除这个属性,再重新赋值。

新建一个watch.js文件,内容如下:

function initComponent() {
  let oldComponent = Component
  Component = function(obj) {
    let oldAttached = obj.attached || function() {}
    let oldDetached = obj.detached || function() {}
    // 在attached中初始化watch
    obj.attached = function() {
      obj.watch && initWatch.call(this, obj.watch)
      oldAttached.call(this, ...arguments)
    }
    // 在detached中注销watch
	obj.detached = function() {
      obj.watch && unWatch.call(this, obj.watch)
      oldDetached.call(this, ...arguments)
    }
    return oldComponent(obj)
  }
}
function initPage() {
  let oldPage = Page
  Page = function(obj) {
    let oldOnLoad = obj.onLoad || function() {}
    let oldOnUnload = obj.onUnload || function() {}
	// 在onLoad中初始化watch
    obj.onLoad = function() {
      obj.watch && initWatch.call(this, obj.watch)
      oldOnLoad.call(this, ...arguments)
    }
	// 在onUnload中注销watch
	obj.onUnload = function() {
      obj.watch && unWatch.call(this, obj.watch)
      oldOnUnload.call(this, ...arguments)
    }
    return oldPage(obj)
  }
}
function initWatch(watch) {
  let that = this
  // 如果obj有watch这个属性,遍历watch对象
  for (let key in watch) {
    //临时对象,tmpObj由三部分组成,obj,key,value;obj={key:value}
    let tmpObj = parsePath.call(this, key)
    // 如果watch的key在data或者properties中有定义,就监控它的变化
    if (tmpObj && tmpObj.key) {
      // 暂存数据,用于get
      let tmpData = tmpObj.value
      // watch的回调
      let cb = watch[key]
      let immediate = false
      if (typeof cb === 'object') { // watch: {xxx: {immediate: true, handler: function(){}}}
        immediate = cb.immediate
        cb = cb.handler
      }
      // 如果immediate为true,先执行一次侦听变化的方法
      if (immediate) {
        cb.call(that, tmpData)
      }
      // 配置watch
      Object.defineProperty(tmpObj.obj, tmpObj.key, {
        set: function(newVal) {
          //保存旧值,供watch侦听器用
          let oldVal = tmpData
          //修改当前值,也就是this.data.xxx的值改变,会调用下面的get方法即时取到
          tmpData = newVal
          // 数据变化时,再执行一次方法
          if (oldVal !== newVal) {
            cb.call(that, newVal, oldVal)
          }
        },
        get: function() {
          return tmpData
        }
      })
    }
  }
}

function unWatch(watch) {
  for (let key in watch) {
    let tmpObj = parsePath.call(this, key)
	// 删除这个属性,再重新赋值,则可以注销watch
    if (tmpObj && tmpObj.key) {
      let tmp = tmpObj.obj[tmpObj.key]
      delete tmpObj.obj[tmpObj.key]
      tmpObj.obj[tmpObj.key] = tmp
    }
  }
}
// 解析watch的key,可以解析对象的子属性'user.address.city'这样
function parsePath(key) {
  let parent = that.data
  let obj = that.data
  let segments = key.split('.')
  for (var i = 0; i < segments.length; i++) {
    if (obj.hasOwnProperty(segments[i]) === false) {
      return null
    }
    parent = obj
    obj = obj[segments[i]]
  }
  return {
    obj: parent, //defineProperty的第一个参数
    key: segments[i - 1], //defineProperty的第二个参数
    value: obj //值
  }
}

以上,主要关键代码都已经添加注释。

引入

一句话引入,在app.js中引入watch.js

import './utils/watch.js'

使用方式

使用方式和Vue一样,三种watch使用方式的示例代码如下:

Page({
  data: {
    patient: null,
    patientList: null
  },
  onLoad: function(options) {
    app.formRequest('/chronic/selectPatientList').then(res => {
      this.setData({
        patientList: res.body.list
      })
    })
  },
  watch:{
    //watch对象
    patientList: function(val) {
      console.log('patientList变化了')
      console.log(val)
    },
    //watch对象,立即执行
    patient: {
      immediate: true,
      handler: function(val){
        console.log('patient变化了')
        console.log(val)
      }
    },
    //watch对象的子属性
    'patient.patientId': function(val) {
      console.log('patientId变化了')
      console.log(val)
    },
  }
})

总结

这篇,我们在小程序的Page和Component中实现了watch功能,且实现了开头的四个目标。