[笔记]小程序JS 变量的生命周期探究

序言

今天闲逛”小程序开发社区”,无意中看到有一个同行贴出了以下的一段代码。

https://developers.weixin.qq.com/s/mqa4fHme7ZnX

从A页面当中跳转到B页面,点击按钮后,再返回上一页就不能触发按钮对应的事件了。

探究代码

第一次渲染

第一次渲染成功时,用户点击setData测试,按钮能正常触发事件(按钮内容变成setData成功),点击”点击另外打开当前页面”按钮之后,跳转到新的页面。

跳转到第二个页面

此时nodeid发生变化,证实跳转到了新的页面。此时点击左上角的返回按钮后,原来的setData按钮无法触发事件。

分析输出

从代码中我们很容易就能分析出,第一次渲染成功时,that和this指向的页面nodeid应该是acf9ce91,当我们跳转到第二个页面时,此时的that和this就变成了bd622626。

此时神奇的事情就发生了,当我们点击返回按钮回到上一个页面,我们就能看到that的输出值依然是 bd622626 ,但this的输出值就变回了 acf9ce91.

返回第一个页面

由此我的一个想法是,跳转页面只会初始化一个新的页面实例,而不是重新运行这个JS文件.

证明想法

辅助代码

为了证明跳转页面后不是重新运行这个JS文件的想法,我在Page构造器的外部增加了如下的代码.

但我重新渲染页面时,console页面成功输出了2

证明第一次渲染时,小程序是运行过这个JS文件的。但当我们点击跳转到新的页面时,2没有继续出现,此时我认为小程序在新的页面当中,小程序是没有运行过这个JS文件的。

查阅文档

小程序为了实现对视图层标签的管控,开发了一套内置的框架”Exparser框架”。在该框架当中,页面的渲染是基于Exparser框架提供的Page和Component构造器的注入的数据的。

文档链接:https://developers.weixin.qq.com/ebook?action=get_post_info&token=935589521&volumn=1&lang=zh_CN&book=miniprogram&docid=0000aac998c9b09b00863377251c0a

暂时性结论

按照我的个人理解,启动的时候,小程序就已经提前把页面的模板注册好了。如果后面再次访问该页面时,仅仅是会基于页面模板创建出新的页面实例。也就是只有Page()构造器里面定义的data,在同一个页面下,实例与实例之间是独立的,但是Page外部定义的变量是共用的

后续

如果未来有能力的话,希望可以反编译一下小程序的基础库,从源码正向来理解小程序页面渲染的流程。

引用

  1. 教程|《小程序开发指南》
  2. 同一page页面重复打开时,页面js里声明的变量会互相污染?

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注