关于前端:开发微信小程序我为什么放弃-setData使用-upData

鉴于在下应用微信小程序开发时应用 setData 的糟糕体验，开发了个库函数 wx-updata，我的项目上线之后，我把这个自用的库函数整顿放到 Github 上开源进去 wx-updata，这个库函数在开发的时候对我很有帮忙，心愿也能够帮到大家 ????

如果大家在应用中遇到了问题，能够给我提 pr，提 issue，一起来改善小程序开发体验加油～

1. wx-updata 版本 0.0.10
2. Github 地址：https://github.com/SHERlocked…
3. 小程序代码片段预览地址：https://developers.weixin.qq….
4. 小程序代码片段代码地址：https://github.com/SHERlocked…

1. setData 不不便的中央

你在应用 setData 的时候，是不是有时候感觉很好受，举个简略的例子：

// 你的 data
data: {
    name: '蜡笔小新',
    info: {height: 140, color: '黄色'}
}

如果要批改 info.height 为 155，应用 setData 要怎么做呢：

// 这样会把 info 里其余属性整不见了
this.setData({info: { height: 155} })

// 你须要取出 info 对象，批改后整个 setData
const {info} = this.data
info.height = 155
this.setData({info})

仿佛并不太简单，但如果 data 是个很大的对象，要把比拟深且不同的对象、数组项挨个扭转：

data: {
    name: '蜡笔小新',
    info: {
        height: 140, color: '黄色',
        desc: [{age: 8}, '最喜爱大象之歌', '靓仔', {dog: '小白', color: '红色'}]
    }
}

比方某个需要，须要把 info.height 改为 155，同时扭转 info.desc 数组的第 0 项的 age 为 12，第 3 项的 color 为灰色呢？

// 先取出要扭转的对象，扭转数字后 setData 回去
const {info} = this.data
info.height = 155
info.desc[0].age = 12
info.desc[3].color = '灰色'
this.setData({info})

// 或者像某些文章里介绍的，这样可读性差，也不太实用
this.setData({
    'info.height': 155,
    'info.desc[0].age': 12,
    'info.desc[3].color': '灰色'
})

下面这两种办法，是咱们平时小程序里常常用的，和其余 Web 端的框架相比，就很糟糕，一种浓浓的半成品感扑面而来，有没有这样一个办法：

this.upData({
    info: {
        height: 155,
        desc: [{age: 12}, , , {color: '灰色'}]
    }
})

这个办法会帮咱们深度扭转嵌套对象里对应的属性值，跳过数组项里不想扭转的，只设置咱们提供了的属性值、数组项，岂不是省略了一大堆糟糕的代码，而且可读性也极佳呢。

这就是为什么我在上线的我的项目中应用 wx-updata，而不是 setData

2. wx-updata 的长处

1. 反对 setData 对象主动合并，不必写糟糕的对象门路了 ????
2. 反对对象中嵌套数组，数组中嵌套对象；
3. 如果数组的某个值你不心愿笼罩，请应用数组空位来跳过这个数组项，比方 [1,,3] 这个数组两头就是数组空位；
4. 如果数组空位你的 Eslint 报错，能够应用 wx-updata 提供的 Empty 来代替：[1, Empty, 3]

3. wx-updata 装置

你也能够间接把 dist 目录下的 wx-updata.js 拷贝到我的项目里应用

应用 npm、yarn 装置形式：

$ npm i -S wx-updata
# or
$ yarn add wx-updata

而后：

1. 把微信开发者工具面板右侧的 详情 - 本地设置 - 应用 npm 模块 按钮关上；
2. 点击微信开发者工具面板工具栏的 工具 - 构建 npm；

构建后胜利生成 miniprogram_npm 文件夹就能够失常应用了

4. wx-updata 应用办法

应用形式一

能够应用间接挂载到 Page 上的形式，这样就能够在 Page 实例中像应用 setData 一样应用 upData 了

// app.js
import {updataInit} from './miniprogram_npm/wx-updata/index'  // 你的库文件门路

App({onLaunch() {Page = updataInit(Page, { debug: true})
    }
})

// 页面代码中

this.upData({info: { height: 155},
    desc: [{age: 13}, '帅哥'],
    family: [, , [, , , { color: '灰色'}]]
})

应用形式二

有的框架可能在 Page 对象上进行了进一步批改，间接替换 Page 的形式可能就不太好了，wx-updata 同样裸露了工具办法，用户能够在页面代码中间接应用工具办法进行解决：

// 页面代码中

import {objToPath} from './miniprogram_npm/wx-updata/index'  // 你的库文件门路

Page({data: { a: { b: 2}, c: [3,4,5]},

    // 本人封装一下
    upData(data) {return this.setData(objToPath(data))
    },

    // 你的办法中或生命周期函数
    yourMethod() {this.upData({ a: { b: 7}, c: [8,,9]})
    }
})

应用 Empty 代替数组空位

能够应用 wx-updata 提供的 Empty 来代替数组空位，因为 Empty 实质上是一个 Symbol，所以只能应用 wx-updata 导出的，而不能自己新建。

// 页面代码中
import {Empty} from './miniprogram_npm/wx-updata/index'

this.upData({info: { height: 155},
    desc: [{age: 13}, '帅哥'],
    family: [Empty, Empty, [Empty, Empty, Empty, { color: '灰色'}]]
})

5. wx-updata 相干 API

Page.prototype.upData(Object data, Function callback)

1. data：你心愿设置的 data
2. callback：跟 setData) 第二个参数一样，引起界面更新渲染结束后的回调函数

updataInit(Page, config)

1. Page：页面对象，须要在 app.js 中调用；
2. config：若提供配置参数 {debug: true}，会将门路化后的 data 打印进去，帮忙用户进行调试；

objToPath(Object data)

1. data：你心愿设置的 data 对象

网上的帖子大多深浅不一，甚至有些前后矛盾，在下的文章都是学习过程中的总结，如果发现错误，欢送留言指出~

参考文档：

1. 小程序开发实用技巧——扩大 Page 页面对象 – 掘金

PS：自己博客地址 Github – SHERlocked93/blog，也欢送大家关注我的公众号【前端下午茶】，一起加油吧~

另外能够退出「前端下午茶交换群」微信群，长按辨认上面二维码即可加我好友，备注 加群，我拉你入群～