终极蛇皮上帝视角之微信小程序之告别 setData

时间  2019-11-07
标签 终极 蛇皮 视角 微信 程序 告别 setdata 繁體版
原文   原文链接

众所周知 Vue 是借助 ES5 的 Object.defineProperty 方法设置 getter、setter 达到数据驱动界面，固然其中还有模板编译等等其余过程。javascript

而小程序官方的 api 是在 Page 中调用 this.setData 方法来改变数据，从而改变界面。html

那么假如咱们将二者结合一下，将 this.setData 封装起来，岂不是能够像开发 Vue 应用同样地使用 this.foo = 'hello' 来开发小程序了？前端

  • 更进一步地，能够实现 h5 和小程序 js 部分代码的同构
  • 更进一步地，增长模板编译和解析就能够连 wxml/html 部分也同构
  • 更进一步地，兼容 RN/Weex/快应用
  • 更进一步地，世界大同，天下为公，前端工程师所有失业...23333

否定三连.jpg

0.源码地址

1.绑定简单属性

第一步咱们先定一个小目标：挣他一个亿！！！java

对于简单非嵌套属性（非对象，数组），直接对其赋值就能改变界面。git

<!-- index.wxml -->
<view>msg: {{ msg }}</view>
<button bindtap="tapMsg">change msg</button>
// index.js
TuaPage({
    data () {
        return {
            msg: 'hello world',
        }
    },
    methods: {
        tapMsg () {
            this.msg = this.reverseStr(this.msg)
        },
        reverseStr (str) {
            return str.split('').reverse().join('')
        },
    },
})

这一步很简单啦，直接对于 data 中的每一个属性都绑定下 getter、setter，在 setter 中调用下 this.setData 就好啦。github

/**
 * 将 source 上的属性代理到 target 上
 * @param {Object} source 被代理对象
 * @param {Object} target 被代理目标
 */
const proxyData = (source, target) => {
    Object.keys(source).forEach((key) => {
        Object.defineProperty(
            target,
            key,
            Object.getOwnPropertyDescriptor(source, key)
        )
    })
}

/**
 * 遍历观察 vm.data 中的全部属性，并将其直接挂到 vm 上
 * @param {Page|Component} vm Page 或 Component 实例
 */
const bindData = (vm) => {
    const defineReactive = (obj, key, val) => {
        Object.defineProperty(obj, key, {
            enumerable: true,
            configurable: true,
            get () { return val },
            set (newVal) {
                if (newVal === val) return

                val = newVal
                vm.setData($data)
            },
        })
    }

    /**
     * 观察对象
     * @param {any} obj 待观察对象
     * @return {any} 已被观察的对象
     */
    const observe = (obj) => {
        const observedObj = Object.create(null)

        Object.keys(obj).forEach((key) => {
            // 过滤 __wxWebviewId__ 等内部属性
            if (/^__.*__$/.test(key)) return

            defineReactive(
                observedObj,
                key,
                obj[key]
            )
        })

        return observedObj
    }

    const $data = observe(vm.data)

    vm.$data = $data
    proxyData($data, vm)
}

/**
 * 适配 Vue 风格代码，使其支持在小程序中运行（告别不方便的 setData）
 * @param {Object} args Page 参数
 */
export const TuaPage = (args = {}) => {
    const {
        data: rawData = {},
        methods = {},
        ...rest
    } = args

    const data = typeof rawData === 'function'
        ? rawData()
        : rawData

    Page({
        ...rest,
        ...methods,
        data,
        onLoad (...options) {
            bindData(this)

            rest.onLoad && rest.onLoad.apply(this, options)
        },
    })
}

2.绑定嵌套对象

那么若是数据是嵌套的对象咋办咧？

其实也很简单，我们递归观察一下就好。web

<!-- index.wxml -->
<view>a.b: {{ a.b }}</view>
<button bindtap="tapAB">change a.b</button>
// index.js
TuaPage({
    data () {
        return {
            a: { b: 'this is b' },
        }
    },
    methods: {
        tapAB () {
            this.a.b = this.reverseStr(this.a.b)
        },
        reverseStr (str) {
            return str.split('').reverse().join('')
        },
    },
})

observe -> observeDeep：在 observeDeep 中判断是对象就递归观察下去。编程

// ...

/**
 * 递归观察对象
 * @param {any} obj 待观察对象
 * @return {any} 已被观察的对象
 */
const observeDeep = (obj) => {
    if (typeof obj === 'object') {
        const observedObj = Object.create(null)

        Object.keys(obj).forEach((key) => {
            if (/^__.*__$/.test(key)) return

            defineReactive(
                observedObj,
                key,
                // -> 注意在这里递归
                observeDeep(obj[key]),
            )
        })

        return observedObj
    }

    // 简单属性直接返回
    return obj
}

// ...

3.劫持数组方法

你们都知道，Vue 劫持了一些数组方法。我们也来依葫芦画瓢地实现一下~小程序

/**
 * 劫持数组的方法
 * @param {Array} arr 原始数组
 * @return {Array} observedArray 被劫持方法后的数组
 */
const observeArray = (arr) => {
    const observedArray = arr.map(observeDeep)

    ;[
        'pop',
        'push',
        'sort',
        'shift',
        'splice',
        'unshift',
        'reverse',
    ].forEach((method) => {
        const original = observedArray[method]

        observedArray[method] = function (...args) {
            const result = original.apply(this, args)
            vm.setData($data)

            return result
        }
    })

    return observedArray
}
其实，Vue 还作了个优化，若是当前环境有 __proto__ 属性，那么就把以上方法直接加到数组的原型链上，而不是对每一个数组数据的方法进行修改。

4.实现 computed 功能

computed 功能平常还蛮经常使用的，经过已有的 data 元数据，派生出一些方便的新数据。segmentfault

要实现的话，由于 computed 中的数据都定义成函数，因此其实直接将其设置为 getter 就行啦。

/**
 * 将 computed 中定义的新属性挂到 vm 上
 * @param {Page|Component} vm Page 或 Component 实例
 * @param {Object} computed 计算属性对象
 */
const bindComputed = (vm, computed) => {
    const $computed = Object.create(null)

    Object.keys(computed).forEach((key) => {
        Object.defineProperty($computed, key, {
            enumerable: true,
            configurable: true,
            get: computed[key].bind(vm),
            set () {},
        })
    })

    proxyData($computed, vm)

    // 挂到 $data 上，这样在 data 中数据变化时能够一块儿被 setData
    proxyData($computed, vm.$data)

    // 初始化
    vm.setData($computed)
}

5.实现 watch 功能

接下来又是一个炒鸡好用的 watch 功能，即监听 data 或 computed 中的数据，在其变化的时候调用回调函数，并传入 newVal 和 oldVal。

const defineReactive = (obj, key, val) => {
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get () { return val },
        set (newVal) {
            if (newVal === val) return

            // 这里保存 oldVal
            const oldVal = val
            val = newVal
            vm.setData($data)

            // 实现 watch data 属性
            const watchFn = watch[key]
            if (typeof watchFn === 'function') {
                watchFn.call(vm, newVal, oldVal)
            }
        },
    })
}

const bindComputed = (vm, computed, watch) => {
    const $computed = Object.create(null)

    Object.keys(computed).forEach((key) => {
        // 这里保存 oldVal
        let oldVal = computed[key].call(vm)

        Object.defineProperty($computed, key, {
            enumerable: true,
            configurable: true,
            get () {
                const newVal = computed[key].call(vm)

                // 实现 watch computed 属性
                const watchFn = watch[key]
                if (typeof watchFn === 'function' && newVal !== oldVal) {
                    watchFn.call(vm, newVal, oldVal)
                }

                // 重置 oldVal
                oldVal = newVal

                return newVal
            },
            set () {},
        })
    })

    // ...
}

看似不错，实则否则。

我们如今碰到了一个问题：如何监听相似 'a.b' 这样的嵌套数据？

这个问题的缘由在于咱们在递归遍历数据的时候没有记录下路径。

6.记录路径

解决这个问题并不难，其实咱们只要在递归观察的每一步中传递 key 便可，注意对于数组中的嵌套元素传递的是 [${index}]。

而且一旦咱们知道了数据的路径，还能够进一步提升 setData 的性能。

由于咱们能够精细地调用 vm.setData({ [prefix]: newVal }) 修改其中的部分数据，而不是将整个 $data 都 setData。

const defineReactive = (obj, key, val, path) => {
    Object.defineProperty(obj, key, {
        // ...
        set (newVal) {
            // ...

            vm.setData({
                // 由于不知道依赖因此更新整个 computed
                ...vm.$computed,
                // 直接修改目标数据
                [path]: newVal,
            })

            // 经过路径来找 watch 目标
            const watchFn = watch[path]
            if (typeof watchFn === 'function') {
                watchFn.call(vm, newVal, oldVal)
            }
        },
    })
}

const observeArray = (arr, path) => {
    const observedArray = arr.map(
        // 注意这里的路径拼接
        (item, idx) => observeDeep(item, `${path}[${idx}]`)
    )

    ;[
        'pop',
        'push',
        'sort',
        'shift',
        'splice',
        'unshift',
        'reverse',
    ].forEach((method) => {
        const original = observedArray[method]

        observedArray[method] = function (...args) {
            const result = original.apply(this, args)

            vm.setData({
                // 由于不知道依赖因此更新整个 computed
                ...vm.$computed,
                // 直接修改目标数据
                [path]: observedArray,
            })

            return result
        }
    })

    return observedArray
}

const observeDeep = (obj, prefix = '') => {
    if (Array.isArray(obj)) {
        return observeArray(obj, prefix)
    }

    if (typeof obj === 'object') {
        const observedObj = Object.create(null)

        Object.keys(obj).forEach((key) => {
            if (/^__.*__$/.test(key)) return

            const path = prefix === ''
                ? key
                : `${prefix}.${key}`

            defineReactive(
                observedObj,
                key,
                observeDeep(obj[key], path),
                path,
            )
        })

        return observedObj
    }

    return obj
}

/**
 * 将 computed 中定义的新属性挂到 vm 上
 * @param {Page|Component} vm Page 或 Component 实例
 * @param {Object} computed 计算属性对象
 * @param {Object} watch 侦听器对象
 */
const bindComputed = (vm, computed, watch) => {
    // ...

    proxyData($computed, vm)

    // 挂在 vm 上，在 data 变化时从新 setData
    vm.$computed = $computed

    // 初始化
    vm.setData($computed)
}

7.异步 setData

目前的代码还有个问题：每次对于 data 某个数据的修改都会触发 setData，那么假如反复地修改同一个数据，就会频繁地触发 setData。而且每一次修改数据都会触发 watch 的监听...

而这偏偏是使用小程序 setData api 的大忌：

总结一下就是这三种常见的 setData 操做错误：

  1. 频繁的去 setData
  2. 每次 setData 都传递大量新数据
  3. 后台态页面进行 setData

计将安出？

改代码.png

答案就是缓存一下，异步执行 setData~

let newState = null

/**
 * 异步 setData 提升性能
 */
const asyncSetData = ({
    vm,
    newData,
    watchFn,
    prefix,
    oldVal,
}) => {
    newState = {
        ...newState,
        ...newData,
    }

    // TODO: Promise -> MutationObserve -> setTimeout
    Promise.resolve().then(() => {
        if (!newState) return

        vm.setData({
            // 由于不知道依赖因此更新整个 computed
            ...vm.$computed,
            ...newState,
        })

        if (typeof watchFn === 'function') {
            watchFn.call(vm, newState[prefix], oldVal)
        }

        newState = null
    })
}

在 Vue 中由于兼容性问题，优先选择使用 Promise.then，其次是 MutationObserve，最后才是 setTimeout。

由于 Promise.then 和 MutationObserve 属于 microtask，而 setTimeout 属于 task。

为啥要用 microtask ？

根据 HTML Standard，在每一个 task 运行完之后，UI 都会重渲染，那么在 microtask 中就完成数据更新，当前 task 结束就能够获得最新的 UI 了。反之若是新建一个 task 来作数据更新，那么渲染就会进行两次。（固然，浏览器实现有很多不一致的地方）

有兴趣的话推荐看下这篇文章：Tasks, microtasks, queues and schedules

8.代码重构

以前的代码为了方便地获取 vm 和 watch，在 bindData 函数中又定义了三个函数，整个代码耦合度过高了，函数依赖很不明确。

// 代码耦合度过高
const bindData = (vm, watch) => {
    const defineReactive = () => {}
    const observeArray = () => {}
    const observeDeep = () => {}
    // ...
}

这样在下一步编写单元测试的时候很麻烦。

为了写测试让我们来重构一把，利用学习过的函数式编程中的高阶函数把依赖注入。

// 高阶函数，传递 vm 和 watch 而后获得 asyncSetData
const getAsyncSetData = (vm, watch) => ({ ... }) => { ... }

// 从 bindData 中移出来
// 原来放在里面就是为了获取 vm，而后调用 vm.setData
// 以及经过 watch 获取监听函数
const defineReactive = ({
    // ...
    asyncSetData, // 不传 vm 改为传递 asyncSetData
}) => { ... }

// 同理
const observeArray = ({
    // ...
    asyncSetData, // 同理
}) => { ... }

// 一样外移，由于依赖已注入了 asyncSetData
const getObserveDeep = (asyncSetData) => { ... }

// 函数外移后代码逻辑更加清晰精简
const bindData = (vm, observeDeep) => {
    const $data = observeDeep(vm.data)
    vm.$data = $data
    proxyData($data, vm)
}

高阶函数是否是很腻害！代码瞬间就在没事的时候，在想的时候，到一个地方，不相同的地方，到这个地方，来了吧！能够瞧一瞧，不同的地方，不相同的地方，改变了不少不少

不少不少

那么接下来你必定会偷偷地问本身，这么腻害的技术要去哪里学呢？

那么在哪里才能买获得呢

9.依赖收集

其实以上代码还有一个目前解决不了的问题：咱们不知道 computed 里定义的函数的依赖是什么。因此在 data 数据更新的时候咱们只好所有再算一遍。

也就是说当 data 中的某个数据更新的时候，咱们并不知道它会影响哪一个 computed 中的属性，特别的还有 computed 依赖于 computed 的状况。

计将安出？

且听下回分解~溜了溜了，嘿嘿嘿...

塘主.gif

以上 to be continued...

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程