来扯点ionic3[3] 页面的生命周期事件,也就是凡间所说的钩子
首先要做一个诚挚的道歉,作为大四狗,因为升学的事情,断更两个月,所以要感谢各位仁慈的读者没有脱粉(好像也就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,观察控制台输出了什么。
可以得出以下结论:
- 构造函数在ionViewDidLoad之前被触发
- ionViewDidLoad只在第一次进入页面时触发
- 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[3] 页面的生命周期事件,也就是凡间所说的钩子
来扯点ionic3[3] 页面的生命周期事件,也就是凡间所说的钩子的更多相关文章
- [转]来扯点ionic3[2] 页面一线牵 珍惜这段缘
本文转自:https://www.jianshu.com/p/de40aeb3d371 往期传送门 来扯点ionic3[0] 吹完牛再入门也不迟 来扯点ionic3[1] 创建一个新页面 上一 ...
- 重新想象 Windows 8 Store Apps (70) - 其它: 文件压缩和解压缩, 与 Windows 商店相关的操作, app 与 web, 几个 Core 的应用, 页面的生命周期和程序的生命周期
[源码下载] 重新想象 Windows 8 Store Apps (70) - 其它: 文件压缩和解压缩, 与 Windows 商店相关的操作, app 与 web, 几个 Core 的应用, 页面的 ...
- 【Framework】深入研究Asp.net页面的生命周期
介绍 Asp.net是微软.Net战略的一个组成部分.它相对以前的Asp有了很大的发展,引入了许多的新机制.本文就Asp.net页面的生命周期向大家做一个初步的介绍,以期能起到指导大家更好.更灵活地操 ...
- 与众不同 windows phone (27) - Feature(特性)之搜索的可扩展性, 程序的生命周期和页面的生命周期, 页面导航, 系统状态栏
原文:与众不同 windows phone (27) - Feature(特性)之搜索的可扩展性, 程序的生命周期和页面的生命周期, 页面导航, 系统状态栏 [索引页][源码下载] 与众不同 wind ...
- WEB页面的生命周期,DOMContentLoaded,load,beforeunload,unload
简言 理解WEB页面的生命周期,文档加载事件及顺序对WEB开发有十分的重要意义.如果不理解,在元素未加载就提前操作元素,则得不到想要的结果.而如果页面完全加载完成后,再进行操作,则又会影响用户体验. ...
- asp.net 页面生命周期事件详细
(1)请求页面:页请求发生在页生命周期开始之前. (2)开始:在开始阶段,将设置页属性,如Request和Response.在此阶段,页还将确定请求是回发请求还是新请求,并设置IsPostBack属性 ...
- ASP.NET -- WebForm -- 页面生命周期事件
ASP.NET -- WebForm -- 页面生命周期事件在页生命周期的每个阶段中,页将引发可运行您自己的代码进行处理的事件. 1. PreInit: 使用该事件来执行下列操作: 检查 IsPos ...
- ASP.NET一个页面的生命周期
在学习ASP.NET页面生命周期前,需要先了解之前的ASP.NET的基本运行机制,在理解ASP.NET基本运行机制原理后,下面将介绍ASP.NET的生命周期中,页面从创建到处理结束的过程中ASP.NE ...
- JSP页面的生命周期
JSP页面的生命周期:我们假设要访问的jsp页面是index.jsp.首先,用户发出请求index.jsp:服务器会判断是否是第一次请求:如果是的话,JSP引擎会把该JSP文件转换成为一个Servle ...
随机推荐
- MongoDB数据库的下载安装及配置方法
MongoDB安装与配置步骤 MongoDB数据库之安装篇 # 1 下载MongoDB数据库 1.打开浏览器,登录"https://www.mongodb.com/try/download/ ...
- Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑
$(function () { var currYear = (new Date()).getFullYear(); var opt={}; //opt.date = {preset : 'date' ...
- docker 搭建php 开发环境 添加扩展redis、swoole、xdebug
docker-compose搭建lnmp 先决条件 首先需要安装docker 安装docker-compost 1.创建lnmp工作目录 #创建三个目录 mkdir lnmp && c ...
- dedeCMS自定义dede标签
在include/taglib文件夹中新建文件hlh.lib.php,其中hlh也就是你标签的名字,function的名字也必须跟文件名对应,固定格式lib_标签名,如lib_hlh,本例子以调取文章 ...
- Java——spring中session的获取
获得session public static HttpServletRequest getSession(){ return ((ServletRequestAttributes) RequestC ...
- phpcms 2008 变量覆盖漏洞
一. 启动环境 1.双击运行桌面phpstudy.exe软件 2.点击启动按钮,启动服务器环境 二.代码审计 1.双击启动桌面Seay源代码审计系统软件 3.点击新建项目按钮,弹出对画框中选择(C:\ ...
- Python 局域网主机存活扫描
#! python # -*- coding: utf-8 -*- __author__ = 'Deen' import os import threading import argparse # 从 ...
- C249: 'DATA': SEGMENT TOO LARGE“解决方法 | keilC51设置编译模式:SMALL,COMPACT,LARGE
"Keil Cx51编译器提供三条编译模式控制命令:SMALL,COMPACT,LARGE,它们对变量存储器空间的影响如下. SMALL:所有变量都被定义在8051单片机的片内RAM中,对这 ...
- 手把手带你使用Paint in 3D和Photon撸一个在线涂鸦画板
Paint in 3D Paint in 3D用于在游戏内和编辑器里绘制所有物体.所有功能已经过深度优化,在WebGL.移动端.VR 以及更多平台用起来都非常好用! 它支持标准管线,以及 LWRP.H ...
- 有序全排列c++实现(递归)
1 #include <iostream> 2 #include <algorithm> 3 #include <iterator> 4 #include < ...