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

序言

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

从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构造器的注入的数据的。

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

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