获得徽章 1
8月14日 打卡day19
今日学习：前端工程化基石 -- AST（抽象语法树）
通过一句主谓宾标点的简单句例子表现AST的原理，简单易懂，一起来学习一下吧！
1、AST是源代码的抽象语法结构的树状表现形式，简单点就是一个深度嵌套对象，这个对象能够描述我们书写代码的所有信息
2、编译器执行过程
①Parsing(解析)：经过词法分析【用tokenizer(分词器)或者lexer(词法分析器)，将源码拆分成tokens】、语法分析【将tokens重新整理成语法相互关联的表达形式，称为中间层或者AST（抽象语法树）】、构建AST（抽象语法树）一系列操作；
②Transformation（转化）：对上一步解析后的内容，按照编译器指定的规则进行处理，形成一个新的表现形式【改写AST（抽象语法树）/生成新AST（抽象语法树）】；
③Code Generation（代码生成）：将上一步处理好的内容转化为新的代码；
通过tokenzier(分词器)函数【生成Token】==》定义parser函数，接收上一步处理好的tokens【生成AST】==》【遍历和访问】生成好的AST==》用转换器将刚生成的AST转化为【新的AST】==》 用新的AST，遍历其每一个节点，根据指定规则生成【最终代码】
3、后面就是代码实践，用文章形式完成吧
今日学习：前端工程化基石 -- AST（抽象语法树）
通过一句主谓宾标点的简单句例子表现AST的原理，简单易懂，一起来学习一下吧！
1、AST是源代码的抽象语法结构的树状表现形式，简单点就是一个深度嵌套对象，这个对象能够描述我们书写代码的所有信息
2、编译器执行过程
①Parsing(解析)：经过词法分析【用tokenizer(分词器)或者lexer(词法分析器)，将源码拆分成tokens】、语法分析【将tokens重新整理成语法相互关联的表达形式，称为中间层或者AST（抽象语法树）】、构建AST（抽象语法树）一系列操作；
②Transformation（转化）：对上一步解析后的内容，按照编译器指定的规则进行处理，形成一个新的表现形式【改写AST（抽象语法树）/生成新AST（抽象语法树）】；
③Code Generation（代码生成）：将上一步处理好的内容转化为新的代码；
通过tokenzier(分词器)函数【生成Token】==》定义parser函数，接收上一步处理好的tokens【生成AST】==》【遍历和访问】生成好的AST==》用转换器将刚生成的AST转化为【新的AST】==》 用新的AST，遍历其每一个节点，根据指定规则生成【最终代码】
3、后面就是代码实践，用文章形式完成吧
展开
评论
点赞
8月14日 打卡day19
今日学习：Qiankun原理——JS沙箱是怎么做隔离的
满满的知识点一起总结一下吧！
qiankun 有 SnapshotSandbox, LegacySandbox 和 ProxySandbox 这些沙箱
1、SnapshotSandbox快照沙箱：把主应用的 window 对象做浅拷贝，将 window 的键值对存成一个 Hash Map。之后无论微应用对 window 做任何改动，当要在恢复环境时，把这个 Hash Map 又应用到 window 上就可以了
2、LegacySandbox：通过监听对 window 的修改来直接记录 Diff 内容，只要对 window 属性进行设置，两种方法：
①新增属性：存到 addedMap 里
②更新属性：把原来的键值存到 prevMap，把新的键值存到 newMap
addedMap, prevMap 和 newMap 这三个变量能反推出微应用以及原来环境的变化
3、ProxySandbox：把当前 window 的一些原生属性拷贝出来，单独放在一个fakeWindow对象上，然后对每个微应用分配一个 fakeWindow
①当微应用修改全局变量时：
-是原生属性，则修改全局的 window
-不是原生属性，则修改 fakeWindow 里的内容
②当微应用获取全局变量时：
-是原生属性，则从 window 里拿
-不是原生属性，则优先从 fakeWindow 里获取
4、隔离原理
将函数入参 window, self, globalThis，提到的沙箱对象 window.proxy 分别传入
注意：此时，window.a 的 window 就不是全局 window 而是 fn 的入参 window
今日学习：Qiankun原理——JS沙箱是怎么做隔离的
满满的知识点一起总结一下吧！
qiankun 有 SnapshotSandbox, LegacySandbox 和 ProxySandbox 这些沙箱
1、SnapshotSandbox快照沙箱：把主应用的 window 对象做浅拷贝，将 window 的键值对存成一个 Hash Map。之后无论微应用对 window 做任何改动，当要在恢复环境时，把这个 Hash Map 又应用到 window 上就可以了
2、LegacySandbox：通过监听对 window 的修改来直接记录 Diff 内容，只要对 window 属性进行设置，两种方法：
①新增属性：存到 addedMap 里
②更新属性：把原来的键值存到 prevMap，把新的键值存到 newMap
addedMap, prevMap 和 newMap 这三个变量能反推出微应用以及原来环境的变化
3、ProxySandbox：把当前 window 的一些原生属性拷贝出来，单独放在一个fakeWindow对象上，然后对每个微应用分配一个 fakeWindow
①当微应用修改全局变量时：
-是原生属性，则修改全局的 window
-不是原生属性，则修改 fakeWindow 里的内容
②当微应用获取全局变量时：
-是原生属性，则从 window 里拿
-不是原生属性，则优先从 fakeWindow 里获取
4、隔离原理
将函数入参 window, self, globalThis，提到的沙箱对象 window.proxy 分别传入
注意：此时，window.a 的 window 就不是全局 window 而是 fn 的入参 window
展开
评论
点赞
8月13日 打卡day18
今日学习：package.json 配置完全解读
1、描述配置：项目的基本信息，包括名称，版本，描述，仓库，作者等
2、文件配置：项目所包含的文件，以及入口等信息
3、脚本配置：scripts项目启动打包等，config设置 scripts 里的脚本在运行时的参数
4、依赖配置：项目可能会依赖其他包，常见的有dependencies运行依赖、devDependencies开发依赖
5、发布配置：和项目发布相关的配置，private、publishConfig
6、系统配置：和项目关联的系统配置，如 node 版本或操作系统兼容性
7、第三方配置：一些第三方库/应用在进行某些内部处理时会依赖这些字段，使用它们时需要安装对应的第三方库
今日学习：package.json 配置完全解读
1、描述配置：项目的基本信息，包括名称，版本，描述，仓库，作者等
2、文件配置：项目所包含的文件，以及入口等信息
3、脚本配置：scripts项目启动打包等，config设置 scripts 里的脚本在运行时的参数
4、依赖配置：项目可能会依赖其他包，常见的有dependencies运行依赖、devDependencies开发依赖
5、发布配置：和项目发布相关的配置，private、publishConfig
6、系统配置：和项目关联的系统配置，如 node 版本或操作系统兼容性
7、第三方配置：一些第三方库/应用在进行某些内部处理时会依赖这些字段，使用它们时需要安装对应的第三方库
展开
评论
点赞
8月12日 打卡day17
今日学习：读一读 Tapable 源码
1、Tapable 的内部巧妙实现了发布订阅模式，如懒编译（动态编译），关于类与继承抽象类的面向对象思想以及 this 指向的升华等等
2、性质：更专注于自定义事件的触发和处理，可以注册自定义事件，然后在适当的时机去执行自定义事件
3、使用：①实例化钩子函数②注册事件③触发事件
4、同步/异步分类1+8：SyncHook
①SyncBaiHook：同步的、保险类型的 Hook
②SyncWaterFallHook：同步的、瀑布式类型的 Hook
③SyncLoopHook：同步、循环类型的 Hook
④AsyncParallelHook：异步并行、基本类型的 Hook
⑤AsyncParallelBailHook：异步并行、保险类型的 Hook
⑥AsyncSeriesHook：异步、串行类型的 Hook
⑦AsyncSeriesBailHook：异步串行、保险类型的 Hook
⑧AsyncSeriesWaterfallHook：异步串行、瀑布类型的 Hook
5、执行机制分类：
①Basic Hook : 基本类型钩子，执行每一个注册的事件函数，并不关心每个被调用的事件函数返回值如何
②Waterfall : 瀑布类型钩子，上一个函数的执行结果会成为下一个函数的参数
③Bail : 保险类型钩子，只要其中一个有结果了，后面的就不执行了
④Loop : 循环类型钩子，不停的循环执行事件函数，直到所有函数结果 result === undefined
今日学习：读一读 Tapable 源码
1、Tapable 的内部巧妙实现了发布订阅模式，如懒编译（动态编译），关于类与继承抽象类的面向对象思想以及 this 指向的升华等等
2、性质：更专注于自定义事件的触发和处理，可以注册自定义事件，然后在适当的时机去执行自定义事件
3、使用：①实例化钩子函数②注册事件③触发事件
4、同步/异步分类1+8：SyncHook
①SyncBaiHook：同步的、保险类型的 Hook
②SyncWaterFallHook：同步的、瀑布式类型的 Hook
③SyncLoopHook：同步、循环类型的 Hook
④AsyncParallelHook：异步并行、基本类型的 Hook
⑤AsyncParallelBailHook：异步并行、保险类型的 Hook
⑥AsyncSeriesHook：异步、串行类型的 Hook
⑦AsyncSeriesBailHook：异步串行、保险类型的 Hook
⑧AsyncSeriesWaterfallHook：异步串行、瀑布类型的 Hook
5、执行机制分类：
①Basic Hook : 基本类型钩子，执行每一个注册的事件函数，并不关心每个被调用的事件函数返回值如何
②Waterfall : 瀑布类型钩子，上一个函数的执行结果会成为下一个函数的参数
③Bail : 保险类型钩子，只要其中一个有结果了，后面的就不执行了
④Loop : 循环类型钩子，不停的循环执行事件函数，直到所有函数结果 result === undefined
展开
评论
点赞
8月11日 打卡day16
今日学习：Map 与 对象对比
1、Map 比 Object 快，更节省内存
2、三种类型key的测试对比string keys、integer keys、numeric keys
3、Object 没有提供足够的人机工程学
①Object 没有提供方便的API来获取 size
②iterate 循环遍历对象也有类似的复杂性
③clear 没有简单的方法来删除一个对象的所有属性
今日学习：Map 与 对象对比
1、Map 比 Object 快，更节省内存
2、三种类型key的测试对比string keys、integer keys、numeric keys
3、Object 没有提供足够的人机工程学
①Object 没有提供方便的API来获取 size
②iterate 循环遍历对象也有类似的复杂性
③clear 没有简单的方法来删除一个对象的所有属性
展开
评论
点赞
8月10日 打卡day15
今日学习：Islands 架构原理和实践
1、MPA 和 SPA
MPA：多页应用，每个页面都彼此独立，有自己的 URL
SPA：单页应用，只有一个没有具体页面内容的 HTML，当浏览器拿到该 HTML 后，会请求页面所需的 JS 代码，通过执行 JS 代码，完成 DOM 树的构建和 DOM 的事件绑定，从而让页面可以交互
2、 SSR/SSG 同构方案
MPA 和 SPA两者的结合，这类方案仍然会下载全量的客户端 JS 及执行全量的组件 Hydrate 过程，造成页面的首屏 TTI 劣化
由于页面中有时仍然不可避免的需要一些交互的逻辑，这就诞生了 Islands 架构
3、Islands 实现原理
①Astro 中，默认所有的组件都是静态组件
②Fresh基于 Preact 和 Deno 的全栈框架
今日学习：Islands 架构原理和实践
1、MPA 和 SPA
MPA：多页应用，每个页面都彼此独立，有自己的 URL
SPA：单页应用，只有一个没有具体页面内容的 HTML，当浏览器拿到该 HTML 后，会请求页面所需的 JS 代码，通过执行 JS 代码，完成 DOM 树的构建和 DOM 的事件绑定，从而让页面可以交互
2、 SSR/SSG 同构方案
MPA 和 SPA两者的结合，这类方案仍然会下载全量的客户端 JS 及执行全量的组件 Hydrate 过程，造成页面的首屏 TTI 劣化
由于页面中有时仍然不可避免的需要一些交互的逻辑，这就诞生了 Islands 架构
3、Islands 实现原理
①Astro 中，默认所有的组件都是静态组件
②Fresh基于 Preact 和 Deno 的全栈框架
展开
评论
点赞
#挑战每日一条沸点#
8月9日 打卡day14
今日学习：docker 使用指南
1、Docker 技术的三大核心概念，分别是：镜像 Image、容器 Container、仓库 Repository
2、安装 Docker步骤
3、使用Docker启动一个vue项目，及创建操作
4、进阶操作技巧
8月9日 打卡day14
今日学习：docker 使用指南
1、Docker 技术的三大核心概念，分别是：镜像 Image、容器 Container、仓库 Repository
2、安装 Docker步骤
3、使用Docker启动一个vue项目，及创建操作
4、进阶操作技巧
展开
评论
点赞
8月8日 打卡day13
今日学习：数据大屏适配方案
1、适配方案分析
①vw vh：将px按比例计算转为vw和vh
②scale：整体的等比缩放
③rem + vw vh： rem 基准值，动态计算html根元素的font-size， vw vh 动态计算字体、间距、位移等
2、转换公式
举例：一个宽 300px 和 200px 的 div ，以 vw 和 vh 为单位
vwDiv = (300px / 1920px ) * 100vw
vhDiv = (200px / 1080px ) * 100vh
3、scss实现全局样式
在vue.config.js里配置一下utils.scss的路径，就可以全局使用
今日学习：数据大屏适配方案
1、适配方案分析
①vw vh：将px按比例计算转为vw和vh
②scale：整体的等比缩放
③rem + vw vh： rem 基准值，动态计算html根元素的font-size， vw vh 动态计算字体、间距、位移等
2、转换公式
举例：一个宽 300px 和 200px 的 div ，以 vw 和 vh 为单位
vwDiv = (300px / 1920px ) * 100vw
vhDiv = (200px / 1080px ) * 100vh
3、scss实现全局样式
在vue.config.js里配置一下utils.scss的路径，就可以全局使用
展开
评论
点赞
8月7日 打卡day12
今日学习
认识了20个开源前端低代码项目，作者的动图能很形象的展示基本使用，收藏一波，慢慢研究一波
今日学习
认识了20个开源前端低代码项目，作者的动图能很形象的展示基本使用，收藏一波，慢慢研究一波
评论
点赞
8月5日 打卡day11
今日学习：构造高性能的树状结构
1、常见树状结构与扁平树状结构
①常见树状结构：嵌套的形式，每层数组中的item都会有一个children
②扁平树状结构：每个item都扁平化平铺在第一层，都有各自的parentId与childrenIds
2、两者父节点
①常见树状结构：没有专门的根节点
②扁平树状结构：有一个item专门来表示根节点
3、两者子节点
①常见树状结构：子节点都是在父节点的children数组下的每一项
②扁平树状结构：每一项都可以当成是子节点，各自拥有一个parentId
4、两者渲染
都是通过map进行遍历渲染
5、两者添加
①常见树状结构：需要先拿到这个父节点的key，对整个数组遍历找到对应的item拎出来push进他的children，然后重新构造一个新的数组对象
②扁平树状结构：不需要递归循环遍历整课树，先在Map新增一条子数据，直接放在数据结构末尾，然后再给对应的父节点的childrenIds中push这个子项的id即可
6、两者修改
①常见树状结构：根据key遍历找出该节点，然后修改，最后构造新的数组结构
②扁平树状结构：拿到想修改的id后，可以直接修改
7、两者删除
①常见树状结构：先遍历，再删除，最后构造新的数组
②扁平树状结构：直接delete对应id的项即可，如果删除项有父节点，可以在对应parentId中的childrenIds移除对应的id
今日学习：构造高性能的树状结构
1、常见树状结构与扁平树状结构
①常见树状结构：嵌套的形式，每层数组中的item都会有一个children
②扁平树状结构：每个item都扁平化平铺在第一层，都有各自的parentId与childrenIds
2、两者父节点
①常见树状结构：没有专门的根节点
②扁平树状结构：有一个item专门来表示根节点
3、两者子节点
①常见树状结构：子节点都是在父节点的children数组下的每一项
②扁平树状结构：每一项都可以当成是子节点，各自拥有一个parentId
4、两者渲染
都是通过map进行遍历渲染
5、两者添加
①常见树状结构：需要先拿到这个父节点的key，对整个数组遍历找到对应的item拎出来push进他的children，然后重新构造一个新的数组对象
②扁平树状结构：不需要递归循环遍历整课树，先在Map新增一条子数据，直接放在数据结构末尾，然后再给对应的父节点的childrenIds中push这个子项的id即可
6、两者修改
①常见树状结构：根据key遍历找出该节点，然后修改，最后构造新的数组结构
②扁平树状结构：拿到想修改的id后，可以直接修改
7、两者删除
①常见树状结构：先遍历，再删除，最后构造新的数组
②扁平树状结构：直接delete对应id的项即可，如果删除项有父节点，可以在对应parentId中的childrenIds移除对应的id
展开
评论
点赞
8月3日 打卡day10
今日学习：包管理器——pnpm
1、杀手锏的两个优势：
①包安装速度极快
②磁盘空间利用非常高效
2、依赖管理
①npm/yarn install 原理：包管理的步骤、嵌套逻辑
②npm3扁平化依赖：解决了大量包重复安装的问题
③npm3扁平化缺点：依赖结构的不确定性，扁平化算法复杂性很高，仍然可以非法访问没声明过依赖的包
3、pnpm 依赖管理
①node_modules目录下，发现依赖都是软链接形式，扁平的目录结构
②巧妙地规避了非法访问依赖的问题
4、pnpm基本使用
①pnpm install：安装项目下所有的依赖
②pnpm update：根据指定的范围将包更新到最新版本
③pnpm uninstall：在 node_modules 和 package.json 中移除指定的依赖
④pnpm link：将本地项目连接到另一个项目
今日学习：包管理器——pnpm
1、杀手锏的两个优势：
①包安装速度极快
②磁盘空间利用非常高效
2、依赖管理
①npm/yarn install 原理：包管理的步骤、嵌套逻辑
②npm3扁平化依赖：解决了大量包重复安装的问题
③npm3扁平化缺点：依赖结构的不确定性，扁平化算法复杂性很高，仍然可以非法访问没声明过依赖的包
3、pnpm 依赖管理
①node_modules目录下，发现依赖都是软链接形式，扁平的目录结构
②巧妙地规避了非法访问依赖的问题
4、pnpm基本使用
①pnpm install：安装项目下所有的依赖
②pnpm update：根据指定的范围将包更新到最新版本
③pnpm uninstall：在 node_modules 和 package.json 中移除指定的依赖
④pnpm link：将本地项目连接到另一个项目
展开
评论
点赞
8月1日 打卡day9
今日学习：纯前端实现「羊了个羊」小游戏
1、地图模拟：从单层到多层，卡片位置为1/4堆叠
2、地图生成：注意同层卡片重叠，左右对称，从顶层到底层卡片越来越少，因此要进行卡片位置判定合格
3、覆盖关系：先根据位置有卡片进行遮盖数组的生成
4、填充数据： 区域存在3 个同样图案的卡片时会消除（3的倍数），卡片通过随机交换顺序的新数组填充
5、点击交互：根据前面的是否被覆盖逻辑，设置只有顶层可点击效果，当顶层卡片被点击时，将地图卡片去除，放到底下盒子中
同时判断如果底部盒子存在3张相同图片时，消除3张卡片；不存在则判断是否满7张，满则游戏结束；不满则判断地图卡片是否还有，没有则本局成功
今日学习：纯前端实现「羊了个羊」小游戏
1、地图模拟：从单层到多层，卡片位置为1/4堆叠
2、地图生成：注意同层卡片重叠，左右对称，从顶层到底层卡片越来越少，因此要进行卡片位置判定合格
3、覆盖关系：先根据位置有卡片进行遮盖数组的生成
4、填充数据： 区域存在3 个同样图案的卡片时会消除（3的倍数），卡片通过随机交换顺序的新数组填充
5、点击交互：根据前面的是否被覆盖逻辑，设置只有顶层可点击效果，当顶层卡片被点击时，将地图卡片去除，放到底下盒子中
同时判断如果底部盒子存在3张相同图片时，消除3张卡片；不存在则判断是否满7张，满则游戏结束；不满则判断地图卡片是否还有，没有则本局成功
展开
评论
点赞
7月31日 打卡day8
今日学习：原来调试还有这么多方式，一起学习吧！
调式方式：打印输出、普通断点、条件断点、DOM断点、VS code 断点等
1、console
①console.log，多个变量需要直接输出时，没办法查看对应名称，可以添加一个中括号，同时借助ES6的属性的简洁表示法
②console.warn，警告信息，用于代码存在不合理或不符合规范但不影响系统运行的提示
③console.error，错误信息，用于代码错误和异常的提示
④console.time和console.timeEnd，一般是配合使用，用于计算代码段的执行时间，有助于性能调试和判断
⑤console.assert，第一个参数为 false（例如null，undefined，''，0，或者结果为false的逻辑等）时，输出错误日志，可减少书写判断逻辑，用于判断空值或者false逻辑还是很有用处的
⑥console.dir，DOM节点的打印输出，区别于console.log，会以标签的形式输出
⑦console.table，将数组（或者是 类数组 的对象，或者就是一个 对象 ）打印成一个表格，对于预览还是有挺大帮助的
⑧console.$i，在扩展程序Console Importer作为辅助工具下，可以在 devtool 开发者工具直接使用npm包
2、breakpoint断点调试
①直接断点：打开 Chrome 开发者工具，在Sources源代码面板，找到需要断点的文件，点击对应的行数，就能实现断点
②代码断点：在需要断点的地方，书写debugger就能实现断点
③快捷键ctrl+p弹出文件搜索弹窗，直接输入文件名称就能实现查询，输入英文冒号:，输入想要跳转的行数，就是实现快速跳转到对应行
④行数右键点击，选择Add conditional breakpoint...，输入对应的逻辑判断
今日学习：原来调试还有这么多方式，一起学习吧！
调式方式：打印输出、普通断点、条件断点、DOM断点、VS code 断点等
1、console
①console.log，多个变量需要直接输出时，没办法查看对应名称，可以添加一个中括号，同时借助ES6的属性的简洁表示法
②console.warn，警告信息，用于代码存在不合理或不符合规范但不影响系统运行的提示
③console.error，错误信息，用于代码错误和异常的提示
④console.time和console.timeEnd，一般是配合使用，用于计算代码段的执行时间，有助于性能调试和判断
⑤console.assert，第一个参数为 false（例如null，undefined，''，0，或者结果为false的逻辑等）时，输出错误日志，可减少书写判断逻辑，用于判断空值或者false逻辑还是很有用处的
⑥console.dir，DOM节点的打印输出，区别于console.log，会以标签的形式输出
⑦console.table，将数组（或者是 类数组 的对象，或者就是一个 对象 ）打印成一个表格，对于预览还是有挺大帮助的
⑧console.$i，在扩展程序Console Importer作为辅助工具下，可以在 devtool 开发者工具直接使用npm包
2、breakpoint断点调试
①直接断点：打开 Chrome 开发者工具，在Sources源代码面板，找到需要断点的文件，点击对应的行数，就能实现断点
②代码断点：在需要断点的地方，书写debugger就能实现断点
③快捷键ctrl+p弹出文件搜索弹窗，直接输入文件名称就能实现查询，输入英文冒号:，输入想要跳转的行数，就是实现快速跳转到对应行
④行数右键点击，选择Add conditional breakpoint...，输入对应的逻辑判断
展开
评论
点赞
7月30日 打卡day7
今日学习
1、clamp() 函数的作用是把一个值限制在一个区间，当值超出范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值
2、装饰性元素、流体高度、Loading Bar进度条、动态分割器：可以使用媒体查询，但也可以 clamp()函数
今日学习
1、clamp() 函数的作用是把一个值限制在一个区间，当值超出范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值
2、装饰性元素、流体高度、Loading Bar进度条、动态分割器：可以使用媒体查询，但也可以 clamp()函数
展开
评论
点赞
7月29日 打卡day6
今日学习
1、Esbuild是采用 Go 语言开发的一款打包工具
2、其优势
①可以充分利用多线程打包，并且线程之间共享内容
②直接编译成机器码
③内部打包算法充分利用多核 CPU ，尽可能充分利用所有的 CPU 内核
④从零开始造轮子，没有任何第三方库的黑盒逻辑，保证极致的代码性能
⑤从头到尾尽可能地复用一份 AST 节点数据，从而大大提高了内存的利用效率，提升编译性能
3、esbuild 插件机制
插件就是一个对象，里面有name和setup两个属性，name是插件的名称，setup是一个函数
4、Esbuild虚拟模块支持
①Esbuild对于虚拟模块的支持，是直接通过 namespace 来区分真实模块和虚拟模块，就不会有 \0 这样 hack 操作
②Esbuild还可以将模块名当做一个函数来进行编译，甚至可以在编译阶段实现函数递归的过程
5、更多用处
①代码压缩工具②代替 ts-node③代替 ts-jest④第三方库 Bundler⑤打包 Node 库⑥小程序编译⑦Web 构建
今日学习
1、Esbuild是采用 Go 语言开发的一款打包工具
2、其优势
①可以充分利用多线程打包，并且线程之间共享内容
②直接编译成机器码
③内部打包算法充分利用多核 CPU ，尽可能充分利用所有的 CPU 内核
④从零开始造轮子，没有任何第三方库的黑盒逻辑，保证极致的代码性能
⑤从头到尾尽可能地复用一份 AST 节点数据，从而大大提高了内存的利用效率，提升编译性能
3、esbuild 插件机制
插件就是一个对象，里面有name和setup两个属性，name是插件的名称，setup是一个函数
4、Esbuild虚拟模块支持
①Esbuild对于虚拟模块的支持，是直接通过 namespace 来区分真实模块和虚拟模块，就不会有 \0 这样 hack 操作
②Esbuild还可以将模块名当做一个函数来进行编译，甚至可以在编译阶段实现函数递归的过程
5、更多用处
①代码压缩工具②代替 ts-node③代替 ts-jest④第三方库 Bundler⑤打包 Node 库⑥小程序编译⑦Web 构建
展开
评论
点赞
7月28日 打卡day5
今日学习：WebRTC 从实战到未来！迎接风口，前端必学的技术
1、WebRTC 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输
2、媒体流：可以通过摄像头，麦克风，屏幕共享等方式获取到媒体流，然后通过 WebRTC 技术将媒体流传输到远端实现实时通讯
3、摄像头获取媒体流：通过navigator.mediaDevices.getUserMedia(constraints)这个 api 来获取媒体流
①constraints指定了请求的媒体类型和相对应的参数，用于配置视频流和音频流的信息
②不设置constraints参数，默认就是获取摄像头和麦克风的媒体流
4、屏幕共享：
①getDisplayMedia 获取屏幕共享的媒体流
②MediaRecorder 是用于录制媒体流的 API，可以将媒体流中的数据进行录制，然后将录制的数据保存成一个文件，通过MediaRecorder.isTypeSupported 来判断当前浏览器是否支持所需要的 mimeType
5、虚拟背景：通过 canvas 将背景图画到画布上，然后通过 getImageData 方法拿到图像数据
今日学习：WebRTC 从实战到未来！迎接风口，前端必学的技术
1、WebRTC 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输
2、媒体流：可以通过摄像头，麦克风，屏幕共享等方式获取到媒体流，然后通过 WebRTC 技术将媒体流传输到远端实现实时通讯
3、摄像头获取媒体流：通过navigator.mediaDevices.getUserMedia(constraints)这个 api 来获取媒体流
①constraints指定了请求的媒体类型和相对应的参数，用于配置视频流和音频流的信息
②不设置constraints参数，默认就是获取摄像头和麦克风的媒体流
4、屏幕共享：
①getDisplayMedia 获取屏幕共享的媒体流
②MediaRecorder 是用于录制媒体流的 API，可以将媒体流中的数据进行录制，然后将录制的数据保存成一个文件，通过MediaRecorder.isTypeSupported 来判断当前浏览器是否支持所需要的 mimeType
5、虚拟背景：通过 canvas 将背景图画到画布上，然后通过 getImageData 方法拿到图像数据
展开
评论
点赞
7月27日 打卡day4
今日学习：JavaScript 必须学会的11 个工具方法(避免重复造轮子)
1、计算距离下次生日还有多少天：借助moment实现
2、回到顶部：scrollTo、scrollTop
3、复制文本
4、防抖/节流
①防抖：指定时间内频繁触发一个事件，以最后一次触发为准
②节流：指定时间内频繁触发一个事件，只会触发一次
5、过滤特殊字符：RegExp()
6、常用正则判断
7、初始化数组：fill()是es6新增的方法，使用指定的元素填充数组，相当于用默认内容初始化数组
8、将 RGB 转换为十六进制
9、检测是否是一个函数：typeof
10、检测是否为一个安全数组：isArray
11、检测对象是否为一个安全对象
今日学习：JavaScript 必须学会的11 个工具方法(避免重复造轮子)
1、计算距离下次生日还有多少天：借助moment实现
2、回到顶部：scrollTo、scrollTop
3、复制文本
4、防抖/节流
①防抖：指定时间内频繁触发一个事件，以最后一次触发为准
②节流：指定时间内频繁触发一个事件，只会触发一次
5、过滤特殊字符：RegExp()
6、常用正则判断
7、初始化数组：fill()是es6新增的方法，使用指定的元素填充数组，相当于用默认内容初始化数组
8、将 RGB 转换为十六进制
9、检测是否是一个函数：typeof
10、检测是否为一个安全数组：isArray
11、检测对象是否为一个安全对象
展开
评论
点赞
7月26日 打卡day3
今日学习：前端人 不了解的promise/async await
1、早期异步代码困境
（1）错误做法：由于js的单线程，导致一个网络异步请求，如果采用setTimeout异步操作直接输出，是无法正常反馈
（2）正确做法：通过箭头函数传参，执行异步操作中的函数输出结果
2、Promise(承诺)，给予调用者一个承诺，过一会返回数据给你，就可以创建一个promise对象，其参数有两个回调函数，三个状态
（1）函数
①当执行了reslove函数，会回调promise对象的.then函数
②当执行了reject函数，会回调promise对象的.catche函数
（2）状态
①pending(待定)，执行了executor，状态还在等待中，没有被兑现，也没有被拒绝
②fulfilled(已兑现)，执行了resolve函数则代表了已兑现状态
③rejected(已拒绝)，执行了reject函数则代表了已拒绝状态
3、resolve不同值的区别
4、then和catch
5、Promise的类方法/静态方法
6、Promise回调地狱
7、async/await
今日学习：前端人 不了解的promise/async await
1、早期异步代码困境
（1）错误做法：由于js的单线程，导致一个网络异步请求，如果采用setTimeout异步操作直接输出，是无法正常反馈
（2）正确做法：通过箭头函数传参，执行异步操作中的函数输出结果
2、Promise(承诺)，给予调用者一个承诺，过一会返回数据给你，就可以创建一个promise对象，其参数有两个回调函数，三个状态
（1）函数
①当执行了reslove函数，会回调promise对象的.then函数
②当执行了reject函数，会回调promise对象的.catche函数
（2）状态
①pending(待定)，执行了executor，状态还在等待中，没有被兑现，也没有被拒绝
②fulfilled(已兑现)，执行了resolve函数则代表了已兑现状态
③rejected(已拒绝)，执行了reject函数则代表了已拒绝状态
3、resolve不同值的区别
4、then和catch
5、Promise的类方法/静态方法
6、Promise回调地狱
7、async/await
展开
评论
点赞