詳解小程序如何改變onLoad的執(zhí)行時(shí)機(jī)

更新時(shí)間：2019年11月01日 14:24:49 作者：binnng

這篇文章主要介紹了詳解小程序如何改變onLoad的執(zhí)行時(shí)機(jī)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

也許在小程序所有生命周期里，我們用的最多的就是 onLoad，一大堆代碼都要在初始化的時(shí)候執(zhí)行。

很多時(shí)候，初始化的代碼是每個(gè)頁(yè)面共用的，比如獲取用戶(hù)信息、獲取定位等：

Page({
 onLoad() {
  this.userData = getUserData()
  wx.getLocation({
   type: 'wgs84',
   success (res) {
    // 業(yè)務(wù)代碼
    // ...
   }
  })
 }
 // ...
})

久而久之，每個(gè)頁(yè)面的 js 里都是如上的重復(fù)代碼。如果可以先執(zhí)行完通用的初始化代碼，再執(zhí)行每個(gè)頁(yè)面各自的 onLoad 多好，可惜小程序并沒(méi)有提供類(lèi)似的鉤子函數(shù)，那就自己來(lái)吧。

代理 onLoad

按照前幾篇的方法，可以代理原有的 onLoad 事件：

var originPage = Page

function MyPage(config) {
 this.lifetimeBackup = {
  onLoad: config.onLoad
 }
 config.onLoad = function(options) {
  // 自定義代碼
  // 公共的初始化代碼
  this.userData = getUserData()
   wx.getLocation({
   type: 'wgs84',
   success (res) {
    // 執(zhí)行 onLoad
    this.lifetimeBackup.onLoad.call(this, options)
   }
  })
 }
 
 // ...

 originPage(config)
}

當(dāng)然，實(shí)際開(kāi)發(fā)過(guò)程中的初始化代碼不可能這么少，可以用很多方式把它抽離出去，比如這樣：

// utils/initial.js
function initial(callback) {
 this.userData = getUserData()
 wx.getLocation({
  type: 'wgs84',
  success (res) {
   callback()
  }
 })
}
 
// utils/wx.js
var initial = require('./initial')
var originPage = Page

function MyPage(config) {
 this.lifetimeBackup = {
  onLoad: config.onLoad
 }
 config.onLoad = function(options) {
  initial(() => {
   this.lifetimeBackup.onLoad.call(this, options)
  })
 }
 // ...
 originPage(config)
}

也可以使用更多高級(jí)的方法抽離出去，比如 event bus 之類(lèi)的，就不多贅述。

看似很簡(jiǎn)單，但其實(shí)這樣忽略了一個(gè)問(wèn)題 —— 生命周期順序被打亂了！如果初始化方法里有異步代碼，那首先執(zhí)行的可能就是 onShow ，而不是約定的 onLoad。

恢復(fù)生命周期順序

為了保證生命周期函數(shù)能夠按順序執(zhí)行，可以先臨時(shí)清空生命周期函數(shù)，然后再依次執(zhí)行，如下代碼所示：

// utils/wx.js
const LIFETIME_EVENTS = ['onLoad', 'onShow', 'onReady']
var initial = require('./initial')
var originPage = Page


function MyPage(config) {
 LIFETIME_EVENTS.forEach((event) => {
  // 備份生命周期函數(shù)
  this.lifetimeBackup[event] = config[event]
  // 臨時(shí)清空
  config[event] = function() {}
 })
 config.onLoad = function(options) {
  initial(() => {
   // 依次執(zhí)行生命周期函數(shù)
   LIFETIME_EVENTS.forEach((event) => {
    this.lifetimeBackup[event].call(this, options)
   })
  })
 }
 // ...
 originPage(config)
}

注意上述代碼還是有問(wèn)題的，當(dāng)小程序業(yè)務(wù)跳走再返回或者切后臺(tái)到前臺(tái)時(shí)，onShow 無(wú)法正常觸發(fā)，因?yàn)楸辉O(shè)置為空函數(shù)了。

為了保證 onShow 等生命周期函數(shù)的后續(xù)正常運(yùn)行，需要在依次執(zhí)行完生命周期函數(shù)后，再把它們恢復(fù)到 config 下，這是必不可少的。完整代碼如下：

// utils/wx.js
const LIFETIME_EVENTS = ['onLoad', 'onShow', 'onReady']
var initial = require('./initial')
var originPage = Page


function MyPage(config) {
 LIFETIME_EVENTS.forEach((event) => {
  // 備份生命周期函數(shù)
  this.lifetimeBackup[event] = config[event]
  // 臨時(shí)清空
  config[event] = function() {}
 })
 config.onLoad = function(options) {
  initial(() => {
   // 依次執(zhí)行生命周期函數(shù)
   LIFETIME_EVENTS.forEach((event) => {
    this.lifetimeBackup[event].call(this, options)
    // 執(zhí)行完后，恢復(fù)過(guò)來(lái)
    config[event] = this.lifetimeBackup[event]
   })
  })
 }
 // ...
 originPage(config)
}

總結(jié)

代理了 onLoad 后，就可以手動(dòng)控制其執(zhí)行的時(shí)機(jī)，可以折騰的事情就多了很多。比如當(dāng)初始化函數(shù)需要執(zhí)行（請(qǐng)求）的內(nèi)容比較多，耗時(shí)比較長(zhǎng)時(shí)，可以統(tǒng)一給頁(yè)面增加一些 loading 提示等。總之，可以自由控制了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: