ota裤
获得徽章 1
#青训营笔记创作活动#
2月2日 打卡day16
今日学习
Esbuild基于golang的打包工具，比传统打包工具（rollup parcel webpack ）构建速度快10~100倍
利用golang语言开发，可以多线程打包，另一方面直接编译成机器码，而不用node一样先将js解析为字节码再转换为机器码。esbuild尽可能复用一份ast节点数据。
但是没有ts类型检查 不能操作ast 不支持装饰器 不支持降级到es5以下 不支持hmr
Vite利用esbuild作为开发阶段下的依赖预打包
2月2日 打卡day16
今日学习
Esbuild基于golang的打包工具，比传统打包工具（rollup parcel webpack ）构建速度快10~100倍
利用golang语言开发，可以多线程打包，另一方面直接编译成机器码，而不用node一样先将js解析为字节码再转换为机器码。esbuild尽可能复用一份ast节点数据。
但是没有ts类型检查 不能操作ast 不支持装饰器 不支持降级到es5以下 不支持hmr
Vite利用esbuild作为开发阶段下的依赖预打包
展开
评论
点赞
赞了这篇文章
#青训营笔记创作活动#
2月1日 打卡day15
今日学习
定义统一且可扩展的组件schema,有rect circle line三种类型，捕获鼠标在画布组件的实时位置，初始点坐标，每个元素都设置一个唯一key
2月1日 打卡day15
今日学习
定义统一且可扩展的组件schema,有rect circle line三种类型，捕获鼠标在画布组件的实时位置，初始点坐标，每个元素都设置一个唯一key
展开
评论
点赞
#青训营笔记创作活动#
1月30日 打卡day14
今日学习
后端如果传来树状结构，应该拍平成id为key，对象为val的扁平map，以求增删改查性能的最大化
1月30日 打卡day14
今日学习
后端如果传来树状结构，应该拍平成id为key，对象为val的扁平map，以求增删改查性能的最大化
评论
点赞
#青训营笔记创作活动#
1月27日 打卡day13
今日学习
TSDoc官网：tsdoc.org/
export class Statistics {
/**
* Returns the average of two numbers.
*
* @remarks
* This method is part of the {@link core-library#Statistics | Statistics subsystem}.
*
* @param x - The first input number
* @param y - The second input number
* @returns The arithmetic mean of `x` and `y`
*
* @beta
*/
public static getAverage(x: number, y: number): number {
return (x + y) / 2.0;
}
}
TSDoc规范
需要TSDoc解析器@microsoft/tsdoc
取API信息、统计报告、注释检查、文档生成api-extractror
TypeDoc，它集成了API信息提取、文档生成、站点生成
1月27日 打卡day13
今日学习
TSDoc官网：tsdoc.org/
export class Statistics {
/**
* Returns the average of two numbers.
*
* @remarks
* This method is part of the {@link core-library#Statistics | Statistics subsystem}.
*
* @param x - The first input number
* @param y - The second input number
* @returns The arithmetic mean of `x` and `y`
*
* @beta
*/
public static getAverage(x: number, y: number): number {
return (x + y) / 2.0;
}
}
TSDoc规范
需要TSDoc解析器@microsoft/tsdoc
取API信息、统计报告、注释检查、文档生成api-extractror
TypeDoc，它集成了API信息提取、文档生成、站点生成
展开
评论
点赞
#青训营笔记创作活动#
1月26日 打卡day12
今日学习
Css函数
clamp，三个参数，分别是最小值 首选值 最大值
Calc，用于计算
max
Min
1月26日 打卡day12
今日学习
Css函数
clamp，三个参数，分别是最小值 首选值 最大值
Calc，用于计算
max
Min
展开
评论
点赞
#青训营笔记创作活动#
1月25日 打卡day11
今日学习
思路就是设置一个中间人进程负责抓包，每次目标进程之间的会话都先与中间人进程通信，再进行转发
Whistle 是基于 Node 实现的跨平台抓包免费调试工具
先安装 node，建议用 nvm 管理
全局安装 whistle
npm i -g whistle & w2 start
复制代码安装后，可以在电脑上设置全局代理，代理的端口为 8899.
w2 proxy // 设置全局代理
w2 proxy off // 关闭全局代理
复制代码就可以通过浏览器访问 http://127.0.0.1:8899/ 查看抓包、修改请求等。
如果你不想使用全局代理，就可以安装 SwitchyOmega 插件，按需对某些网站设置 whistle 代理。
1月25日 打卡day11
今日学习
思路就是设置一个中间人进程负责抓包，每次目标进程之间的会话都先与中间人进程通信，再进行转发
Whistle 是基于 Node 实现的跨平台抓包免费调试工具
先安装 node，建议用 nvm 管理
全局安装 whistle
npm i -g whistle & w2 start
复制代码安装后，可以在电脑上设置全局代理，代理的端口为 8899.
w2 proxy // 设置全局代理
w2 proxy off // 关闭全局代理
复制代码就可以通过浏览器访问 http://127.0.0.1:8899/ 查看抓包、修改请求等。
如果你不想使用全局代理，就可以安装 SwitchyOmega 插件，按需对某些网站设置 whistle 代理。
展开
评论
点赞
#青训营笔记创作活动#
1月24日 打卡day10
今日学习
20个开源低代码项目，不多说，码住
里面第七个还可以拖拽生成短视频，基于一个短视频加工库，有机会可以康康
1月24日 打卡day10
今日学习
20个开源低代码项目，不多说，码住
里面第七个还可以拖拽生成短视频，基于一个短视频加工库，有机会可以康康
展开
评论
点赞
#青训营笔记创作活动#
1月23日 打卡day9
今日学习
CSS实现节流：
1. 设置一个动画, from为pointer-events:none; to为pointer-envents: all;
2. animation设置为step-end forwards，可以很好控制pointer-events变化的时间点，0~2s内为none,一旦到达2s, 会立刻变成all, 由于forwards，会一直保持all的状态；最后再按下时把button:active的animation设为none
也就是松开时，动画重新执行一次
第二种方法就是监听一个document上的transitionstart和transitionend事件，改变触发事件的元素的disabled属性
1月23日 打卡day9
今日学习
CSS实现节流：
1. 设置一个动画, from为pointer-events:none; to为pointer-envents: all;
2. animation设置为step-end forwards，可以很好控制pointer-events变化的时间点，0~2s内为none,一旦到达2s, 会立刻变成all, 由于forwards，会一直保持all的状态；最后再按下时把button:active的animation设为none
也就是松开时，动画重新执行一次
第二种方法就是监听一个document上的transitionstart和transitionend事件，改变触发事件的元素的disabled属性
展开
评论
点赞
#青训营笔记创作活动#
1月21日 打卡day8
今日学习
vite项目进行屏幕适配
1.基于rem postcss-pxtorem 是PostCSS的插件，用于将像素单元生成rem单位
autoprefixer 浏览器前缀处理插件
amfe-flexible 可伸缩布局方案 替代了原先的lib-flexible 选用了当前众多浏览器兼容的viewport
自动将border外所以px转rem
2.基于scale的适配方案，监听窗口大小的改变，对整个容器进行缩放
1月21日 打卡day8
今日学习
vite项目进行屏幕适配
1.基于rem postcss-pxtorem 是PostCSS的插件，用于将像素单元生成rem单位
autoprefixer 浏览器前缀处理插件
amfe-flexible 可伸缩布局方案 替代了原先的lib-flexible 选用了当前众多浏览器兼容的viewport
自动将border外所以px转rem
2.基于scale的适配方案，监听窗口大小的改变，对整个容器进行缩放
展开
评论
点赞
#青训营笔记创作活动#
1月20日 打卡day7
今日学习
WebRTC是一种实时通讯技术，允许浏览器建立p2p连接，实现视频流音频流或任意数据的传输，不需要插件或第三方软件。
api超多
1月20日 打卡day7
今日学习
WebRTC是一种实时通讯技术，允许浏览器建立p2p连接，实现视频流音频流或任意数据的传输，不需要插件或第三方软件。
api超多
展开
评论
点赞
#青训营笔记创作活动#
1月19日 打卡day6
今日学习
git clone [url] // 将存储库克隆到本地
git init // 创建新的 Git 仓库，在当前路径下生成 .git 目录
git remote -v // 查看连接的远程仓库地址
git checkout [branchName] // 切换分支
git checkout -b [branchName] // 新建分支并切换到该分支
git branch //查看本地分支
git branch -r //查看远程分支
git branch -a //查看本地和远程分支
git branch [branchName] //新建本地分支但不切换
git branch -D [branchName] //删除本地分支
git branch -m [oldBranchName] [newBranchName] //重新命名分
git add [file1] [file2] // 添加指定文件至暂存区
git add [dir] // 添加指定目录至暂存区
git add . // 添加当前目录下所有文件至暂存区
git add -A // 添加当前仓库下的所有文件改动至暂存区
git commit -m 'xxx' // 将暂存区文件添加到本地仓库，并记录下备注
1月19日 打卡day6
今日学习
git clone [url] // 将存储库克隆到本地
git init // 创建新的 Git 仓库，在当前路径下生成 .git 目录
git remote -v // 查看连接的远程仓库地址
git checkout [branchName] // 切换分支
git checkout -b [branchName] // 新建分支并切换到该分支
git branch //查看本地分支
git branch -r //查看远程分支
git branch -a //查看本地和远程分支
git branch [branchName] //新建本地分支但不切换
git branch -D [branchName] //删除本地分支
git branch -m [oldBranchName] [newBranchName] //重新命名分
git add [file1] [file2] // 添加指定文件至暂存区
git add [dir] // 添加指定目录至暂存区
git add . // 添加当前目录下所有文件至暂存区
git add -A // 添加当前仓库下的所有文件改动至暂存区
git commit -m 'xxx' // 将暂存区文件添加到本地仓库，并记录下备注
展开
评论
点赞
#青训营笔记创作活动#
1月18日 打卡day5
今日学习
对象只允许键是字符串和 symbol。任何其他类型的键都会通过 toString 方法被隐含地转换为字符串。
用字面量创建对象时，这个对象不再是空的。尽管 hashMap 是用一个空的对象字面量创建的，但它自动继承了 Object.prototype。这就是为什么我们可以在 hashMap 上调用hasOwnProperty、toString、constructor 等方法。
我们可以通过使用 Object.create(null) 来解决这个问题，它可以生成一个不继承Object.prototype的对象。
Object没有size的api，想获得字符串和可枚举的键用 Object.keys();只想要不可枚举的字符串，用Object.getOwnPropertyNames();使用getOwnPropertySymbols获取symbol键；使用Reflect.ownKeys获取以上所有；对象只能使用 for..in不能使用for...of, 但是for...in会读到继承的可枚举属性；object上的属性只能用delete操作符删除；不能通过.或者[]检查键是否存在，因为值可能为undefined，得使用Object.prototype.hasOwnProperty或Object.hasOwn;
map上有clear
Map 比 Object 快，除非有小的整数、数组索引的键，而且它更节省内存。
如果你需要一个频繁更新的 hash map，请使用 Map；如果你想一个固定的键值集合（即记录），请使用Object，并注意原型继承带来的陷阱。
1月18日 打卡day5
今日学习
对象只允许键是字符串和 symbol。任何其他类型的键都会通过 toString 方法被隐含地转换为字符串。
用字面量创建对象时，这个对象不再是空的。尽管 hashMap 是用一个空的对象字面量创建的，但它自动继承了 Object.prototype。这就是为什么我们可以在 hashMap 上调用hasOwnProperty、toString、constructor 等方法。
我们可以通过使用 Object.create(null) 来解决这个问题，它可以生成一个不继承Object.prototype的对象。
Object没有size的api，想获得字符串和可枚举的键用 Object.keys();只想要不可枚举的字符串，用Object.getOwnPropertyNames();使用getOwnPropertySymbols获取symbol键；使用Reflect.ownKeys获取以上所有；对象只能使用 for..in不能使用for...of, 但是for...in会读到继承的可枚举属性；object上的属性只能用delete操作符删除；不能通过.或者[]检查键是否存在，因为值可能为undefined，得使用Object.prototype.hasOwnProperty或Object.hasOwn;
map上有clear
Map 比 Object 快，除非有小的整数、数组索引的键，而且它更节省内存。
如果你需要一个频繁更新的 hash map，请使用 Map；如果你想一个固定的键值集合（即记录），请使用Object，并注意原型继承带来的陷阱。
展开
评论
点赞
赞了这篇文章
#青训营笔记创作活动#
1月17日 打卡day4
今日学习
获取划词头尾位置信息，生成canvas元素
canvas设置pointerEvents:'none'，就不会影响鼠标事件，document.getSelection().getRangeAt(0）的api可以获得划词头尾节点的信息，通过dfs获取获取头尾节点间的所有文字节点，这里dfs体现在找了某节点的子节点、兄弟节点，如果找不到了就原路返回且一直返回。如果range跨行了，通过二分法找到每一行最后一个文本节点拆分，通过range中的top一致不一致判断在不在最后一行，最后用数据结构存储所有节点信息
1月17日 打卡day4
今日学习
获取划词头尾位置信息，生成canvas元素
canvas设置pointerEvents:'none'，就不会影响鼠标事件，document.getSelection().getRangeAt(0）的api可以获得划词头尾节点的信息，通过dfs获取获取头尾节点间的所有文字节点，这里dfs体现在找了某节点的子节点、兄弟节点，如果找不到了就原路返回且一直返回。如果range跨行了，通过二分法找到每一行最后一个文本节点拆分，通过range中的top一致不一致判断在不在最后一行，最后用数据结构存储所有节点信息
展开
评论
点赞