浅谈小程序globalData的那些事儿

来源:脚本之家  责任编辑:小易  

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

小程序中,除了每个页面有自己的 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等适合自身业务的工具方法等。

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

您可能感兴趣的文章:


  • 本文相关:
  • 微信小程序全局变量globaldata的定义和调用过程解析
  • 微信小程序在其他页面监听globaldata中值的变化
  • 微信小程序如何使用globaldata的方法
  • bootstrap 智能表单实战系列(五) 表单依赖插件处理
  • javascript合并两个数组并去除重复项的方法
  • javascript实现添加、查找、删除元素
  • js canvas绘制圆形时钟教程
  • 原生javascript实现动态省市县三级联动下拉框菜单实例代码
  • js 对象(object)和字符串(string)互转方法
  • js获取客户端ip地址、mac和主机名的7个方法汇总
  • 从数据结构的角度分析 for each in 比 for in 快的多
  • javascript导出csv文件(excel)的方法示例
  • js基于正则实现数字千分位用逗号分隔的方法
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved