浅谈小程序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 相关文章推荐
做网页的一些技巧
Feb 01 Javascript
javascript document.execCommand() 常用解析
Dec 14 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
javascript每日必学之继承
Feb 23 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 Javascript
Vue router安装及使用方法解析
Dec 02 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删除HTMl标签的三种解决方法
2013/06/30 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
浅析JS刷新框架中的其他页面 && JS刷新窗口方法汇总
2013/07/08 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
python基本语法练习实例
2017/09/19 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
法国房车租赁网站:Yescapa
2019/08/26 全球购物
土木工程应届生求职信
2013/10/31 职场文书
好的自荐信包括什么内容
2013/11/07 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
计划生育标语
2014/06/23 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP
python自动化调用百度api解决验证码
2021/04/13 Python