4.7 .js文件的代码结构与Page页面的生命周期
到目前为止，我们还没有在页面的js文件中写过一行代码，是时候来学习一下小程序逻辑层代码的编写了。
如果开发者是使用3.2小节中介绍的快速新建页面文件的方法来创建的post页面，那么由开发工具生成的post.js文件内默认将包含代码清单4-11所示的代码。
页面js文件默认代码包含了我们可能使用到的代码结构，整个页面执行了一个Page({…})方法，参数是一个Object对象，用来指定页面的初始数据（data）、生命周期函数（on开头的函数）、事件处理函数等。
本节主要介绍页面的生命周期，关于data变量和其他的事件处理函数，后续章节再做详细介绍。
什么是页面的生命周期？如同人的成长需要分为出生、童年、青年、中年、老年一样，一个页面从创建到卸载，同样会经历以下5个周期：
• 加载
• 显示
• 渲染
• 隐藏
• 卸载
MINA框架分别提供了5个生命周期函数来监听这5个特定的生命周期，以方便开发者可以在这些特定的时刻执行一些自己的代码逻辑，它们分别是：
• onLoad 监听页面加载，一个页面只会调用一次。
• onShow 监听页面显示，每次打开页面都会调用。
• onReady 监听页面初次渲染完成，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
• onHide 监听页面隐藏。
• onUnload 监听页面卸载。
我们可以做一个小测试，来了解生命周期函数的触发时机。向post.js的5个生命周期函数中添加以下代码：
保存代码，并将开发工具切换到【调试】→【Console】面板，编译看看Console的输出，如图4-17所示。
图4-17 生命周期函数的执行顺序
可以看到，一个页面要正常显示，必须经历以上3个生命周期：加载、显示、渲染。注意这3个生命周期函数的执行顺序，首先是onLoad，其次是onShow，最后才是onReady。
这里要特别提醒各位开发者，onShow的执行时刻是在onReady之前的，但官方文档在编写时，将onReady放置在onShow之前（截止0.11.122100版本）。虽然只是顺序不同，但极容易让开发者误以为onReady是在onShow之前的，但这是不正确的。
那么onHide和onUnload呢？这两个函数的触发需要执行一些API的操作，比如当页面执行navigateTo方法或者使用小程序tab栏切换页面时会执行onHide函数；而当页面执行redirectTo或navigateBack的时候会执行onUnload函数。
除了以上5个生命周期函数外，还有以下3个小程序特定事件的处理函数：
• onPullDownRefresh 监听用户下拉动作的事件处理函数。
• onReachBottom 页面上拉触底事件的处理函数。
• onShareAppMessage 用户点击右上角分享。
开发者还可以添加任意的函数或数据到这个Page方法的Object参数中，在页面的函数中用this即可访问这些自定义函数或者数据。
关于onHide和onUnload以及3个特定事件的处理函数，我们将在后面介绍到导航、tab栏、刷新、分享等项目需求时，再具体演示和讲解。放在具体的示例里演示，效果远比用文字理论描述要好。
官方文档中，还给出了一个较为全面的Page实例生命周期图解，如图4-18所示。
我们大概可以看到整个图分为左右两侧，左侧是视图层，右侧是服务逻辑层。整个页面的生命周期都是围绕着这两个层来进行的。他们之间不是孤立的，而是有很多的事件与通知交互的。目前，我们所学的知识还不足以完全解释页面的整个生命周期。
我们所讲的5个生命周期函数就在图4-18右侧多次出现，如果仔细观察，会发现以下几个特点：
图4-18 页面生命周期图解
• onLoad、onShow和onReady确实是按照前面所讲到执行顺序依次执行。
• onLoad与onReady在整个页面的生命周期中只会执行1次，除非这个页面被执行了onUnload卸载掉了（卸载掉后这个页面的生命周期就结束了）。
• onHide与onShow在一次生命周期内可能会执行多次。
• 除了First Render第一次渲染，页面还有可能会Rerender再次渲染多次。数据更新会造成页面的重新渲染。开发者还要注意，小程序仅在第一次First Render完成后，提供了监听函数onReady，对于以后的Rerender并没有提供相应的监听函数。所以，onReady仅用来监听“第一渲染”完成。
现在无法看明白这张图是很正常的事情，开发者不需要太过于担心。正如官方文档中所说：“此图你不需要立马完全弄明白，不过以后它会有帮助”。笔者的建议是，当遇到问题或者业务需要时，再回过头来研究这张完整的生命周期图更有意义。
事实上，如果开发者只想单纯的开发业务项目，只需要理解5个生命周期函数发生的时机与意义即可。通过大量的编码，可以让经验来弥补一些知识上的缺陷，这就是所谓的熟能生巧。但如果开发者想去做一些与小程序编译相关的框架时，深入了解这张图就很有必要了。当然，无论你想做什么，能够完全看懂和理解这张图，自然是再好不过了。
我们会在后面的项目实践中，不断验证这些生命周期的特性，开发者只需要记得到时候回过头来看看即可。