小编给大家分享一下微信开发之解密与思考伸出小程序运行时方案,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
2020年3月,暨支持编译时方案之后,伸出小程序发布了支持运行时方案的版本。截至目前,伸出仍是业界唯一一个同时支持编译时和运行时方案的小程序开发框架。具体如下:
介绍运行时方案之前,我们再回顾下什么是编译时方案。顾名思义,编译时方案侧重于编译,这其中的代表框架是芋头v2。x。其通过静态编译的方式,将JSX转换为小程序的模板语言(即WXML/AXML等),再辅以轻量级的运行时JS代码,抹平小程序生命周期和反应生命周期的差异,使用户能够以熟悉的反应DSL进行小程序开发.Rax的编译时方案原理与芋头v2。x类似,关于实现细节,可以参考之前的文章递交转小程序链路原理解析(一)及伸展小程序编译时方案原理解析。区别于编译时方案,运行时方案侧重在运行时实现渲染能力,不依赖静态编译,因此几乎没有语法限制,这也是其最大的特点。下面就来看一下运行时方案实现的原理。
小程序的底层实现实际上也是基于网络技术,但是反映至开发者层面,与网络却又大相径庭。在小程序中,逻辑层和视图层隔离,逻辑层通过唯一的<代码> setData 方法将数据传递至视图层触发渲染,视图层则通过事件的方式触发逻辑层代码,其架构如下图所示。相比Web开发时开发者可以通过JS调用浏览器提供的DOM API/BOM随心所欲操作渲染内容,小程序的架构更加封闭也更安全,但也意味着网络代码无法直接在小程序上运行。
对于现代的前端框架(反应/Vue)来说,底层基本都是通过调用DOM API来创建视图。而小程序的视图层模板是需要开发者事先写好的,这意味着动态创建DOM的方式在小程序中不被允许。但是,小程序的自定义组件具有的“自引”用特性为动态创建DOM打开了突破口。所谓自引用,就是自定义组件支持使用自己作为子节点,也就意味着通过递归引用的方式,我们能够构造任意层级和数量的DOM树。
举例来说,假设一个小程序自定义组件元素的WXML模板如下所示:
注意到,元素在模板中递归引用了自身,并通过条件判断终止递归,那么,当逻辑层通过<代码> setData> 最终呈现出来的视图便成了: 通过这种方式，我们巧妙地实现了在 WXML 模板固定的情况下，根据传入的 Rax 的运行时方案脱胎自 kbone——微信官方推出的小程序与 web 端同构解决方案。kbone 的设计原理可以参考其官网介绍，简单总结就是通过在逻辑层模拟 DOM/BOM API，将这些创建视图的方法转换为维护一棵 VDOM 树，再将其转换成对应 熟悉 Rax 的同学应该知道，为了支持跨端，Rax 有 driver 的设计。实际上，我们完全可以针对小程序端再编写一个 driver，根据上述原理实现其接口 API 即可。但我们最后的选择还是通过更底层的模拟 BOM/DOM API 来完成了整个渲染机制。这么做的考量是，第一，基于 kbone 开发，这是最快的一套方案，小程序端的 driver 只需复用 web 端的 driver-dom 即可，毕竟底层的 setData 数据来动态渲染视图的能力。而这，也正是运行时方案能够诞生的基础。基本原理
setData 的数据，最后通过预置好的模板递归渲染出实际视图。从 DOM API 到维护 VDOM 树的过程基本原理并不复杂，createElement/appendChild/insertBefore/removeChild 等对应着基本的数据结构的操作。微信开发之解密与思考伸出小程序运行时方案
