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

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

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

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

基于Proxy的状态管理实现

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

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

Part1: 监听数据变化

监听数据变化其实就是监听各个Store的属性变化，实现上就是在各个Store前面加了一层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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 利用Webpack实现小程序多项目管理的方法

    故事是这样的 产品小姐姐:"我要做一堆小程序,一周上线一到两个没问题吧" 码畜小哥哥:"你他喵是不是傻,做那么多干什么" 产品小姐姐:"蹭些流量呀,用户量多了就可以考虑转化流量给公司的 App" 码畜小哥哥:"fuck 好的" 码畜小哥开始架构 小程序杂,放一个项目方便管理 小程序多,代码要能够复用 团队开发,代码风格要统一 码畜小哥开始建项目 这是单个小程序的基本目录结构,没问题 当一个项目有多个小程序的时候,好像也没问题

  • 微信小程序 http请求的session管理

    微信小程序 http请求的session管理 作为一个开发JavaWeb应用的程序猿,都喜欢将用户登录后的用户信息(比如说用户id,用户名称)放入session中保存,之后在业务逻辑的开发中需要用到用户信息的时候就可以轻松又方便的从session中取到值.最近在开发微信小程序的时候碰到一个问题就是每次微信小程序请求的时候都会改变sessionid,这就会导致在后面的请求中取不到登录时保存在session中的用户信息,其实在前后端分离开发的时候也会碰到这个问题,后端程序员负责服务器端开发,提供接口

  • 小程序登录态管理的方法示例

    所谓的登录态其实就是客户端发送请求的时候携带的token(通常叫做令牌),当用户输入账号密码,验证成功之后,服务端生成一个token传递给客户端,客户端在后续的请求中携带这个token,服务器进行校验,校验成功则处理客户端的请求,校验失败则要求客户端重新去登陆. 在web项目中,我们通常使用session来管理这一过程. 客户端首次访问请求的时候,服务端返回一个sessionId作为cookie给客户端,往后客户端每次请求都带上这个cookie与服务端进行通信,当执行完登陆操作以后,服务端将用户

  • 微信小程序使用gitee进行版本管理

    摘要:小程序协助开发挺重要的,但是开发工具到现在开始才支持版本管理,也是良心功能啊.马上试试连上gitee,团体开发更方便. 准备:安装git.安装最新的微信小程序开发助手.注册gitee账号. 第一:打开对应的项目,开启版本管理 第二:初始化git版本库 点击确定,马上就开启了,很简单粗暴. 第三:配置个人的信息 设置网络验证,你可以选择对应的验证方式,用户名和密码比较简单点,直接使用gitee的账号密码就可以了.我是使用的指定密钥,为了方便 第四:在gitee创建新的项目 拷贝对应的ssh路

  • 小程序封装wx.request请求并创建接口管理文件的实现

    开发小程序,封装有一个简单易用wx.request请求还是很必要的,可以省去大量的维护成本!闲话不多说,直接撸代码. 流程 创建http.js文件,封装wx.request 创建api.js文件,统一管理所有接口 在index.js中调用接口 创建http.js文件,封装wx.request 在utils中创建http.js文件,封装http,代码如下: module.exports = { http(url, method, params) { let token = 'token' // 获

  • 微信小程序云开发 搭建一个管理小程序

    概述 : 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥. 目前提供三大基础能力支持: 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码 数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库 存储:在小程序前端直接上传/下载

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

    微信小程序的市场在进一步的扩大,而背后的技术社区仍在摸索着最好的实践方案.我在帮助Nike,沃尔玛以及一些创业公司开发小程序后,依旧认为使用小程序原生框架是一个更高效,稳定的选择,而使用原生框架唯独缺少一个好的状态管理库,如果不引入状态管理则会让我们在模块化,项目结构以及单元测试上都有些捉襟见肘. 目前相对比较稳健的做法是针对redux或者mobx做一个adaptor应用到小程序中,但这样需要自己想办法打包引入外部库,还要想怎么去写这个adaptor,总显得有些麻烦.于是我迸发出一个想法去写一个

  • 基于Java SSM的健康管理小程序的实现

    基于Java SSM的健康管理小程序的实现

    目录 一.系统的简介 二.系统实现的主要功能 三.系统的界面演示 四.核心代码展示 一.系统的简介 开发语言:Java 框架:ssm JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7(一定要5.7版本) 数据库工具:Navicat11 开发软件:eclipse/myeclipse/idea Maven包:Maven3.3.9 浏览器:谷歌浏览器 二.系统实现的主要功能 (1)用户管理.主要实现了健康管理小程序的用户管理功能. (2)登录注册.小程序端可以登录注册. (

  • 基于redis的小程序登录实现方法流程分析

    基于redis的小程序登录实现方法流程分析

    这张图是小程序的登录流程解析: 小程序登陆授权流程: 在小程序端调用wx.login()获取code,由于我是做后端开发的这边不做赘述,直接贴上代码了.有兴趣的直接去官方文档看下,链接放这里: wx.login() wx.login({ success (res) { if (res.code) { //发起网络请求 wx.request({ url: 'https://test.com/onLogin', data: { code: res.code } }) } else { console

  • 基于python 微信小程序之获取已存在模板消息列表

    前言: 为了获取一定高级操作,如:微信模板消息(xiao,xin)推送,把消息推送给用户,或者是获取用户授权信息都需要用到access token,有效期为两个小时? 过了两个小时怎么办?重新获取,来,代码撸起走,啥女朋友没有? 获取小程序对应的access token def get_wx_token(): url = "https://api.weixin.qq.com/cgi-bin/token?" try: respone = requests.get(url, params=

  • Java基于elasticsearch实现集群管理

    这篇文章主要介绍了java基于elasticsearch实现集群管理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 本篇文章主要是查看集群中的相关信息,具体请看代码和注释 @Test public void test45() throws UnknownHostException{ //1.指定es集群 cluster.name 是固定的key值,my-application是ES集群的名称 Settings settings = Settin

  • linux下RPM包安装基于xinetd的服务的管理

    linux下RPM包安装基于xinetd的服务的管理

    目录 前言 1.基于xinetd服务的启动管理 (1)telnet服务安装 (2)telnet服务启动 2.基于xientd服务的自启动管理 前言 现在Linux系统中基于xinetd的服务越来越少了,但Linux系统中还是有基于xinetd的服务的,所以我们还是需要了解一下基于xinetd的服务的管理. 1.基于xinetd服务的启动管理 我们使用telnet服务来举例,telnet服务是用来进程系统远程管理的,端口是23.不过需要注意的是telnet的远程管理数据在网络当中是明文传输,非常不

  • SpringBoot2使用JTA组件实现基于JdbcTemplate多数据源事务管理(亲测好用)

    SpringBoot2使用JTA组件实现基于JdbcTemplate多数据源事务管理(亲测好用)

    目录 一.JTA组件简介 什么是JTA 什么是XA协议 二.SpringBoot整合JTA 1.核心依赖 2.环境配置 3.jta组件配置类 4.创建一个Service实现,模拟两种不同的情况. 5.创建测试类,编写测试用例 6.测试验证 一.JTA组件简介 什么是JTA JTA,全称:Java Transaction API.JTA事务比JDBC事务更强大.一个JTA事务可以有多个参与者,而一个JDBC事务则被限定在一个单一的数据库连接.所以,当我们在同时操作多个数据库的时候,使用JTA事务就

  • Flutter交互并使用小工具管理其状态widget的state详解

    目录 交互 小工具管理其状态 widget的state 混合管理 交互 当小部件的状态发生变化时,状态对象调用setState()来告诉框架重新绘制小部件 创建一个自定义的有状态小部件.将用一个自定义的有状态小部件替换两个无状态小部件-红色实心星形图标及其旁边的数字计数-小部件管理一行,其中包含两个子小部件:IconButton和Text. class FavoriteWidget extends StatefulWidget { @override _FavoriteWidgetState c

  • SpringCloud微服务开发基于RocketMQ实现分布式事务管理详解

    目录 消息队列实现分布式事务原理 RocketMQ的事务消息 代码实现 基础配置 发送半消息 执行本地事务与回查 Account-Service消费消息 测试 小结 消息队列实现分布式事务原理 首先让我们来看一下基于消息队列实现分布式事务的原理方案. 柔性事务 发送消息的服务有个OUTBOX数据表,在进行INSERT.UPDATE.DELETE 业务操作时也会给OUTBOX数据表INSERT一条消息记录,这样可以保证原子性,因为这是基于本地的ACID事务. OUTBOX表充当临时消息队列,然后我

  • 基于mpvue的小程序项目搭建的步骤

    基于mpvue的小程序项目搭建的步骤

    前言 mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为 H5,mpvue 将是十分契合的一种解决方案. Mpvue官网:http://mpvue.com/ demo地址 :https://github.com/ccwyn/mpvuedemo/tree/mast

随机推荐