微信小程序setData源码分析

客官°小女子只卖身不卖艺 2024-04-17 13:54 68阅读 0赞

开发中setData 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口，下面通过源码分析其组装和更新数据的流程。了解其过程才能写出性能更好的代码。

### 背景 ###

*  setData 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。详见官网描述
 *  常见的 setData 操作错误
    
    1.频繁的去 setData
    
    2.每次 setData 都传递大量新数据
    
    3.后台态页面进行 setData
 *  针对第二点官网给出意见是,其中 key 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 array\[2\].message，a.b.c.d，并且不需要在 this.data 中预先定义
 *  下面通过源码深入分析的方式了解小程序是怎么针对数据路径进行组装和构造数据

### 小程序逻辑层框架源码 ###

*  微信小程序运行在三端：iOS（iPhone/iPad）、Android 和 用于调试的开发者工具。在开发工具上，小程序逻辑层的 javascript 代码是运行在 NW.js 中，视图层是由 Chromium 60 Webview 来渲染的。这里简单点就直接通过开发者工具来查找源码。
 *  在微信开发者工具中，编译运行你的小程序项目，然后打开控制台，输入 document 并回车，就可以看到小程序运行时，WebView 加载的完整的 WAPageFrame.html，如下图：

可以看到./ **dev**/WAService.js这个库就小程序逻辑层基础库，提供逻辑层基础的 API 能力

*  在微信小程序 IDE 控制台输入 openVendor 命令，可以打开微信小程序开发工具的资源目录

*  我们可以看到小程序各版本的运行时包 .wxvpkg。.wxvpkg 文件可以使用 wechat-app-unpack 解开，解开后里面就是WAService.js 和 WAWebView.js 等代码

*  另外也可以只直接通过开发者工具的Sources面板查找到WAService.js的源码

### 分析setData源码 ###

*  在WAService.js中全局查找setData方法，找到定义此方法的地方，如下

*  源代码使用了大量的逗号运算符，逗号运算符的优先级是最低的，比条件选择符还低
 *  大量使用void 0 表示undefined
 *  setData函数定义中添加了关键的注释如下：

function(c, e) {
        // 保存闭包内的this对象，即常用的that
        var u = this;
        // 官网定义 Page.prototype.setData(Object data, Function    callback),
        // 即 c: Object对象，e: Function界面更新渲染完毕后的回调函数
        try {
            // 返回 [object Object] 中的Object
            var t = v(c);
            if ("Object" !== t)
                return void E("类型错误", "setData accepts an Object rather than some " + t);
            Object.keys(c).forEach(function(e) {
                // e: 可枚举属性的键值, void 0 表示undefined (https://github.com/lessfish/underscore-analysis/issues/1)
                void 0 === c[e] && E("Page setData warning", 'Setting data field "' + e + '" to undefined is invalid.');
                // t为包含子对象属性名的属性数组, u.data和u.__viewData__都是page.data的深拷贝副本
                var t = N(e)
                  , n = j(u.data, t)
                  , r = n.obj
                  , o = n.key;
                if (r && (r[o] = y(c[e])), void 0 !== c[e]) {
                    var i = j(u.__viewData__, t)
                      , a = i.obj
                      , s = i.key;
                    a && (a[s] = y(c[e]))
                }
            }),
            __appServiceSDK__.traceBeginEvent("Framework", "DataEmitter::emit"),
            this.__wxComponentInst__.setData(JSON.parse(JSON.stringify(c)), e),
            __appServiceSDK__.traceEndEvent()
        } catch (e) {
            k(e)
        }
    }
    复制代码

*  关键函数N(e)，解析属性名(包含.和\[\]等数据路径符号)，返回相应的层级数组，如

{abc: 1}中abc属性名 => [abc], {a.b.c: 1}中'a.b.c'属性 => [a,b,c], {
        "array[0].text": 1} => [array, 0, text]
    复制代码

关键的注释如下:

*  关键函数j(e, t)，解析出属性最终对应的子对象的属性名，以及对应的子对象

*  最后通过r && (r\[o\] = y(c\[e\]))的方式将新的值赋给匹配出的子对象的属性，这里j(e,t)函数内部是通过引用的方式向外传递出r，所以这里改变r\[o\]的值也会将u.data内部的值相应修改,完成局部刷新
 *  由于不同的版本解包后，里面压缩之后的方法名称可能跟上面的对不上，但是大体的结构都是一样的

### 总结 ###

1.官方提供的array\[2\].message，a.b.c.d方式就是通过解析成\[array,2,message\]和\[a,b,c,d\],找到相应的子结构进行复制操作,到达减少数据量的目的;

2.分页加载的时候，为了避免将整个list数据重新传输，就可以利用数据路径的方式只追加新的数据

假设原数组长度 length 为 10，新数组 newList 长度为 3
    this.setData{
      'list[10]': newList[0],
      'list[11]': newList[1],
      'list[12]': newList[2],
    }
    复制代码

### 参考资料 ###

*  [小程序开发指南][Link 1]
 *  [小程序开源源码][Link 2]

转载于:https://juejin.im/post/5d647ce26fb9a06ae8361b05

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Febook%3Faction%3Dget_post_info%26amp%3Bdocid%3D0008aeea9a8978ab0086a685851c0a
[Link 2]: https://link.juejin.im?target=http%3A%2F%2Fgithub.crmeb.net%2Fu%2FLXT