浅谈小程序globalData的那些事儿


Posted in Javascript onNovember 01, 2019

我在严冬下掘起结冰的泥土,我在黑暗的战壕里跃动,我用生命守护房屋的石板,我在散发着焦土味的废墟下长眠。

小程序中,除了每个页面有自己的 data,还有个全局数据存储地方:globalData,获取方式如下:

let globalData = getApp().globalData

实际业务代码中总会遇到这种情况:写着写着发现需要用全局数据,但是不能直接就在当前函数里直接写上面的一段代码,因为要和别的函数共用,所以返回 js 文件顶部添加一段代码,再返回刚刚断掉的地方继续写,类似这样:

// 省略12行
let globalData = getApp().globalData
// 省略15行
Page({
 data: { ... }
 //.. 省略863行
 onButtonTap(e) {
  // ...
  let myData = globalData.myData
  // ...
 }
})

经过这么一折腾,可能刚刚的代码思路都没了。那能不能直接在想用的函数里直接方便的获取这个 globalData 呢?比如:

// 省略27行
Page({
 data: { ... }
 //.. 省略863行
 onButtonTap(e) {
  // ...
  let myData = this.globalData.myData
  // ...
 }
})

或者换种方式获取和设置 myData:

let myData = this.$global('myData')
// ...
this.$global('myData', 2)

实现 global 方法

function global(name, value) {
 var globalData = getApp().globalData
 var data = {}
 // this.$global()
 if (arguments.length === 0) {
  return globalData
 }
 // this.$global('myData')
 if (arguments.length === 1) {
  if (is.string(name)) {
   return globalData[name]
  }
  // this.$global({
  //  name: 1
  // })
  if (is.object(name)) {
   data = name
  }
 }
 // this.$global('myData', 2)
 if (arguments.length === 2) {
  data[name] = value
 }
 return extend(data, data)
}

其中,is.string 和 is.object 是类型判断函数。简单实现了多种操作 globalData 的方法,详细见注释。

挂载到 this

函数有了,那么怎么挂在到小程序页面的 this 中呢,看过前几篇可能知道,要对小程序原有的 Page 函数进行改造。

有两种方式,一种是直接添加到 config 里:

var originPage = Page
var global = require('../utils/global')

function MyPage(config) {
 // ...
 config.$global = global
 // ...
 originPage(config)
}

function page (config) {
 return new MyPage(config)
}

或者在代理后的 onLoad 函数里定义:

var originPage = Page
var global = require('../utils/global')

function MyPage(config) {
 this.watch = config.watch
 this.lifetimeBackup = {
  onLoad: config.onLoad
 }
 config.onLoad = function(options) {
  this.$global = global
  // 其他代码
  this.lifetimeBackup.onLoad.call(this, options)
 }
 
 // ...

 originPage(config)
}

总结

利用这种方式,可以定义很多通用的小程序页面的方法,比如在摩拜小程序内部封装了 this.$util、this.$navigate等适合自身业务的工具方法等。

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

Javascript 相关文章推荐
js DOM 元素ID就是全局变量
Sep 20 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
js 对小数加法精度处理示例说明
Dec 27 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
javascript字符串函数汇总
Dec 06 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 #Javascript
vue实现配置全局访问路径头(axios)
Nov 01 #Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 #Javascript
js实现漂亮的星空背景
Nov 01 #Javascript
Vue实现push数组并删除的例子
Nov 01 #Javascript
vue实现跳转接口push 转场动画示例
Nov 01 #Javascript
JS实现动态星空背景效果
Nov 01 #Javascript
You might like
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
Vuex简单入门
2017/04/19 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
详解Python中的文本处理
2015/04/11 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
Python for循环与getitem的关系详解
2020/01/02 Python
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
安全生产先进个人材料
2014/02/06 职场文书
家长会学生演讲稿
2014/04/26 职场文书
校运会口号
2014/06/18 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
新手初学Java List 接口
2021/07/07 Java/Android
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python