14行代码实现小程序全局变量监听

这几天帮我哥们写了个小程序，但哥们要求必须全原生，很久没有写过原生了，又遇到了当初学小程序时遇到过的问题，就是原生小程序没有全局状态管理，这就让我的开发过程很不愉快了。

小程序是有一个全局变量 globalData ，我们在小程序内的任何地方拿到 globalData ，这就给了我们模拟状态管理的基础条件。但 globalData 有个致命缺点就是他不是响应式的，我们不知道它什么时候被修改，如果我们做一些异步操作修改了 globalData 我们也不能确定被修改的时间点，不能确定何时去取新值。

这问题可以用 defineProperty 解决啊，不了解的请看 MDN 或者看看这位小哥写的博客 《深入浅出Object.defineProperty()》，写的非常详细。我也尽量把注释写的详细一点。

Vue、React 等响应式也是通过 defineProperty 来实现的。

在 app.js 内定义一个 watch() 函数，三个变量分别是

• dataName：被监听变量名
• callback：回调函数
• that：回调函数执行环境，（如果回调函数内需要用到 this 则需要传过来）

watch: function (dataName, callback, that) {
	// 拿到全局变量、当然你也可以监听任何其他的对象
	var obj = this.globalData;
	Object.defineProperty(obj, dataName, {
	  // 可配置
	  configurable: true,
	  // 可枚举
	  enumerable: true,
	  // 当监听的函数被设置新值的时候执行
	  set: function (value) {
	  	// 当我们监听的值被修改的时候，触发 set 方法
	  	// 把新值存入一个临时的属性里，为什么存到临时的？看后边。
		this['temp' + dataName] = value;
		// 调用回调函数，传入新值
		callback.call(that, value);
	  },
	  // 当监听的函数被get的时候调用
	  get: function () {
	  	// 当我们主动去 get 监听的这个值的时候触发当前函数，这里你可以进行一下其他操作。
		return this['temp' + dataName];
	  }
	})
}

在需要获得数据的页面或自定义组件内：

getApp().watch("currCity", (res) => {this.setData({currCity: res})}, this);

这样在异步修改了 globalData 后我们就可以直接在页面内拿到新的值啦~

为什么存入一个临时的属性？
看了一下其他的几个类似的博客，这里写的都是有问题的，基本上都是只能监听一个函数的变化。这个地方也正是我去改进的地方。

试想我们如果在 set 函数中这么写：

this[dataName] = value;

这就相当于给我们监听的 data 又赋值了一次，便又会触发一次 set ，就形成了死循环，说以我们要存到一个其他的属性里。