小程序技能进阶回忆录 - 自主实现数据侦听器和计算器

告诉元首我已尽力，告诉父亲我仍然爱他！

熟悉 Vue 的同窗对 computed 和 watch 必定很熟悉，这些特性大大方便了咱们对代码中的数据进行处理：

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
复制代码

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})
复制代码

这是 Vue 官网中两段代码。

官方实现

现在小程序也有了本身的实现，详见官方文档 observer 。小程序官方 github 中也开源了经过 Behaviors 实现的 Vue 风格的computed和watch：github.com/wechat-mini…。

那么在微信没有提供这些方法以前，如何自主实现数据的侦听器和计算属性呢？

自主实现

先看看定义的使用文档：

Page({
 data: {
   list: [],
   list2: [],
   size: 0
 },
 // 侦听器函数名必须跟须要被侦听的 data 对象中的属性同名，
 // 其参数中的 newValue 为属性改变后的新值，oldValue 为改变前的旧值
 watch: {
   // 若是 `list` 发生改变，这个函数就会运行
   list(newValue, oldValue) {
     console.log(oldValue + '=>' + newValue)
   }
 },
 // 传入的参数list必须是 data 里面的属性
 // 这里能够传入多个 data 属性
 computed({
   list,
   list2
 }) {
   return {
     size: list.length,
     size2: list2.length
   }
 }
})
复制代码

在 Page 的传参中多了两个熟悉的属性，用法不用解释太多。须要继续对小程序提供的 Page 方法进行改造，此外，由于全部数据变化都会用到 setData 方法去触发，因此还须要改造这个方法。

改造 Page 和 setData

想要基于原有的 setData 进行封装，那就得先获得这个函数缓存下来（像是缓存原有的 Page 同样）。想到 onLoad 是小程序页面的第一个生命周期函数，能够在这里进行操做：

// 缓存原有的 `Page`
let originPage = Page

// 定义新的 Page
function MyPage(config) {
  let that = this
  this.watch = config.watch
  this.computed = config.computed
  this.lifetimeBackup = {
    onLoad: config.onLoad
  }
  config.onLoad = function(options) {
    // 缓存下原有的 `setData`
    this._setData = this.setData.bind(this)
    this.setData = (data) => {
      // 侦听器
      that.watching(data)
      // 计算器
      let newData = that.getComputedData(data)
      this._setData(extend(data, newData))
    }
    // 备份下页面实例
    that.context = this
    // 执行真正的 `onLoad`
    this.lifetimeBackup.onLoad.call(this, options)
  }
  
  // ...

  originPage(config)
}

MyPage.prototype.watching = funtion(data) {
  // 执行侦听器
  // ...
}

// 计算器
MyPage.prototype.getComputedData = function(data) {
  // 开始生成新的数据
  // ...
}

function page (config) {
  return new MyPage(config)
}
复制代码

大体代码如上，从新定义了 this.setData，备份了原有的 setData 到 this._setData。固然，这里只考虑了 setData 传一个参数的状况，多个参数须要再对代码优化下。

注意：调用 watching 和 createNewData 的对象是 that，由于 this 指向小程序页面实例，没有自定的这个方法。

作完上述改造，后续的 watch 和 computed 就简单多了。

侦听器 watch

MyPage.prototype.watching = function(data) {
  var context = this.context
  var oldData = context.data
  // 开始生成新的数据
  var watch = this.watch
  if (watch) {
    Object.keys(watch).forEach(function (k) {
      // 若是新的 data 中属性被侦听，执行侦听函数
      if (k in data) {
        var newValue = data[k]
        var oldValue = oldData[k]
        watch[k].apply(context, [
          newValue,
          oldValue
        ])
      }
    })
  }
}
复制代码

简易的侦听器就写好了，经过 setData 触发自定的 watch 中的侦听函数。

计算器 computed

MyPage.prototype.getComputedData = function(data) {
  var context = this.context
  var computed = this.computed
  var computedData
  if (computed) {
    computedData = computed.call(context, data)
  }
  return computedData
}
复制代码

这样就获得了计算后的新生成的数据：computedData。

总结

不断的经过备份、代理微信原有的方法，自主实现了简单的侦听器和计算器。固然这些代码只是为了方便分享提取出来了提供思路，实际业务中遇到状况复杂的多，代码量远远也不止这些。

传送门

• 小程序技能进阶回忆录 - 也许你并不须要小程序框架
• 小程序技能进阶回忆录 - 在缺乏组件化的日子里
• 小程序技能进阶回忆录 - 如何自主实现数据侦听器和计算器
• 小程序技能进阶回忆录 - 如何自主实现拦截器（待发布）
• 小程序技能进阶回忆录 - globalData 的那些事儿（待发布）
• 小程序技能进阶回忆录 - 何时执行 onLoad（待发布）
• 小程序技能进阶回忆录 - 加强型的 wx.navigateBack（待发布）

广告时间

美团单车事业部（摩拜单车）诚招前端 / 小程序研发工程师，位置北京，有兴趣能够发简历到 zhangshibing@mobike.com 或者扫二维码先加微信勾搭：）