概念 ​

微前端是一种架构风格，它将一个大型的前端应用拆分成多个独立的微应用，这些微应用可以独立开发、部署和维护。微前端的目标是将一个复杂的前端应用拆分成多个小的、可独立开发和部署的应用，从而提高开发效率和应用的可维护性。

在实际场景中，我们常常需要再当前主应用，嵌入某个子应用，就不必自己开发，子应用可能有别的业务部门开发，技术栈亦不一致。

大纲 ​

• pnpm 特点（幽灵依赖，磁盘复用，软硬链接）
• workspace
• changeset
• monorepo 打包
• catalog
• 常用命令

css 3d ​

api ​

transform-style ​

声明 3D 空间，一般作用在容器盒子上

rotate[XYZ]时，正值为顺时针，负值为逆时针；左手定则。

TinyMCE三种模式 ​

1. 经典模式：基于iframe的沙箱模式，总是显示操作栏且拥有大量的操作按钮；样式上并非所见即所得（iframe的原因），更适合展示性要求不高的场景，比如表单项。
2. 内联模式：基于普通块元素为容器（div），实现阅读视图和编辑视图的合并，所见及所得，不总是显示菜单栏；更适合展示性较强的场景，比如文章内容。
3. 无干扰模式，似乎只是比内联模式少了菜单栏，使用上下文菜单，操作更加的轻巧（maybe）。

install & setup ​

npm i tinymce

概述 ​

View Transitions Api View Transitions API 提供了一种机制，可以在更新 DOM 内容的同时，轻松地创建不同 DOM 状态之间的动画过渡。同时还可以在单个步骤中更新 DOM 内容。 ps:不同dom之间的视图过渡

常见的过渡/动画创建方式 ​

1. transition/keyframes （ 补间动画，帧动画 ）
2. requestAnimationFrame （ js 动画，每帧回调 ）
3. Web Animation Api（ 和css动画一样在合成层渲染，js更好的干预和控制 ）
4. View Transitions Api （ 两个视图或者dom之间的过渡 ）

signature_pad ​

npm i signature_pad

为什么使用 Js 实现瀑布流 ​

瀑布流的本质：获取获取最小高度的列，向其中添加图片，使列之间保持一个尽可能接近的高度。

能否使用 Css 实现？flex ? grid ? ​

不能，css 并不能计算出列的最小高度，所以必须使用 js 实时计算。

Steps ​

1. 在 window resize的时候计算列的数量
2. 缓存一个 < 列 ，高度 > 的对象，每次塞图片，更新对象的列高度
3. 从缓存 map 中找到最小高的列，向其中塞入图片
4. 在 窗口 resize 的时候， 对已有元素重排
5. 触底加载更多图片