基于Proxy的小程序状态管理实现


Posted in Javascript onJune 14, 2019

微信小程序的市场在进一步的扩大,而背后的技术社区仍在摸索着最好的实践方案。我在帮助Nike,沃尔玛以及一些创业公司开发小程序后,依旧认为使用小程序原生框架是一个更高效,稳定的选择,而使用原生框架唯独缺少一个好的状态管理库,如果不引入状态管理则会让我们在模块化,项目结构以及单元测试上都有些捉襟见肘。

目前相对比较稳健的做法是针对redux或者mobx做一个adaptor应用到小程序中,但这样需要自己想办法打包引入外部库,还要想怎么去写这个adaptor,总显得有些麻烦。于是我迸发出一个想法去写一个专用于小程序的状态管理库,它使用起来足够简单并且可以通过小程序自己的npm机制安装。

目前我已经用这个开源库开发了两个电商小程序,在提高我开发效率的同时亦保证了程序的性能,所以接下来我想谈谈这背后的理念以启发更多开发者尝试新的解决方案。

基于Proxy的状态管理实现

Proxy在小程序中已经得到了足够好的支持,目前并没有发现在任何iPhone或者Android上不能使用Proxy的情况。而基于Proxy的状态管理其实也就是订阅监听的模式,一方面监听数据的变化,另一方面将这些变化传达给订阅的小程序页面。

举一个比较常见的例子,当一个用户从自己的主页进入用户编辑页面,然后更改了自己的用户名点击保存后,用户主页和用户编辑页上的用户名这时候都应该被更新。这背后的程序逻辑则是:更新这个行为将触发Proxy去通知状态管理库,然后状态管理库负责检查此时还在页面栈中的所有页面,更新订阅了用户名这个数据的页面,如下图:

基于Proxy的小程序状态管理实现

Part1: 监听数据变化

监听数据变化其实就是监听各个Store的属性变化,实现上就是在各个Store前面加了一层Proxy,用更直观的图片来表示就是这样:

基于Proxy的小程序状态管理实现

当一个Store被观察以后,它的属性就都变成了Proxy实例,当这个属性值是Object或者Array的时候,它内部的值也会被包装成Proxy实例,这样无论多深层的数据变动都能被监听到。
而在Proxy的后面,Store的属性其实是被另一套数据(紫色部分)所维护,这套数据不负责监听,它就是纯数据,针对属性的任何变动最后都会应用到这套数据上来,它的作用是维护和返回最新的数据。

实现细节: https://github.com/wwayne/minii/blob/master/src/api/observe.js

Part2: 页面数据绑定

因为小程序每个页面的js都是向Page中传递一个对象,这就让我们有机会包装这个对象,从而实现:

进入页面后,将页面保存在页面栈中将来自状态管理库的数据映射到这个页面的data上来页面退出时,将页面从页面栈中移除

实现细节: https://github.com/wwayne/minii/blob/master/src/api/mapToData.js

Part3: 页面订阅更新

当数据被监听到变化后,我们需要依次做两件事,先是找到所有存储在页面栈里的页面,然后根据各个页面订阅的数据来检查变化,如果有变化就通知这些页面,从而让它们去触发setData更新页面。

实现细节:https://github.com/wwayne/minii/blob/master/src/core.js

使用状态管理的例子

有了状态管理库,现在我们就来实现一开始举例的更新用户信息的操作,我们的文件路径如下:

stores/
 user.js
pages/
 userEdit/
   index.js
   index.wxml

1.首先我们创建一个Store保存用户的信息,并且监听它的变化:

// stores/user.js
import { observe } from 'minii'

Class UserStore {
 constructor () {
   this.name = 'bob'
 }

 changeName (name) {
   this.name = name
 }
}

export default observe(new UserStore(), 'user')

2.接着在我们的小程序页面订阅Store的信息

// pages/userEdit/index.js
import { mapToData } from 'minii'
import userStore from '../../stores/user'

const connect = mapToData(state => (({
 myName: state.user.name
}))
Page(connect({
 updateNameToJames () {
  userStore. changeName('james')
 }
}))

3.完成,现在可以在页面中使用和更新数据了

// pages/userEdit/index.wxml
<text>{{ myName }}</text>
<button bindtap="updateNameToJames">update name to James</button>

最后

小程序因为有体积的限制,所以我希望在代码量上也尽量做到轻量和便捷,所以目前这个状态管理库并没有太多很复杂的功能,在小程序打包后所占用的体积也不到1kb,颇有点够用就好的意思。

我也已经用它开发了两款小程序,在经历了一段时间的用户使用后,我也更有信心说这个方案在小程序中是可行的。如果你有任何想法和建议,都欢迎告诉我。

项目Github: https://github.com/wwayne/minii

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
详谈 Jquery Ajax异步处理Json数据.
Sep 09 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
简单分析js中的this的原理
Aug 31 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 #Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 #Javascript
在Vue中使用icon 字体图标的方法
Jun 14 #Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 #Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 #Javascript
vue路由插件之vue-route
Jun 13 #Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 #Javascript
You might like
php中3种方法删除字符串中间的空格
2014/03/10 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
写给小白看的JavaScript异步
2017/11/29 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
Python求解正态分布置信区间教程
2019/11/20 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
serialVersionUID具有什么样的特征
2014/02/20 面试题
学习保证书范文
2014/04/30 职场文书
语文课外活动总结
2014/08/27 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
七年级话题作文之执着
2019/11/19 职场文书
如何基于python实现单目三维重建详解
2022/06/25 Python