武威做网站的公司,建站备案,wordpress输出文章id,wordpress过滤html标签了最近#xff0c;接到小程序需求#xff0c;并且是在以前公司老项目上改造#xff0c;打开项目#xff0c;发现却不是我想象中的那样#xff0c;不是上来就是 Page({})#xff0c;而是create(store,{})#xff0c;纳尼#xff1f;#xff1f;#xff1f;这什么玩意接到小程序需求并且是在以前公司老项目上改造打开项目发现却不是我想象中的那样不是上来就是 Page({})而是create(store,{})纳尼这什么玩意怎么没见过
1、初见Westore
接上于是乎打开了create函数后面得知本项目引用的1.0版本如下
export default function create(store, option) {let updatePath nullif (arguments.length 2) { ...Page(option)} else {...Component(store)}
}咋眼一看难不成是自己写了一套状态管理直觉告诉我这应该不是前辈写的应该是某个三方库于是乎去搜索了一番果然是腾讯官网针对小程序优化而出的链接在这里感兴趣的小伙伴可以去看看哦
2、按文档理解
大概是说以store去驱动视图性能有所提高能解决小程序跨页面通讯传值等问题反正巴拉巴拉一大堆小程序不是有globalData吗说实话我还没理解它这个的好处结合自己理解再简单总结下吧
经过改造后相比小程序更新视图的setDataWestore的update性能更好为啥呢update底层实质还是调用的setData只是再调用直接走了一次diff只更新变动的举个栗子
data: {info: {a: xxx,b: xxx...}
}我们一般在更新一些数据时可能会直接 setData({ info: newInfo })而实际 newInfo 只是某个属性改变了
当使用 update() 时会直接找出不同差量的去更新
update()------- setData({ info.a: 改变了哦 })通过 store 可以设置一些函数属性这个就类似vue的计算属性了剩下的就是关于 store 全局数据的一个概念就不累赘了 当然这里只是简单说下体会最明显的几点
3、简单分析下流程
映入眼帘的是 create 那么需要知道它干了啥函数属性是怎么实现的凭什么 update 就比 setData好
3.1 浅析create
export default function create(store, option) {let updatePath null// 在这一步区分是组件还是页面if (arguments.length 2) { if (option.data Object.keys(option.data).length 0) {// 记录data中的keyupdatePath getUpdatePath(option.data)// 页面data的值初始值替换为 store中的值syncValues(store.data, option.data)}// 保留store源数据同时给当前store新增几个方法尤其是updateif (!originData) {originData JSON.parse(JSON.stringify(store.data))globalStore storestore.instances {}store.update update...// 给全局的 globalStore 添加一个 methodextendStoreMethod(store)}getApp().globalData (getApp().globalData.store store)//option.data store.dataconst onLoad option.onLoad// walk 为了解决当定义在store里面属性是一个方法时// 会通过 Object.defineProperty 拦截一下该属性的get过程也就是缓存下函数改变this环境执行一下walk(store.data)// 解决函数属性初始化不能显示的问题要求必须在data中声明使用// 这段代码是同步store.data到option.data只有经过walk方法后store.data中的函数才能变成属性才能被小程序page方法渲染if (option.data Object.keys(option.data).length 0) {updatePath getUpdatePath(option.data)console.log(updatePath,updatePath)syncValues(store.data, option.data)}option.onLoad function (e) {// 给当前实例添加 store 、更新路径、update方法、执行onLoad、同步data、// 走小程序 setDatathis.store storethis._updatePath updatePath...this.setData(this.data)}// 解决执行navigateBack或reLaunch时清除store.instances对应页面的实例const onUnload option.onUnloadoption.onUnload function () {onUnload onUnload.call(this)store.instances[this.route] []}Page(option)} else {组件逻辑先不看}
}create接收两个参数 store ---- 可以理解为页面的数据或者共享时公有的 option — 则是小程序原有选项 代码开头则通过实参个数区分了当前是组件还是页面这里以页面为例同时记录下页面data路径也就是 getUpdatePath 函数
function getUpdatePath(data) {const result {}dataToPath(data, result)return result
}function dataToPath(data, result) {Object.keys(data).forEach(key {result[key] trueconst type Object.prototype.toString.call(data[key])if (type OBJECTTYPE) {_objToPath(data[key], key, result)} else if (type ARRAYTYPE) {_arrayToPath(data[key], key, result)}})
}如上getUpdatePath 目的就是把各个属性记录下来如
data: {a: 123,b: { c: 456 }
}
getUpdatePath(data) 后
{a: true,b.c: true
}有了这个后是为了方便后续判断要更新的key在不在data中
还有一步 syncValues这个函数就是把store中的值同步到 data 中这就是为什么页面需要列出store中的属性的原因这里是v1貌似proxy那个版本不需要了
接着就是给store添加一些方法如update以及源数据保留等
来到 walk 函数
function walk(data) {Object.keys(data).forEach(key {const obj data[key]const tp type(obj)if (tp FUNCTIONTYPE) {setProp(key, obj)} else if (tp OBJECTTYPE) {Object.keys(obj).forEach(subKey {// 值key vipInfo.age_walk(obj[subKey], key . subKey)})} else if (tp ARRAYTYPE) {obj.forEach((item, index) {_walk(item, key [ index ])})}})
}function _walk(obj, path) {const tp type(obj)if (tp FUNCTIONTYPE) {setProp(path, obj)} else if (tp OBJECTTYPE) {Object.keys(obj).forEach(subKey {_walk(obj[subKey], path . subKey)})} else if (tp ARRAYTYPE) {obj.forEach((item, index) {_walk(item, path [ index ])})}
}function setProp(path, fn) {const ok getObjByPath(path)fnMapping[path] fnObject.defineProperty(ok.obj, ok.key, {enumerable: true,get: () {return fnMapping[path].call(globalStore.data)},set: () {console.warn(Please using store.method to set method prop of data!)}})
}看到这种名字的函数第一反应就是逐个遍历的过程这个函数虽然拆成了几个函数但目的其实很简单只有当 tp FUNCTIONTYPE 时才会跳出这个过程走 setProp 函数看到这里可能还是有点迷糊那就加一个函数属性豁然开朗
data: {vipInfo: {age: 25,getAge(){return this.vipInfo.age}}
}
经过 walk 后
vipInfo: {age: 25,getAge: undefined
}
// getAge 变成了一个属性并且通过拦截的方式当get的时候再执行开始定义的函数
// 这也就能解释如何实现 函数属性的了剩下几部就是对onLoad函数的改写以及一些页面卸载实例销户的过程最终还是走的小程序Page函数
以上步骤可以知道主要是 1、同步 store 中的值到 小程序 data 中 2、记录每个属性的路径 3、当 store 中有函数属性时通过响应拦截方式将其转变为 属性同时再次同步一次值 4、给store添加一些api 5、对 onLoad 方法进行改写包括 onUnload 6、走小程序 Page 过程
3.2 那就看看 update
function update(patch) {return new Promise(resolve {//defineFnProp(globalStore.data)// 可以传路径也可以不传if (patch) {for (let key in patch) {updateByPath(globalStore.data, key, patch[key])}}// diff 后直接找出差异的数据let diffResult diff(globalStore.data, originData)if (Object.keys(diffResult)[0] ) {diffResult diffResult[]}// 是否是全局数据const updateAll matchGlobalData(diffResult)let array []if (Object.keys(diffResult).length 0) {for (let key in globalStore.instances) {globalStore.instances[key].forEach(ins {if(updateAll || globalStore.updateAll || ins._updatePath){// 获取需要更新的字段const needUpdatePathList getNeedUpdatePathList(diffResult, ins._updatePath)console.log(needUpdatePathList,needUpdatePathList)if (needUpdatePathList.length) {...// 值差量更新并且包装成 数组 Promise 形式array.push( new Promise(cb {ins.setData.call(ins, _diffResult, cb)}) )}}})}// 数据更新的回调globalStore.onChange globalStore.onChange(diffResult)...Promise.all(array).then(e{resolve(diffResult)})})
}可以看到update 就比较残暴了通过 diff 找出变动的数据接着是对应实例更新问题最后把需要更新的数据包装成 Promise 的形式最终通过 setData 实现
4、总结
以上就是笔者对整个过程的分析从简单来看可以理解为重点对 setData 进行了 diff 的优化用法是上显得直观官方也给出了 多页面时几种情况 store 的拆分不过笔者还没想好应该怎么写跟优雅
