欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序如何監(jiān)聽(tīng)全局變量

 更新時(shí)間:2021年04月09日 09:05:12   作者:Vegetable_dog  
這篇文章主要給大家介紹了關(guān)于微信小程序如何監(jiān)聽(tīng)全局變量的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

最近工作上遇到一個(gè)問(wèn)題,有個(gè)全局變量 red_heart,因?yàn)樗诤芏嗟胤接玫剑?dāng)它發(fā)生改變了,用到的地方也要改變。但是原生小程序并沒(méi)有像Vue這種相關(guān)的做法。所以我就想自己實(shí)現(xiàn)一個(gè)全局變量改變,用到這個(gè)變量的地方也重新渲染。

開始吧

首先全局變量里肯定要先有這個(gè) red_heart

globalData: {
    red_heart:0,
  },

然后要在onLaunch方法里給全局變量加一個(gè)Proxy代理。

Proxy很好理解,懂得都懂。

this.globalData = new Proxy(this.globalData, {
      get(target, key){
        return target[key];
      },
      set:(target, key, value)=>{
        if(key === "red_heart"){
          this.globalDep.RedHeartDep.notifuy()
        }
        return Reflect.set(target, key, value);
      }
    });

主要看set方法里面有一個(gè)this.globalDep.RedHeartDep.notifuy(),這個(gè)是啥。這是我在全局創(chuàng)建的一個(gè)Dep,簡(jiǎn)稱依賴收集。

代碼

globalDep:{
    RedHeartDep:{
      subs:[],
      addSub(watch){
        this.subs.push(watch)
      },
      removeWatch(id){
        this.subs = this.subs.filter((item)=>{
          return item.id != id
        })
      },
      notifuy(){
        setTimeout(()=>{
          this.subs.forEach(w=>w.update())
        },0)
      }
    }
  }

subs是一個(gè)數(shù)組,用來(lái)收集依賴,addSub和removeWatch,notifuy是用來(lái)告訴這個(gè)東西要去更新了。

那現(xiàn)在還有一個(gè)問(wèn)題,就是這個(gè)依賴在哪里添加呢,當(dāng)然是在用到的地方添加,就是組件創(chuàng)建的時(shí)候。

附上組件js全部代碼:

const app = getApp()
Component({
  properties: {

  },
  data: {
    red_heart:0
  },
  lifetimes:{
    attached(){
      let watch = {
        id:this.__wxExparserNodeId__,
        update:()=>{
          this.setData({
            red_heart:app.globalData.red_heart
          })
        }
      }
      app.globalDep.RedHeartDep.addSub(watch)
      app.globalData.red_heart = app.globalData.red_heart
    },
    detached(){
      app.globalDep.RedHeartDep.removeWatch(this.__wxExparserNodeId__)
    }
  },
  methods: {
    handClick(){
      app.globalData.red_heart++
      console.log(app.globalData)
    }
  }
})

在attached上添加依賴,在組件銷毀的時(shí)候也不要忘記把依賴刪除,這個(gè)id是小程序的一個(gè)編譯id,直接拿來(lái)用了。
害就這樣了就做好啦!

總結(jié)

到此這篇關(guān)于微信小程序如何監(jiān)聽(tīng)全局變量的文章就介紹到這了,更多相關(guān)小程序監(jiān)聽(tīng)全局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 移動(dòng)端刮刮樂(lè)的實(shí)現(xiàn)方式(js+HTML5)

    移動(dòng)端刮刮樂(lè)的實(shí)現(xiàn)方式(js+HTML5)

    本篇文章主要介紹了移動(dòng)端刮刮樂(lè)的實(shí)現(xiàn)方法以及實(shí)現(xiàn)代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
    2017-03-03
  • js實(shí)現(xiàn)3D照片墻效果

    js實(shí)現(xiàn)3D照片墻效果

    這篇文章主要介紹了js實(shí)現(xiàn)3D照片墻效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-10-10
  • javaScript動(dòng)態(tài)添加Li元素的實(shí)例

    javaScript動(dòng)態(tài)添加Li元素的實(shí)例

    下面小編就為大家分享一篇javaScript動(dòng)態(tài)添加Li元素的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-02-02
  • 前端解析包含圖片的excel文件完整步驟及代碼示例

    前端解析包含圖片的excel文件完整步驟及代碼示例

    作為一名開發(fā)者,大家在開發(fā)過(guò)程中是不是經(jīng)常遇到各種各樣的文件,比如xlsx、word、ppt等辦公類型的文件格式,這篇文章主要給大家介紹了關(guān)于前端解析包含圖片的excel文件的相關(guān)資料,需要的朋友可以參考下
    2024-07-07
  • javascript實(shí)現(xiàn)文本框標(biāo)簽驗(yàn)證的實(shí)例代碼

    javascript實(shí)現(xiàn)文本框標(biāo)簽驗(yàn)證的實(shí)例代碼

    這篇文章主要介紹了javascript實(shí)現(xiàn)文本框標(biāo)簽驗(yàn)證的實(shí)例代碼,需要的朋友可以參考下
    2018-10-10
  • 前端用echarts繪制含有多個(gè)分層的波形圖關(guān)鍵代碼

    前端用echarts繪制含有多個(gè)分層的波形圖關(guān)鍵代碼

    每次實(shí)現(xiàn)各種圖表時(shí),總會(huì)用到echarts,不得不說(shuō)確實(shí)是一個(gè)非常好用的開源庫(kù),這篇文章主要給大家介紹了關(guān)于前端用echarts繪制含有多個(gè)分層的波形圖的相關(guān)資料,需要的朋友可以參考下
    2024-03-03
  • bootstrap自定義樣式之bootstrap實(shí)現(xiàn)側(cè)邊導(dǎo)航欄功能

    bootstrap自定義樣式之bootstrap實(shí)現(xiàn)側(cè)邊導(dǎo)航欄功能

    bootstrap自帶的響應(yīng)式導(dǎo)航欄是向下滑動(dòng)的,有時(shí)滿足不了個(gè)性化的需求,需要做一個(gè)類似于android drawerLayout 側(cè)滑的菜單,這就是我要實(shí)現(xiàn)的bootstrap自定義側(cè)滑菜單。接下來(lái)通過(guò)本文給大家介紹bootstrap實(shí)現(xiàn)側(cè)邊導(dǎo)航欄功能,感興趣的朋友一起看看吧
    2018-09-09
  • 最新評(píng)論