天天看點

小程式學習--observer函數的應用(元件中的業務)

需求是這樣的 就是建構月份的元件中,月份小于10月的時候 顯示的數字都是一個位數,需要轉換成兩位數,

比如8月份是8 ,那就要轉換為08 ,同理可得 其他低于十月份的月份也是要這樣做:

打開元件的js檔案

接下來看下代碼:

小程式學習--observer函數的應用(元件中的業務)

這個函數的意義在于,當我們改變值的時候,微信小程式會主動調用這個函數,往這個函數傳值,也就是這三個參數:

newVal,oldVal,changedPath 代碼的講解都在注釋中。

需要注意的是,我們通過判斷月份的值選擇加0,并指派到一個變量中,再把這個變量指派到渲染到頁面的變量時候,

不能和properties下的對象名字相同,為什麼?因為不能在observer函數中去改變屬性值,會出現無限遞歸的現象,也就是死循環

在該檔案的data部分增加一個值:——index

---------------------

小程式學習--observer函數的應用(元件中的業務)

先來感受一下代碼,報錯報的簡直紮心。

小程式學習--observer函數的應用(元件中的業務)

總結下原因:observer函數是在data發生改變時小程式主動調用的,在observer函數内setData時又再次改變了properties的值,observer函數再次調用,不停的循環……無限遞歸調用……于是記憶體耗盡。

那麼問題來了,為啥type為Number時不會發生記憶體洩漏?

本質上就是因為properties值根本沒變。當外部改變index值為A(假如),觸發observer函數時,函數内部将傳進來的值進行拼串後,由于值的類型設定為Number,拼串後的值0A會按照數字解析成A,是以進入函數内部後這個值繞了一圈還是沒變,是以不會無限遞歸調用observer.

解決辦法:

看到記憶體洩漏、遞歸這些字眼是不是就怕怕的?莫方(說給自己聽)。

既然observer内部改變properties内部資料會産生問題,那麼,咱們就不改變呗!曲線救國。在data裡設定一個變量_index,把拼串後的值給到_index就好啦!注意在wxml中也要把綁定的資料改為{{_index}}。完美~

代碼如下:

小程式學習--observer函數的應用(元件中的業務)

最後!!!千萬不要嘗試在observer函數裡改變properties的值!!!