编译时是将开发者编写的统一语法（比如vue，react）的代码，转换成各个目标平台能够识别的代码。主要工作包括：

语法转换
1. jsx/vue => 小程序的wxml等：这是核心的转换。框架会将自己的模板语法通过AST技术解析，然后根据目标平台的模板语法规则生成对应的模板文件。
2. 例如写了一段通用代码hello，在小程序端编译时，它会被转换成hello，在vue中则会被编译成
  hello
样式处理：
1. css=>wxss：对css文件进行后缀名转换和内容适配。例如将px转换为小程序的rpx，或者处理一些样式的兼容性补全。
JS处理
1. API映射：将框架统一的API调用转换为目标平台的API调用。这是通过babel插件或者自研的转换器完成的。例如，你调用Taro.request()，在编译成小程序时，就会被转换成wx.request()，在编译成浏览器访问时，可能会被转换为fetch或者XMLHttpRequest。
2. 组件映射：将框架内置的组件比如转换为小程序以及web端的
文件结构重组
1. 小程序要求特定的文件结构（比如app.js,app.json,page.wxml,page.wxss,page.js）。编译时会根据源代码的页面和组件结构，生成符合目标小程序规范的文件目录和配置文件（比如app.json里需要注册所有页面）

运行时是框架在代码实际执行时进行协调和适配的阶段。它像一个翻译官，在程序运行期间协调开发者代码与原生平台之间的差异。主要工作包括：

实现核心标准：提供一个符合web标准或者自定义标准的运行环境
1. 在小程序环境里模拟的一个迷你版的Browser/DOM环境。
组件树和生命周期管理：运行时维护着整个组件树的虚拟表示（也就是虚拟DOM），并负责触发组件的生命周期（如onLoad，onReady），将这些生命周期映射到Vue/React组件的mount，updated等钩子
API代理：在运行时，框架统一的API其实就是一个代理函数。它会根据当前的运行环境，动态地去调用真正的原生API（wx.reequest,featch）。
渲染器：这是运行时的最核心的部门。负责将框架维护的虚拟DOM树渲染到具体的平台视图上。
1. 对于web：使用ReactDOM.render()或Vue的渲染函数直接渲染到浏览器DOM。
2. 对于小程序：渲染器会将VDOM树递归遍历，计算每一步的setData数据，然后调用小程序的Page或Component的setData方法，将数据映射到小程序的模板中，从而更新视图。

总结：跨端框架的核心原理是“编译时转换”+“运行时适配”的组合。

npm run dev:h5
npm run dev:pc
npm run dev:all

编译时：将开发者编写的一套代码，通过编译工具转换成各个目标平台能识别的文件格式和语法结构，例如jsx变成wxml
运行时：在代码执行时，框架提供一个统一的中间层，或者叫运行时的库。一方面模拟浏览器环境，另一方面代理所有API调用，抹平各平台的差异性。还有最关键的渲染环节：框架在内存中维护一套虚拟DOM，然后通过平台特定的渲染器将虚拟DOM更新到实际界面，从而实现“一套代码，多端运行”。
为何离职？错误的回答：朋友推荐我参与AI大模型的开发，我就过来了。正确的回答：当时为了更好的发展，选择去北京，但是23年年中娃快要出生了，综合考虑之后就回武汉，然后在朋友的推荐之下加入到了这家主推AI/大模型的公司，公司经营了3年，效益不佳，于今年年中拆散武汉分部，于是我失业了

1.3 面试-京东面试

results matching ""