微信小程序（十）全局数据变化监听

た入场券 2022-12-27 08:29 736阅读 0赞

有这样一个需求，在一个页面点击“增加”按钮，另一个页面的数据要跟着变化，这里就需要全局数据变化监听。

在全局app.js文件中：

//app.js
    App({
      // ...
      globalData: {
        orderNum:0, // 订单数量
      },
      
      //app 全局属性监听
      watch: function (method) {
        var obj = this.globalData;
    
        Object.defineProperty(this, "globalData", {  //这里的 globalData对应 上面 globalData 
          configurable: true,
          enumerable: true,
          set: function (value) {  //动态赋值，传递对象，为 globalData 中对应变量赋值
            obj.orderNum = value.orderNum;
            method(value);
          },
          get: function () {  //获取全局变量值，直接返回全部
            return obj;
          }
        })
      }
    })

这里我们需要全局监听orderNum，watch函数的参数method是监听回调函数。  
这里利用的Object.defineProperty()来监听赋值变化，Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性。

Object.defineProperty(obj, prop, desc)

*  obj 需要定义属性的当前对象
 *  prop 当前需要定义的属性名
 *  desc 属性描述符

在重写set方法时，调用回调函数。

在页面中动态赋值：

app.globalData = {
        'orderNum': orderNum
    }

监听另外页面中数据变化：

// pages/order/order.js
    var app = getApp();
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        orderNum: app.globalData.orderNum
      },
      //定义监听回调方法
      //app 监听回调方法
      watchBack: function (value) {  //这里的value 就是 app.js 中 watch 方法中的 set, 返回整个 globalData
        this.setData({
          orderNum: value.orderNum
        });
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        // 首先需要在父页面 onLoad() 方法中添加监听以及指定监听回调方法
        // 设置 App 监听回调
        // 如果其他页面修改了 app.js 中的 showPictureDetail 值, 就会触发回调
        app.watch(this.watchBack)
      },
    })

到这里有个问题，就是只能有一个监听者，当有多个监听者时，后面的会覆盖前面的，导致只有最后一个监听者能收到信息。  
解决办法就是加一个监听者列表，每次有新的监听者注册时，加入到列表中，收到信息时，遍历监听者列表回调即可。

//app.js
    App({
      // ...
      globalData: {
        methodList: [], //监听者列表
        orderNum:0, // 订单数量
      },
      //app 全局属性监听
      watch: function (method) {
        var obj = this.globalData;
        obj.methodList.push(method); //加入到监听者列表中
    
        Object.defineProperty(this, "globalData", {  //这里的 data 对应 上面 globalData 中的 data
          configurable: true,
          enumerable: true,
          set: function (value) {  //动态赋值，传递对象，为 globalData 中对应变量赋值
            obj.orderNum = value.orderNum;
            obj.methodList.forEach(element => {
              element(value); // 遍历监听者列表，回调
            });
          },
          get: function () {  //获取全局变量值，直接返回全部
            return obj;
          }
        })
      }
    })

参考：  
[深入浅出Object.defineProperty()][Object.defineProperty]  
[JavaScript中的Object.defineProperty()和defineProperties()][JavaScript_Object.defineProperty_defineProperties]  
[微信小程序全局变量改变监听][Link 1]

[Object.defineProperty]: https://www.jianshu.com/p/8fe1382ba135
[JavaScript_Object.defineProperty_defineProperties]: https://segmentfault.com/a/1190000011294519
[Link 1]: https://www.cnblogs.com/dream-saddle/p/11180053.html