从开放平台小程序 谈小程序的多端原理

是洋柿子啊
140 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第18天，点击查看活动详情

从开放平台小程序 谈小程序的多端原理

1. 什么是开放平台

开放平台（Open Platform） 在软件行业和网络中，开放平台是指软件系统通过公开其应用程序编程接口（API）或函数（function)来使外部的程序可以增加该软件系统的功能或使用该软件系统的资源，而不需要更改该软件系统的源代码。

举个例子： 1665922157052.png

image.png 在我们的某个业务的业务流量已经到了一个很客观的情况下，我们希望可以通过流量为前提的业务进行引流的情况，就会做出这样的拓展，就类似微信的小程序一样

2. 小程序的基本原理

image.png 如图这是一个很简单的小程序的页面代码，但是这个很简单的页面是如何在 ios、Android、ide 环境下进行运行呢？

答案就是： ast 树转换，小程序中将页面中的：

  • 模板、样式等转换成了 AST 树，根据不同的环境选用对应的渲染内核
  • js\json 则转化成不同的 逻辑层 ast，让他可以再不同的引擎中运行。 image.png
  • 模板层： 将模板转换成 '类Html'的AST，再裁剪对应js框架模板的 ESTree
  • 逻辑层：将js逻辑代码转换成ESTree，在裁剪成对应js框架生命周期的api和内部时间方法
  • 样式层：基于css内日直接复制操作或稍作兼容处理

image.png

3. 什么是 EStree

  • 通过特定规范的JSON代码来秒睡 JavaScript代码的语法结构或 AST
  • 目前社区公共讨论和维护规范：github.com/estree/

3.1 ESTree 和 Babel的关系

  • Babel 是JavaScript代码转换成 ESTree 语法树的一种解析器
  • 社区有很多根据 ESTree 规范实现的 JavaScript解析器
    • Babel
    • Esprima
    • Acorn
    • Espree

3.2 ESTree处理多段编译的优势

  • 减少语法错误：编译JS成ESTree，或EStrr复原jds可以检查和抛出语法错误
  • 灵活裁剪代码：可以根据代码的ESTree的JSON结构，自定义裁剪目标代码，编译成运行结果代码
avatar
文章
阅读
粉丝