微信小程序重写Page的生命周期

背景

在完成一个倒计时的方法时，由于使用到了定时器，需要在页面的onUnload生命周期将定时器给删除掉，但是由于是一个额外的js文件，在这个文件中拿不到onUnload的回调，于是想到了重写页面的生命周期这个方法，在此总结一下。

如何在重写页面的生命周期？

1、示例

你现在需要封装一个倒计时的公共方法，你先创建了一个countdown.js文件，内容如下：

function countdown () {
    // 倒计时方法
}

倒计时一般都是使用定时器来进行实现的，当我们页面onUnload时都是需要去销毁这个定时器的，那么应该如何去销毁定时器呢？

由于我们是在countdown.js中生成的定时器，但是我们又需要在页面的onUnload去销毁定时器，这个时候就有小伙伴提出来解决办法了，可以暴露出销毁定时器的方法，然后在页面的onUnload去调用这个方法，就可以将定时器销毁了，这个解决办法是没问题的，但是是不是有一些复杂呢？又需要暴露出定时器的方法，又要使用者去onUnload调用，那么有没有办法可以在countdown.js中监听到页面的onUnload，直接在countdown.js文件中就将定时器销毁？

答案是：重写onUnload生命周期方法

2、重写onUnload生命周期

还是刚刚那个countdown.js,我们只需要加上这几句代码就可以了

1. 使用一个变量originUnload保存页面的onUnload
2. 将页面的onUnload重新赋值函数
3. 调用originUnload函数和你自己执行的方法

countdonw.js页面

function countdown ({ instance }) {
   // 倒计时方法
  const originUnload =  instance.onUnload
  instance.onUnload = (rest) => {
    originUnload.call(this,rest)
    // 自己执行的方法
    console.log(11111)
  }
}

页面的Page的index.js

import { countdown } from './countdown.js'

Page({

    onLoad () {
        countdown({ instance: this })
    }
})

通过这几个简单的步骤就能够实现在其他的js文件中实现对页面生命周期的重写，可以大大提高方法的适用性，能够做更多的工作，让方法更加健壮。

3、重写其他生命周期

可以通过上面的这几个步骤实现页面对所有生命周期的重写（除了onLoad，重写onLoad需要对Page这个函数重写），能够大大的提高代码的复用性。

最后

重写小程序生命周期，其实就是一个非常简单的闭包的运用，通过变量保存之前的函数方法（也就是页面中的方法），重新赋值生命周期函数时，执行之前的函数方法，再执行我们需要的方法，就能够实现在其他js文件中监听到页面的生命周期