最近接了一个小程序项目,对于以前只写过一个小工具的我而言,是时候考察一波小程序的基本功了(认真脸)。
上手先了解了各路大神撸小程序的方式,前有基于vue语法的mpvue ,专职生成小程序;又有基于react的京东团队的taro 在后,一语多端,支持react语法生成小程序、H5、react-native......;还有官方wepy,仿vue语法,官方支持更稳定......都芥末:ox:的吗? 赶紧每个都学习了一下。
然鹅——
!!翻开issue页,似乎都有几十到上百条的open isuue未解决,同时还有一些诡异的bug夹杂其中,好怕怕。遂放弃......逃
于是手撸原生框架,于是遇到了原生框架中一个最大的问题,全局状态同步管理 /(ㄒoㄒ)/~~。
小程序框架提供了许多开箱即用的组件,大大提高我们的开发效率。但是作为一个不能直接引用js npm包的语法 (支持的模式很繁琐) ,同时小程序本身也没有提供类似redux、vuex的全局的状态管理工具,这简直违反了mvc(mvvm)党的一贯作风。
于是想到了手写一个简单的全局状态管理库,从各方面考察似乎可行,毕竟是一个接近vue的框架。
心路历程如上。。。。。。还是不废话了,上主菜 (可直接翻到文末查看代码完整版) 。
小程序官方提供且推荐的demo中是把全局数据放在app实例上——示例 ,咋一看似乎很接近我们的全局状态管理需求,但这只是一个数据存储方式,完全没法做到响应式状态。
想想我们常见的需求,在个人中心页点击“去登录”,跳转到登录页,测试一番骚操作,好不容易登录成功了,返回个人中心,依旧是一个大大的“去登陆”按钮在嘲讽着他/她,于是测试打了你一顿并让你回去加班。
这时候你完全可以在onShow中使用 this.setData 刷新每一次页面展开......前提是你不怕繁琐,同时愿意消耗更多的性能(sex power)。
所以开始手写,第一步,在项目中生成一个 /store/sotre.js 文件。
再放两个轮子中常用的方法
const _toString = Object.prototype.toString
function isFunction(obj) {
return typeof obj === 'function' || false
}
function isObject(obj) {
return _toString.call(obj) === '[object Object]' || false
}
复制代码
createStore
全局状态管理理索当然需要一个全局的状态存储,同时考虑使用react-redux的connect模式做绑定:
let _state = null
function connect(mapStateToData, mapMethodTopPage) {
...
}
/**
* 创建store对象
*
* @param { Object } store
* @returns { Object } _Store
*/
function createStore(state) {
if (_state) {
console.warn(
'there are multiple store active. This might lead to unexpected results.'
)