小程序如何在其他页面监听globalData中值的变化？

ゝ一纸荒年。 2022-02-27 08:16 440阅读 0赞

> **小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。**

## 前言 ##

这几天去面试，多次碰到同一个知识点。而且有一次面试挺有趣的，是关于小程序的。共有3个问题。

*  1、小程序中Page.watch()方法是做什么用的？
 *  2、小程序中如何在其他页面中监听到globalData中值的变化？
 *  3、如果在app.js执行登录部分的代码，由于时序问题，如何处理其他页面请求时未获取到身份识别标记的情况。（session，userid等）。（大意是：怎么能够保证其他页面请求是在登录之后？）

## 知识点 ##

有经验的同学可能一下子就看出来了，这其实说的是同一个东西，那就是Object.defineproperty()这个方法。  
下面我来尝试回答一下：  
第一题：小程序中并没有Page.watch()方法，但其实这里面试官的要问的东西就是第二题的题目，也就是属性监听器。

第二题：由于要监听到globalData中的值的变化，所以一般要在globalData改变时回调一个方法。例如我们监听一个name属性，大致代码如下：

// app.js中
    //app.js
    App({
      onLaunch: function () {
        let that = this
        // 在这里用定时器模拟网络请求的过程
        setTimeout(function(){
          that.globalData.name = 'pxh'
        },3000) 
      },
     // 这里这么写，是要在其他界面监听，而不是在app.js中监听，而且这个监听方法，需要一个回调方法。
      watch:function(method){
        var obj = this.globalData;
        Object.defineProperty(obj,"name", {
          configurable: true,
          enumerable: true,
          set: function (value) {
            this._name = value;
            console.log('是否会被执行2')
            method(value);
          },
          get:function(){
          // 可以在这里打印一些东西，然后在其他界面调用getApp().globalData.name的时候，这里就会执行。
            return this._name
          }
        })
      },
      globalData: {
        userInfo: null,
        _name:'msr'
      }
    })
    
    
    // 然后在index.js中的声明周期中实现
    onLoad: function (options) {
        let that = this;
        getApp().watch(that.watchBack)
      },
      watchBack: function (name){
        console.log(22222);
        console.log('this.name==' + name)
      }

看看执行效果（可以看到，我们在其他界面完美实现了监听到globalData的变化）

![Image 1][]

image.png

第三题：emmm。第二题的答案就是第三题的答案啦。我们可以在index.js中的回调方法中再进行网络请求，请求需要识别身份的资源。  
  
作者：甚时跃马归来  
链接：https://www.jianshu.com/p/8d1c4626f9a3  
来源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

**你可能感兴趣的**

*  [黑科技！Fundebug支持网页录屏!][Fundebug 1]
 *  [Async/Await替代Promise的6个理由][Async_Await_Promise_6]
 *  [30个极大提高开发效率的VS Code插件][30_VS Code]
 *  [10个JavaScript难点][10_JavaScript]
 *  [2018前端工程师成长路线图][2018]
 *  [Source Map入门教程][Source Map]
 *  [2018年最值得关注的30个Vue开源项目][2018_30_Vue]
 *  [10个最佳ES6特性][10_ES6]
 *  [重新思考单元测试][Link 1]
 *  [不要争了！技术选择没那么重要][Link 2]

[Fundebug]: https://www.fundebug.com/
[Image 1]: 
[Fundebug 1]: https://blog.fundebug.com/2018/05/21/fundebug_release_black_tech_replay/
[Async_Await_Promise_6]: https://blog.fundebug.com/2017/04/04/nodejs-async-await/
[30_VS Code]: https://blog.fundebug.com/2018/07/24/vs-extensions/
[10_JavaScript]: https://blog.fundebug.com/2017/07/17/10-javascript-difficulties/
[2018]: https://blog.fundebug.com/2018/09/04/2018-frontend-roadmap/
[Source Map]: https://blog.fundebug.com/2017/03/13/sourcemap-tutorial/
[2018_30_Vue]: https://blog.fundebug.com/2018/05/29/30-amazing-vuejs-open-source/
[10_ES6]: https://blog.fundebug.com/2017/08/21/10-best-es6-feature/
[Link 1]: https://blog.fundebug.com/2017/12/20/rethinking-unit-test/
[Link 2]: https://blog.fundebug.com/2018/07/19/technology-selection-is-not-critical/