预渲染+骨架屏

背景

这个插件是基于prerenderer预渲染插件改造而来

原理和大概流程

1. 在rollup打包完成的closeBundle回调函数中去执行预渲染

2. 初始化一个预渲染器去管理整个生命周期，在初始化的过程中会会启动一个express本地服务器去托管打包项目的静态资源，同时用中间件去做接口代理

3. 启动一个无头浏览器加载要预渲染的页面，等待页面渲染完成，因为不清楚什么时候回渲染完成，所有有2种处理方式，一种是事件派发，一种是固定等待时间，然后动态加载骨架屏插件，以当前文件路径动态创建require，然后resolve骨架屏插件包的路径，读取骨架屏插件的dist目录中的打包文件，把插件包的js代码注入页面中，然后开始生成骨架屏

4. clone根元素，覆盖老的APP元素上，同时隐藏APP元素，开始遍历整个DOM树，采用广度优先遍历处理元素，如果不在视口内，则删除元素，处理背景色和阴影

5. 比较麻烦的是处理文本，

   • 第一要处理行间距效果，通过背景颜色渐变+backgroundSize和repeat
   • 第二是块级元素的单行文本长度问题，得用mockspan元素测量出文本的实际渲染长度，动态算出文字块宽度

6. 输出带有骨架屏的HTML

不足之处

1. 动态组件水合问题
2. 接口数据问题
3. 打包时间长

桥接包

背景

该项目是为了响应安全合规要求，客户端移除对MPaaS商业框架的依赖，所以自研桥接包

原理

采用jsbridge api 注入的方式(类似于jsonp)实现。首先客户端有一个map对象维护整个桥接的调用和在window上绑定回调方法，每次桥接发起都会存储到map中，key是桥接方法名+时间戳作为callbackId，value是桥接的回调，H5直接调用APP注入的postmessage方法发起桥接，APP执行结束后会调用window上绑定的回调，传入返回值和callbackId，H5会通过callbackId拿到回调执行，成功后清理map

祥龙祝福和官网

1. ScrollTrigger.create和clip-path根据滚动进度来动态裁剪

2. 可以使用clip-path+position:absolute覆盖来动态给车模换肤

3. clip-path动态变化时必须使用同一单位和节点数一致，否则动画会突变

4. gsap.timeline可以动态拼接点击动画

5. 变速红包雨还是使用帧动画比较方便

脚手架

背景

该项目采用了nest相关技术栈，同时通过对通用能力进行抽离开发了基于nest通用模块的脚手架，为后期搭建后端服务提供了一键生成的能力

通用能力

• 多环境配置
• 全局异常过滤器
• 采用了winston日志模块，做14天的轮动
• 通过拦截器统一响应格式
• 在管道里基于类型的参数校验
• 数据库和typeorm数据库迁移，通过请求数据库比对来生成迁移文件
• 路由守卫中基于角色的鉴权，在拦截路由守卫时通过反射获取路由方法名生成权限，然后通过查询数据库来匹配
• Redis缓存、邮件服务、接口文档

脚手架原理

1. npm create会执行以create开头的npm包，去bin字段去查找脚本
2. 解析参数
3. 查看目录是否存在，如果存在，则提示是否覆盖，如果确认覆盖，则深度优先遍历删除文件，再删除目录
4. 初始化package.json文件
5. 获取模版路径，渲染模版，采用深度优先遍历，如果是静态文件，直接复制，如果是动态文件，如package.json则直接合并，其它的采用handlebars模版渲染引擎去渲染，在遍历中动态导入模块获取要渲染的数据，key为文件名，value为数据
6. 渲染handlebars模版

样式适配插件

单位换算 在设计稿750显示大小和在设计稿780显示的未知大小进行同比换算

vue-router原理

初始化时先递归遍历传入的routes数组,解析path路径为正则表达式，将其转换为一个一维数组和一个map对象，初始化一个响应式路由route对象表示当前路由信息，包含params、query、name、path，用当前路经对matchers数组正则匹配，获取匹配到的matcher以及父级组成matched数组，通过provide把当前的路由信息全局注入，在route-view组件中通过inject获取当前路由信息、然后递归注入深度depth，默认值为0，然后把当前路由信息中的matched组件数组根据深度depth依次渲染出来

• 微前端 待续
• 组件库 待续
• 性能指标 指标发送 待续
• react 待续