基于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 相关文章推荐
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
Vue开发Html5微信公众号的步骤
Apr 11 Javascript
Vue Render函数原理及代码实例解析
Jul 30 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生成局部唯一识别码LUID的代码
2012/10/06 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
php实现的用户查询类实例
2015/06/18 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
Django设置Postgresql的操作
2020/05/14 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
大学生的四年学习自我评价
2013/12/13 职场文书
2013年学期结束动员演讲稿
2014/01/07 职场文书
公司年会主持词
2014/03/22 职场文书
村居抓节水倡议书
2014/05/19 职场文书
中秋晚会活动方案
2014/08/31 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
2014年教研员工作总结
2014/12/23 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技