来扯点ionic3[3] 页面的生命周期事件,也就是凡间所说的钩子

0.202字数 1618阅读 18992

往期传送门
来扯点ionic3[0] 吹完牛再入门也不迟
来扯点ionic3[1] 创建一个新页面
来扯点ionic3[2] 页面一线牵 珍惜这段缘

首先要做一个诚挚的道歉,作为大四狗,因为升学的事情,断更两个月,所以要感谢各位仁慈的读者没有脱粉(好像也就50个粉丝)。这一节,我们延续上一节制作的页面,来讨论声明周期钩子的事情。

以我的经验来看,多数同学是知道这个概念的。如果不太了解,那你肯定知道浏览器在加载完一个网页时,会触发一个onload事件,平时我们用window.onload或者jquery中的$(document).load()方法去定义一个网页加载完成时应该做一些什么。

在一个APP中,这类的事件要更为丰富一些。很多时候,你要在用户看到页面之前,就要为他们把一些事情做好,最常见的就是从服务器上拉取数据;亦或是在他们要离开一个页面时,进行一些处理。

1.认识ionic的生命周期钩子

截至ionic 3.8.0版本,框架提供了8个钩子函数,它们分别会在页面生命周期的各个阶段被触发,我们来简单了解一下。

1.1 ionViewDidLoad

页面加载完成触发,这里的“加载完成”指的是页面所需的资源已经加载完成,但还没进入这个页面的状态(用户看到的还是上一个页面)。

需要注意的是它是一个很傲娇的钩子,全程只会调用一次,即第一次进入页面时被调用,此后你无论怎样进进出出它都冷冷清清凄凄惨惨戚戚不再理你了。除非你把它的后台杀了,重新进入这个软件(在网页调试的时候按刷新也是可以的)。

因此这个钩子适合你做一些一次性的处理,比如从服务器拉取用户数据存到缓存中。

1.2 ionViewWillEnter

字面意义理解就是“我要进来了”的那一刻,这个时候页面刚刚开始切换。你可以在这时对页面的数据进行预处理,这个钩子是每次都会调用的。

1.3 ionViewDidEnter

当这个钩子被触发的时候,用户已经进入到新页面了(页面处于激活状态),同样也是每次都会调用。

说到这我不得不插一句,ionic对钩子的命名对广大中国学生真是友好啊,一个will一个did就把事情解决了。不像外边某些妖艳(误)的框架,一堆ready, update, complied, destory什么的,记一次忘一次。(当然这是一个玩笑,组件的命名跟框架的运行机制是息息相关的)

1.4 ionViewWillLeave

页面准备 (is about to) 离开时触发,这时用户刚刚触发了返回按钮或者相关的事件。

1.5 ionViewDidLeave

页面已经 (has finished) 离开时触发,页面处于非激活状态了。

1.6 ionViewWillUnload

页面中的资源即将被销毁时触发,此刻你是否会猜测这个钩子与ionViewDidLoad一样,只会被触发一次呢?

1.7 试验

我们直接利用上一节制作的页面,对钩子的加载做一个测试。
上一节,我们实现了利用按钮从HomePage跳转到TestPage这样一个过程,现在我们为TestPage添加上述的六个钩子,通过控制台观察它们的调用情况。

这样来使用一个钩子

页面主题部分代码如下

export class TestPage {

    title:string;

    constructor(public navCtrl:NavController,public params:NavParams,public alertCtrl:AlertController){
        this.title=this.params.get('title');
        console.log('触发构造函数');
    }

    popPage(){
        this.navCtrl.pop();
    }

    //沟崽子们
    ionViewDidLoad(){
        console.log('触发ionViewDidLoad');
    }

    ionViewWillEnter(){
        console.log('触发ionViewWillEnter');
    }

    ionViewDidEnter(){
        console.log('触发ionViewDidEnter');
    }

    ionViewWillLeave(){
        console.log('触发ionViewWillLeave');
    }

    ionViewDidLeave(){
        console.log('触发ionViewDidLeave');
    }

    ionViewWillUnload(){
        console.log('触发ionViewWillUnload');
    }

}

注意,我在构造函数里,也加了一句测试语句。打开Serve调试,点击按钮,进入TestPage,观察控制台输出了什么。

第一次进入页面

返回到首页,观察控制台输出了什么。

第一次离开页面

再一次进入和离开TestPage,观察控制台输出了什么。

第二次进入和离开

可以得出以下结论:

  1. 构造函数在ionViewDidLoad之前被触发
  2. ionViewDidLoad只在第一次进入页面时触发
  3. ionViewWillUnload会在每次离开页面后触发

2.还有两个守卫钩子

我开头提到ionic提供了8个钩子,而我只介绍了6个。前6个钩子有个共性,他们的返回值都是void,即在相应时刻调用,不会返回任何的信息。

而另外两个钩子有些不太一样,它们是可以返回布尔值的ionViewCanEnter和ionViewCanLeave。
瞧瞧,刚刚讲了时态,现在开始讲情态动词了。如果前6个钩子是页面对用户来访的一种被动反应,那么现在,页面具有了意识,可以准许你来或者准许你走,啊,页面从此站起来了!

这两个钩子,更多扮演着权限控制的角色,最近有个很新潮的术语叫守卫(Guard),这个守卫怎么理解呢,你可以把它理解成小区的看门大爷、和蔼可亲的班主任,以及古代杏花楼里的姿态万千的老鸨2333。

既然我们已经知道它能返回布尔值,那么就来试一试吧。因为我们的程序里没有业务逻辑,这里就用一个时间的API来判断吧,我写这篇文章的时候是晚上11点,那么就用getHours来帮助我们测试。

//和蔼可亲的班主任
    ionViewCanEnter() :boolean {
        if(new Date().getHours()>=8){
            console.log('怎么的呢,你看看现在几点了,你那么舒服咋不在家里接着睡吶,给我门外站着去!');
            return false;
        }
        return true;
    }

//杏花楼姿态万千的老鸨
    ionViewCanLeave() :boolean {
        if(new Date().getHours()>=22){
            console.log('哎呀公子,你看都这么晚了,最近外面风声那么紧,不如就在我们这儿留宿吧,你看姑娘们都舍不得你回去呢');
            return false;
        }
        return true;
    }
动图:访问页面被拦截
控制台打印的信息

同理,在页面中想离开,如果 ionViewCanLeave 返回了false,就会被阻拦。

动图:返回操作被拦截
控制台打印的信息

3 总结

咳咳,不废话了,综上所述,ionic具有如下的生命周期钩子

  • ionViewDidLoad 第一次调用 返回void
  • ionViewWillEnter 每次调用 返回void
  • ionViewDidEnter 每次调用 返回void
  • ionViewWillLeave 每次调用 返回void
  • ionViewDidLeave 每次调用 返回void
  • ionViewWillUnload 每次调用 返回void
  • ionViewCanEnter 每次调用 返回boolean
  • ionViewCanLeave 每次调用 返回boolean

下一章: 来扯点ionic3[4] 结构型指令和列表渲染

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
  • 往期传送门来扯点ionic3[0] 吹完牛再入门也不迟来扯点ionic3[1] 创建一个新页面 上一次我们完成了一...
  • 假如明天是世界末日 我会跪倒在上帝面前 感谢他赐予我最珍贵的你 你的花容月貌使我动心 你的落落大方让我倾心 假如明...
  • 和几个小伙伴在咖啡厅听一个优秀的学长分享,除了收获一些干货,更多的是也清理了自己的内心,一下子脑袋也清醒了。 在我...