用户5762202905567
获得徽章 1
- #青训营笔记创作活动#
2月14日 打卡day32
# 前端实现docx、pdf格式文件在线预览
docx的实现需要使用[docx-preview](
link.juejin.cn)插件。
pdf的预览需要使用[PDFJS](link.juejin.cn)这个插件,通过将文件流解析写到canvas上实现预览效果。
因为将多种文件渲染放在一个文件中，所以处理函数需要做映射处理，执行对应格式的文件渲染。展开评论点赞 - #青训营笔记创作活动#
2月13日 打卡day31
# 前端工程化基石 -- AST（抽象语法树）以及AST的广泛应用
抽象语法树（Abstract Syntax Tree，AST）是源代码语法结构的一种抽象表示，它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。在代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等场景均有广泛的应用。
通过讲解整体设计和具体编码实现，进行手写编译器。
介绍了AST的广泛应用。展开评论点赞 - #青训营笔记创作活动#
2月11日 打卡day30
# Qiankun原理——JS沙箱是怎么做隔离的
### qiankun的三大沙箱
1. SanpshotSandbox：快照沙箱。**把主应用的 `window` 对象做浅拷贝，将 `window` 的键值对存成一个 `Hash Map`。之后无论微应用对 `window` 做任何改动，当要在恢复环境时，把这个 `Hash Map` 又应用到 `window` 上就可以了。**
2. LegacySandbox：**通过监听对 `window` 的修改来直接记录 Diff 内容**。
3. ProxySandbox：
- 把当前 `window` 的一些原生属性（如`document`, `location`等）拷贝出来，单独放在一个对象上，这个对象也称为 `fakeWindow`
- 之后对每个微应用分配一个 `fakeWindow`
- 当微应用修改全局变量时：
- 如果是原生属性，则修改全局的 `window`
- 如果不是原生属性，则修改 `fakeWindow` 里的内容
- 微应用获取全局变量时：
- 如果是原生属性，则从 `window` 里拿
- 如果不是原生属性，则优先从 `fakeWindow` 里获取
### 隔离原理
1. **把要执行 JS 代码放在一个立即执行函数中**，且函数入参有 `window`, `self`, `globalThis`
2. 给这个函数 **绑定上下文** `window.proxy`
3. 执行这个函数，并 **把上面提到的沙箱对象 `window.proxy` 作为入参分别传入**
展开评论点赞 - #青训营笔记创作活动#
2月10日 打卡day29
# package.json 配置完全解读
package.json 是前端每个项目都有的 json 文件，位于项目的根目录。许多脚手架在搭建项目时也会自动帮我们自动初始化好 package.json。
## 常见配置
### 描述配置
主要是项目的基本信息，包括名称，版本，描述，仓库，作者等，部分会展示在 npm 官网上。
1. name
2. version
3. repository
4. description
5. keywords
6. homepage
7. bugs
8. license
9. author
## 文件配置
包括项目所包含的文件，以及入口等信息。
1. files
2. type
3. main
4. browser
5. module
6. exports
7. workspaces
## 脚本配置
1. scripts：指定项目的一些内置脚本命令，这些命令可以通过 npm run 来执行。
2. config： 用于设置 scripts 里的脚本在运行时的参数。
## 依赖配置
项目可能会依赖其他包，需要在 package.json 里配置这些依赖的信息。
1. dependencies：项目可能会依赖其他包
2. devDependencies：开发依赖。
3. peerDependencies：同伴依赖。
4. optionalDependencies：可选依赖。
5. peerDependenciesMeta
6. bundleDependencies：打包依赖。
7. overrides：可以重写项目**依赖的依赖，及其依赖树下某个依赖**的版本号，进行包的替换。
## 发布配置
主要是和项目发布相关的配置。
1. private
2. publishConfig
## 系统配置
1. engines
2. os
3. cpu
## 第三方配置
1. types或者typings
2. unpkg
3. jsdelivr
4. browserslist
5. sideEffects
6. lint-staged
展开评论点赞 - #青训营笔记创作活动#
2月9日 打卡day28
# 【中级/高级前端】为什么我建议你一定要读一读 Tapable 源码？
Tapable是一个类似于 Node.js 中的 EventEmitter 的库，但它更专注于自定义事件的触发和处理。通过 Tapable 我们可以注册自定义事件，然后在适当的时机去执行自定义事件。
Tapable可按照同步/异步分类，也可以按照执行机制分类。
介绍了一些Hook的基本使用：
1. SyncHook
2. SyncBailHook
3. SyncWaterfallHook
4. SyncLoopHook
5. AsyncParellelHook
6. AsyncParallelBailHook
7. AsyncSeriesHook
8. AsyncSeriesBailHook
9. AsyncSeriesWaterfallHook
并介绍了具体实现。展开评论点赞 - #青训营笔记创作活动#
2月8日 打卡day27
在 JavaScript 中，什么时候使用 Map 或胜过 Object
在 Hash Map 中使用对象最明显的缺点是，对象只允许键是字符串和 symbol。任何其他类型的键都会通过 toString 方法被隐含地转换为字符串。更重要的是，使用对象做 Hash Map 会造成混乱和安全隐患。
Object会造成不必要的继承、名称冲突、次优的人机工程学。
Map 支持任何数据类型的键。Map 在用户定义的和内置的程序数据之间提供了一个干净的分离，代价是需要一个额外的 Map.prototype.get 来获取对应的项。
Map 也提供了更好的人机工程学。与 Object 相比，Map 为各种常见任务提供了专门的API。在大多数情况下，Map 要比 Object 快。
展开评论点赞 - #青训营笔记创作活动#
2月7日 打卡day26
# Islands 架构原理和实践
MPA(Multi-page application) 即多页应用，是从服务器加载多个 HTML 页面的应用程序。每个页面都彼此独立，有自己的 URL。当单击 a 标签链接导航到另一个页面时，浏览器将向服务器发送请求并加载新页面。例如，传统的模板技术如JSP、Python、Django、PHP、Laravel 等都是基于 MPA 的框架，包括目前比较火的 Astro 也是采用的 MPA 方案。
SPA(Single-page application) 即单页应用，它只有一个不包含具体页面内容的 HTML，当浏览器拿到这份 HTML 之后，会请求页面所需的 JavaScript 代码，通过执行 JavaScript 代码完成 DOM 树的构建和 DOM 的事件绑定，从而让页面可以交互。如现在使用的大多数 Vue、React 中后台应用都是 SPA 应用
介绍了Island的实现原理以及实践分享。展开评论点赞 - #青训营笔记创作活动#
2月6日 打卡day25
写给前端的 docker 使用指南
本文章介绍了Docker技术，并介绍Docker的安装、从Docker启动vue项目、底层原理简介、进阶技巧总结，为前端人员使用docker技术提供了使用指南。
展开评论点赞 - #青训营笔记创作活动#
2月5日 打卡day24
今日学习
实现方案
第一点：获得 rem 的基准值
第二点：动态的计算html根元素的font-size
第三点：屏幕变化，图表自适应
屏幕变化后，图表自动调整字体、间距、位移等展开评论点赞 - #青训营笔记创作活动#
2月4日 打卡day23
# 推荐20个开源的前端低代码项目
低代码是基于可视化和模型驱动理念，结合云原生与多端体验技术，它能够在多数业务场景下实现大幅度的提效降本，为专业开发者提供了一种全新的高生产力开发范式。几个值得学习和使用的低代码开源项目：
1. Appsmith
2. LowCodeEngine
3. Amis
4. tmagic-editor
5. dooring-electron-lowcode
6. vite-vue3-lowcode
7. shida
8. quark-h5
9. gods-pen
10. luban-h5
11. mometa
12. h5-factory
13. steedos-platform
14. lz-h5-edit
15. tefact
16. fast-poster
17. openDatav
18. mall-cook
19. form-generator
20. vjdesign展开评论点赞
link.juejin.cn