zyq努力每一天
获得徽章 1
#青训营笔记创作活动#
2月16日 day31
今日学习：AST（抽象语法树）以及AST的广泛应用
收获：
1.过程：
Parsing(解析过程)：这个过程要经词法分析、语法分析、构建AST（抽象语法树）一系列操作；
Transformation（转化过程）：这个过程就是将上一步解析后的内容，按照编译器指定的规则进行处理，形成一个新的表现形式；
Code Generation（代码生成）：将上一步处理好的内容转化为新代码
2月16日 day31
今日学习：AST（抽象语法树）以及AST的广泛应用
收获：
1.过程：
Parsing(解析过程)：这个过程要经词法分析、语法分析、构建AST（抽象语法树）一系列操作；
Transformation（转化过程）：这个过程就是将上一步解析后的内容，按照编译器指定的规则进行处理，形成一个新的表现形式；
Code Generation（代码生成）：将上一步处理好的内容转化为新代码
展开
评论
点赞
#青训营笔记创作活动#
2月15日 day30
今日学习：Qiankun原理——JS沙箱是怎么做隔离的
收获：
qiankun 一共有 3 种沙箱：
SnapshotSandbox：记录 window 对象，每次 unmount 都要和微应用的环境进行 Diff
LegacySandbox：在微应用修改 window.xxx 时直接记录 Diff，将其用于环境恢复
ProxySandbox：为每个微应用分配一个 fakeWindow，当微应用操作 window 时，其实是在 fakeWindow 上操作
要和这些沙箱结合起来使用，qiankun 会把要执行的 JS 包裹在立即执行函数中，通过绑定上下文和传参的方式来改变 this 和 window 的值，让它们指向 window.proxy 沙箱对象，最后再用 eval 来执行这个函数。
2月15日 day30
今日学习：Qiankun原理——JS沙箱是怎么做隔离的
收获：
qiankun 一共有 3 种沙箱：
SnapshotSandbox：记录 window 对象，每次 unmount 都要和微应用的环境进行 Diff
LegacySandbox：在微应用修改 window.xxx 时直接记录 Diff，将其用于环境恢复
ProxySandbox：为每个微应用分配一个 fakeWindow，当微应用操作 window 时，其实是在 fakeWindow 上操作
要和这些沙箱结合起来使用，qiankun 会把要执行的 JS 包裹在立即执行函数中，通过绑定上下文和传参的方式来改变 this 和 window 的值，让它们指向 window.proxy 沙箱对象，最后再用 eval 来执行这个函数。
展开
评论
点赞
#青训营笔记创作活动#
2月14 day29
今日学习：package.json 配置完全解读
收获：
1. package.json 里的内容远不止如此，比如 semver 规范，入口文件，项目依赖等都还有很多值得深入的内容，认识他们只是第一步。
2.lint-staged 是用于对 git 的暂存区的文件进行操作的工具；
sideEffects显示设置某些模块具有副作用，用于 webpack 的 tree-shaking 优化。
browserslist设置项目的浏览器兼容情况
2月14 day29
今日学习：package.json 配置完全解读
收获：
1. package.json 里的内容远不止如此，比如 semver 规范，入口文件，项目依赖等都还有很多值得深入的内容，认识他们只是第一步。
2.lint-staged 是用于对 git 的暂存区的文件进行操作的工具；
sideEffects显示设置某些模块具有副作用，用于 webpack 的 tree-shaking 优化。
browserslist设置项目的浏览器兼容情况
展开
评论
点赞
#青训营笔记创作活动#
2月13日 day28
今日学习：读 Tapable 源码的意义
收获：
1.Tapable 的内部以特别巧妙的方式实现了发布订阅模式，这之中会有非常多的知识点：比如懒编译或者叫动态编译，关于类与继承抽象类的面向对象思想以及 this 指向的升华等等...
2.有在执行 call 方法时才会去动态生成执行函数，如果不执行则不处理（懒编译或者叫动态编译）。
2月13日 day28
今日学习：读 Tapable 源码的意义
收获：
1.Tapable 的内部以特别巧妙的方式实现了发布订阅模式，这之中会有非常多的知识点：比如懒编译或者叫动态编译，关于类与继承抽象类的面向对象思想以及 this 指向的升华等等...
2.有在执行 call 方法时才会去动态生成执行函数，如果不执行则不处理（懒编译或者叫动态编译）。
展开
评论
点赞
赞了这篇文章
#青训营笔记创作活动#
2月12日 day27
今日学习：什么时候使用 Map 或胜过 Object
收获：
1.Object.create(null) 来解决原型污染攻击，它可以生成一个不继承Object.prototype的对象。
2.Map 比 Object 快，除非有小的整数、数组索引的键，而且它更节省内存。
如果你需要一个频繁更新的 hash map，请使用 Map；如果你想一个固定的键值集合（即记录），请使用Object，并注意原型继承带来的陷阱。
2月12日 day27
今日学习：什么时候使用 Map 或胜过 Object
收获：
1.Object.create(null) 来解决原型污染攻击，它可以生成一个不继承Object.prototype的对象。
2.Map 比 Object 快，除非有小的整数、数组索引的键，而且它更节省内存。
如果你需要一个频繁更新的 hash map，请使用 Map；如果你想一个固定的键值集合（即记录），请使用Object，并注意原型继承带来的陷阱。
展开
评论
点赞
#青训营笔记创作活动#
2月11日 day26
今日学习：Islands 架构原理和实践
收获：
1.Islands 实现原理
Astro和Fresh
2.实践：
Build Time 分为两个阶段: renderToString 之前、renderToString 之后。
renderToString 之前会打两份 bundle:
SSR bundle: 用于 renderToString
Client bundle: 客户端 Runtime 代码，用于激活页面
3.Islands 架构的适用性
与框架无关
VitePress 的特殊优化
2月11日 day26
今日学习：Islands 架构原理和实践
收获：
1.Islands 实现原理
Astro和Fresh
2.实践：
Build Time 分为两个阶段: renderToString 之前、renderToString 之后。
renderToString 之前会打两份 bundle:
SSR bundle: 用于 renderToString
Client bundle: 客户端 Runtime 代码，用于激活页面
3.Islands 架构的适用性
与框架无关
VitePress 的特殊优化
展开
评论
点赞
#青训营笔记创作活动#
2月10日 day25
今日学习： 前端的 docker 使用指南
收获：
1.Docker 技术的三大核心概念，分别是：镜像 Image、容器 Container、仓库 Repository。
2.通过 docker compose up 启动容器。
3.了解 docker 常见操作，如构建镜像、运行容器、进入容器执行命令
如何进入 docker 容器中进行调试
使用 docker 启动 nginx 容器，并在本地浏览器某端口可直接打开
如何得知启动 nginx 容器的 IP 端口
了解 docker 原理，如何模拟 docker 隔离环境及限制资源
Dockerfile、Image、Container 有何区别
Dockerfile 中 CMD 与 RUN 有何区别
2月10日 day25
今日学习： 前端的 docker 使用指南
收获：
1.Docker 技术的三大核心概念，分别是：镜像 Image、容器 Container、仓库 Repository。
2.通过 docker compose up 启动容器。
3.了解 docker 常见操作，如构建镜像、运行容器、进入容器执行命令
如何进入 docker 容器中进行调试
使用 docker 启动 nginx 容器，并在本地浏览器某端口可直接打开
如何得知启动 nginx 容器的 IP 端口
了解 docker 原理，如何模拟 docker 隔离环境及限制资源
Dockerfile、Image、Container 有何区别
Dockerfile 中 CMD 与 RUN 有何区别
展开
评论
点赞
#青训营笔记创作活动#
2月9日 day24
今日学习：一次搞懂数据大屏适配方案 (vw vh、rem、scale)
收获：
1.发大屏主要是两方面的工作：
大屏之关键-前期的自适应适配
根据 ui 稿绘制图表，调细节
2.屏幕变化后，图表自动调整字体、间距、位移等，此处参考上面 vm vh 的实现方式即可
2月9日 day24
今日学习：一次搞懂数据大屏适配方案 (vw vh、rem、scale)
收获：
1.发大屏主要是两方面的工作：
大屏之关键-前期的自适应适配
根据 ui 稿绘制图表，调细节
2.屏幕变化后，图表自动调整字体、间距、位移等，此处参考上面 vm vh 的实现方式即可
展开
评论
点赞
#青训营笔记创作活动#
2月8日 day23
今日学习：20个开源的前端低代码项目
收获：
1.低代码是基于可视化和模型驱动理念，结合云原生与多端体验技术，它能够在多数业务场景下实现大幅度的提效降本，为专业开发者提供了一种全新的高生产力开发范式。
2.Appsmith：
github.com
3.LowCodeEngine：github.com
4.Amis：github.com/baidu/amis
2月8日 day23
今日学习：20个开源的前端低代码项目
收获：
1.低代码是基于可视化和模型驱动理念，结合云原生与多端体验技术，它能够在多数业务场景下实现大幅度的提效降本，为专业开发者提供了一种全新的高生产力开发范式。
2.Appsmith：
github.com3.LowCodeEngine：
github.com4.Amis：github.com/baidu/amis
展开
评论
点赞
#青训营笔记创作活动#
2月7日 day22
今日学习：如何构造高性能的树状结构
收获：
1.扁平树状结构
2.一般都会有一个item专门来表示根节点。
3.每一项都可以当成是子节点，他们各自都拥有一个parentId，而根节点的parentId为空代表它没有父节点，他们的各自的childrenIds存储了他们各自item的子节点id。
4.Map新增一条子项数据，直接放在数据结构末尾即可，然后我们再给对应的父节点的childrenIds中push这个子项的id即可
5.在Map形式我们拿到想修改的id后就可以直接修改。
6.Map形式中我们直接delete对应id的项即可，如果该项有父节点，我们可以在对应parentId项中的childrenIds移除对应的id即可。
2月7日 day22
今日学习：如何构造高性能的树状结构
收获：
1.扁平树状结构
2.一般都会有一个item专门来表示根节点。
3.每一项都可以当成是子节点，他们各自都拥有一个parentId，而根节点的parentId为空代表它没有父节点，他们的各自的childrenIds存储了他们各自item的子节点id。
4.Map新增一条子项数据，直接放在数据结构末尾即可，然后我们再给对应的父节点的childrenIds中push这个子项的id即可
5.在Map形式我们拿到想修改的id后就可以直接修改。
6.Map形式中我们直接delete对应id的项即可，如果该项有父节点，我们可以在对应parentId项中的childrenIds移除对应的id即可。
展开
评论
点赞
#青训营笔记创作活动#
2月6日 day21
今日学习：现代包管理器的深度思考——pnpm
收获：
1.pnpm 两个优势在于:
包安装速度极快；
磁盘空间利用非常高效。
它的安装也非常简单。
2.pnpm 内部使用基于内容寻址的文件系统来存储磁盘上所有的文件
3.支持 monorepo
4.安全性高
2月6日 day21
今日学习：现代包管理器的深度思考——pnpm
收获：
1.pnpm 两个优势在于:
包安装速度极快；
磁盘空间利用非常高效。
它的安装也非常简单。
2.pnpm 内部使用基于内容寻址的文件系统来存储磁盘上所有的文件
3.支持 monorepo
4.安全性高
展开
评论
点赞
#青训营笔记创作活动#
2月5日 day20
今日学习：纯前端实现羊了个羊
收获：
1.最基础的地图只关乎当前层，假设当前需要判定是否放置卡片的坐标为 [i, j]，那么下面四个位置就不能存在卡片，否则就会出现同层卡片重叠
2.每次位置和随机数判定合格，我们应该实际放置一张卡片，一个实际的 dom。然后根据卡片的 x、y、z、宽高 值设置实际位置
2月5日 day20
今日学习：纯前端实现羊了个羊
收获：
1.最基础的地图只关乎当前层，假设当前需要判定是否放置卡片的坐标为 [i, j]，那么下面四个位置就不能存在卡片，否则就会出现同层卡片重叠
2.每次位置和随机数判定合格，我们应该实际放置一张卡片，一个实际的 dom。然后根据卡片的 x、y、z、宽高 值设置实际位置
展开
评论
点赞
#青训营笔记创作活动#
2月4日 day19
今日学习：浏览器调试技巧
收获：
1.console.time和console.timeEnd用于计算代码段的执行时间，有助于性能调试和判断。
2.console.assert用于判断空值或者false逻辑还是很有用处的。
3.breakpoint
4.设置 DOM 断点：
单击Elements选项卡
找到要设置断点的元素
右键单击该元素
将鼠标悬停在Break on，然后选择Subtree modifications、Attributes modifications或Node removal
2月4日 day19
今日学习：浏览器调试技巧
收获：
1.console.time和console.timeEnd用于计算代码段的执行时间，有助于性能调试和判断。
2.console.assert用于判断空值或者false逻辑还是很有用处的。
3.breakpoint
4.设置 DOM 断点：
单击Elements选项卡
找到要设置断点的元素
右键单击该元素
将鼠标悬停在Break on，然后选择Subtree modifications、Attributes modifications或Node removal
展开
评论
点赞