小程式 資料代理

微信開發工具匯入專案

  新建專案 -> 匯入src檔案 -> 預覽效果

程式碼

proxy.js

  const nativePage = Page
  const nativeComponent = Component
  Page = (options, key = 'onLoad') => {
    const native = options[key]
    options[key] = function () {
      this.ctx = proxy.call(this)
      return native && native.call(this
 
)
    }
    key === 'onLoad' ? nativePage(options) : nativeComponent(options)
  }
  Component = options => Page(options, 'created')

  function proxy() {
    let pending = false
    const setData = () => {
      pending = true
      setTimeout(() => {
        this.setData(this.data, () => pending = false
 
)
      })
    }

    const handler = {
      get(target, key, receiver) {
        try {
          if (typeof target[key] === 'function') return Reflect.get(target, key, receiver)
          return new Proxy(target[key], handler)
        } catch (err) {
          return Reflect.get(target, key, receiver)
        }
      },
      set(target, key, value, receiver) {
        if
 
 (!(Array.isArray(target) && key !== 'length')) !pending && setData()
        return Reflect.set(target, key, value, receiver)
      },
      deleteProperty(target, key) {
        !pending && setData()
        return Reflect.deleteProperty(target, key)
      }
    }
    return new Proxy(this.data, handler)
  }

  require('./vendor/proxy.js')

在 index 頁面中的 index.js 中使用

  onLoad: function () {
    this.ctx.motto = 'Hello Echo'
    this.ctx.user.name = 'Echo'
  }

在 movable 元件中的 movable.js 中使用

  created: function () {
    this.ctx.visible = true
  }

原理說明

• 攔截資料變化，呼叫 this.setData 方法
• 多條資料變化，合併一次更新
• 代理物件繫結到 this.ctx 上下文中，同步更新 this.data 資料

連結地址