浅谈小程序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 相关文章推荐
javascript对象的property和prototype是这样一种关系
Mar 24 Javascript
javawscript 三级菜单的实现原理
Jul 01 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 Javascript
jquery实现图片上传前本地预览
Apr 28 jQuery
JS回调函数基本定义与用法实例分析
May 24 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
微信小程序获取当前位置和城市名
Nov 13 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
小程序怎样让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取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
详解PHP素材图片上传、下载功能
2019/04/12 PHP
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
python操作mysql数据库
2017/03/05 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
基于python log取对数详解
2018/06/08 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
安装docker-compose的两种最简方法
2019/07/30 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
Pytorch 实现权重初始化
2019/12/31 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
Python sys模块常用方法解析
2020/02/20 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
Django 实现图片上传和下载功能
2020/12/31 Python
人事主管岗位职责范本
2013/12/04 职场文书
40岁生日感言
2014/02/15 职场文书
初三毕业评语
2014/12/26 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript