本文轉(zhuǎn)載自微信公眾號(hào)「前端下午茶」，作者SHERlocked93 。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端下午茶公眾號(hào)。 

鑒于在下使用微信小程序開(kāi)發(fā)時(shí)使用 setData 的蹩腳體驗(yàn)，開(kāi)發(fā)了個(gè)庫(kù)函數(shù) wx-updata，項(xiàng)目上線之后，我把這個(gè)自用的庫(kù)函數(shù)整理放到 Github 上開(kāi)源出來(lái) wx-updata，這個(gè)庫(kù)函數(shù)在開(kāi)發(fā)的時(shí)候?qū)ξ液苡袔椭Ｍ部梢詭偷酱蠹???

[[334701]]

如果大家在使用中遇到了問(wèn)題，可以給我提 pr，提 issue，一起來(lái)改善小程序開(kāi)發(fā)體驗(yàn)加油～

• wx-updata 版本 0.0.10
• Github 地址：https://github.com/SHERlocked93/wx-updata
• 小程序代碼片段預(yù)覽地址：https://developers.weixin.qq.com/s/CcXdO1mc73jD
• 小程序代碼片段代碼地址：https://github.com/SHERlocked93/wx-updata-demo

1. setData 不方便的地方

你在使用 setData 的時(shí)候，是不是有時(shí)候覺(jué)得很難受，舉個(gè)簡(jiǎn)單的例子：

// 你的 data 
data: { 
    name: '蠟筆小新', 
    info: { height: 140, color: '黃色' } 
} 

如果要修改 info.height 為 155，使用 setData 要怎么做呢：

// 這樣會(huì)把 info 里其他屬性整不見(jiàn)了 
this.setData({ info: { height: 155 } }) 
 
// 你需要取出 info 對(duì)象，修改后整個(gè) setData 
const { info } = this.data 
info.height = 155 
this.setData({ info }) 

似乎并不太復(fù)雜，但如果 data 是個(gè)很大的對(duì)象，要把比較深且不同的對(duì)象、數(shù)組項(xiàng)挨個(gè)改變：

data: { 
    name: '蠟筆小新', 
    info: { 
        height: 140, color: '黃色', 
        desc: [{ age: 8 }, '最喜歡大象之歌', '靚仔', { dog: '小白', color: '白色' }] 
    } 
} 

比如某個(gè)需求，需要把 info.height 改為 155，同時(shí)改變 info.desc 數(shù)組的第 0 項(xiàng)的 age 為 12，第 3 項(xiàng)的 color 為灰色呢?

// 先取出要改變的對(duì)象，改變數(shù)字后 setData 回去 
const { info } = this.data 
info.height = 155 
info.desc[0].age = 12 
info.desc[3].color = '灰色' 
this.setData({ info }) 
 
// 或者像某些文章里介紹的，這樣可讀性差，也不太實(shí)用 
this.setData({ 
    'info.height': 155, 
    'info.desc[0].age': 12, 
    'info.desc[3].color': '灰色' 
}) 

上面這兩種方法，是我們平常小程序里經(jīng)常用的，和其他 Web 端的框架相比，就很蹩腳，一種濃濃的半成品感撲面而來(lái)，有沒(méi)有這樣一個(gè)方法：

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

這個(gè)方法會(huì)幫我們深度改變嵌套對(duì)象里對(duì)應(yīng)的屬性值，跳過(guò)數(shù)組項(xiàng)里不想改變的，只設(shè)置我們提供了的屬性值、數(shù)組項(xiàng)，豈不是省略了一大堆蹩腳的代碼，而且可讀性也極佳呢。

這就是為什么我在上線的項(xiàng)目中使用 wx-updata，而不是 setData

2. wx-updata 的優(yōu)點(diǎn)

1. 支持 setData 對(duì)象自動(dòng)合并，不用寫(xiě)蹩腳的對(duì)象路徑了 ??
2. 支持對(duì)象中嵌套數(shù)組，數(shù)組中嵌套對(duì)象;
3. 如果數(shù)組的某個(gè)值你不希望覆蓋，請(qǐng)使用數(shù)組空位來(lái)跳過(guò)這個(gè)數(shù)組項(xiàng)，比如 [1,,3] 這個(gè)數(shù)組中間就是數(shù)組空位;
4. 如果數(shù)組空位你的 Eslint 報(bào)錯(cuò)，可以使用 wx-updata 提供的 Empty 來(lái)代替：[1, Empty, 3]

3. wx-updata 安裝

你也可以直接把 dist 目錄下的 wx-updata.js 拷貝到項(xiàng)目里使用

使用 npm、yarn 安裝方式：

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

然后：

把微信開(kāi)發(fā)者工具面板右側(cè)的 詳情 - 本地設(shè)置 - 使用npm模塊 按鈕打開(kāi);

點(diǎn)擊微信開(kāi)發(fā)者工具面板工具欄的 工具 - 構(gòu)建npm;

構(gòu)建后成功生成 miniprogram_npm 文件夾就可以正常使用了

4. wx-updata 使用方法

使用方式一

可以使用直接掛載到 Page 上的方式，這樣就可以在 Page 實(shí)例中像使用 setData 一樣使用 upData 了

// app.js 
import { updataInit } from './miniprogram_npm/wx-updata/index'  // 你的庫(kù)文件路徑 
 
App({ 
    onLaunch() { 
        Page = updataInit(Page, { debug: true }) 
    } 
}) 
// 頁(yè)面代碼中 
 
this.upData({ 
    info: { height: 155 }, 
    desc: [{ age: 13 }, '帥哥'], 
    family: [, , [, , , { color: '灰色' }]] 
}) 

使用方式二

有的框架可能在 Page 對(duì)象上進(jìn)行了進(jìn)一步修改，直接替換 Page 的方式可能就不太好了，wx-updata 同樣暴露了工具方法，用戶可以在頁(yè)面代碼中直接使用工具方法進(jìn)行處理：

// 頁(yè)面代碼中 
 
import { objToPath } from './miniprogram_npm/wx-updata/index'  // 你的庫(kù)文件路徑 
 
Page({ 
    data: { a: { b: 2}, c: [3,4,5]}, 
 
    // 自己封裝一下 
    upData(data) { 
        return this.setData(objToPath(data)) 
    }, 
 
    // 你的方法中或生命周期函數(shù) 
    yourMethod() { 
        this.upData({ a: { b: 7}, c: [8,,9]}) 
    } 
}) 

使用 Empty 代替數(shù)組空位

可以使用 wx-updata 提供的 Empty 來(lái)代替數(shù)組空位，由于 Empty 本質(zhì)上是一個(gè) Symbol，所以只能使用 wx-updata 導(dǎo)出的，而不能自己新建。

// 頁(yè)面代碼中 
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 相關(guān) API

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

1. data：你希望設(shè)置的 data
2. callback：跟 setData 第二個(gè)參數(shù)一樣，引起界面更新渲染完畢后的回調(diào)函數(shù)

updataInit(Page, config)

1. Page：頁(yè)面對(duì)象，需要在 app.js 中調(diào)用;
2. config：若提供配置參數(shù) { debug: true }，會(huì)將路徑化后的 data 打印出來(lái)，幫助用戶進(jìn)行調(diào)試;

objToPath(Object data)

1. data：你希望設(shè)置的 data 對(duì)象

原文鏈接：https://mp.weixin.qq.com/s/QwCnT335M2P_3NIQhY8XZg