開發微信小程序，我爲何放棄 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，也歡迎你們關注個人公衆號【前端下午茶】，一塊兒加油吧~

另外能夠加入「前端下午茶交流羣」微信羣，長按識別下面二維碼便可加我好友，備註加羣，我拉你入羣～