浅谈小程序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 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
JavaScript获取一个范围内日期的方法
Apr 24 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
js实现跨域的多种方法
Dec 25 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 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实现定时生成HTML网站首页实例代码
2008/11/20 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
简单谈谈PHP中strlen 函数
2016/02/27 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
jQuery实现评论模块
2020/08/19 jQuery
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
python实现局域网内实时通信代码
2019/12/22 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
python 下划线的不同用法
2020/10/24 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
工程项目经理岗位职责
2013/12/15 职场文书
大学旷课检讨书
2014/01/28 职场文书
美术毕业生求职信
2014/02/25 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
4s店活动策划方案
2014/08/25 职场文书
授权委托书(完整版)
2014/09/10 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
2015年护士节活动总结
2015/02/10 职场文书
2015年双拥工作总结
2015/04/08 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
停电放假通知
2015/04/14 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL