花卷小弟
前端卡拉米
获得徽章 1
#青训营笔记创作活动#
2月21日 打卡day45
规范你的TypeScript使用
使用TsDoc将个人使用的ts进行规范化并生成对应的文档
2月21日 打卡day45
规范你的TypeScript使用
使用TsDoc将个人使用的ts进行规范化并生成对应的文档
评论
点赞
#青训营笔记创作活动#
2月20日 打卡day44
20个常用的git命令
git的仓库：工作区 暂存区 本地仓库取 远程仓库区
git clone xxx 克隆git项目
git init 仓库初始化
git remote 追踪远程仓库
git checkout 切换分支
git branch 查看分支相关
git tag 标签相关指令
git add 将工作区的内容添加到暂存区
git commit 将暂存区的文件添加到本地仓库区
git push 将本地仓库推送到远程仓库
git pull 拉取远程仓库的分支合并到本地分支
git fetch 从远程仓库获取代码
git cherry-pick 获取指定的commit
git merge xxx 将指定分支内容合并到当前分支
git rebase 分支变基，将当前分支基变到master分支上
git reset 版本回退
git revert 回滚某次提交
git stash 用于暂存文件
git reflog 记录了所有的commit操作记录
git commit 用于查看所有的commit信息
git rm 从git仓库删除指定文件或目录
2月20日 打卡day44
20个常用的git命令
git的仓库：工作区 暂存区 本地仓库取 远程仓库区
git clone xxx 克隆git项目
git init 仓库初始化
git remote 追踪远程仓库
git checkout 切换分支
git branch 查看分支相关
git tag 标签相关指令
git add 将工作区的内容添加到暂存区
git commit 将暂存区的文件添加到本地仓库区
git push 将本地仓库推送到远程仓库
git pull 拉取远程仓库的分支合并到本地分支
git fetch 从远程仓库获取代码
git cherry-pick 获取指定的commit
git merge xxx 将指定分支内容合并到当前分支
git rebase 分支变基，将当前分支基变到master分支上
git reset 版本回退
git revert 回滚某次提交
git stash 用于暂存文件
git reflog 记录了所有的commit操作记录
git commit 用于查看所有的commit信息
git rm 从git仓库删除指定文件或目录
展开
评论
点赞
#青训营笔记创作活动#
2月19日 打卡day43
用css替代JS的几个适用场景
1. 颜色选择器，适用input标签，type为color，其中value值为当前的颜色值
2. 使用css实现打字机效果
3. 实现滑顶，触底效果，借助css，给第一个元素和最后一个元素锚点链接，通过点击来实现
4. 借助scroll-snap-type: x mandatory来实现平滑滚动切图
2月19日 打卡day43
用css替代JS的几个适用场景
1. 颜色选择器，适用input标签，type为color，其中value值为当前的颜色值
2. 使用css实现打字机效果
3. 实现滑顶，触底效果，借助css，给第一个元素和最后一个元素锚点链接，通过点击来实现
4. 借助scroll-snap-type: x mandatory来实现平滑滚动切图
展开
评论
点赞
#青训营笔记创作活动#
2月18日 打卡day42
前端图形学，从零基础开发画板
css用于构建基础页面，通过原生的鼠标事件来实现
2月18日 打卡day42
前端图形学，从零基础开发画板
css用于构建基础页面，通过原生的鼠标事件来实现
评论
点赞
#青训营笔记创作活动#
2月17日 打卡day41
手动实现“狗了个狗”
将内容进行区分，数学逻辑进行处理，思路并不是很难
2月17日 打卡day41
手动实现“狗了个狗”
将内容进行区分，数学逻辑进行处理，思路并不是很难
评论
点赞
#青训营笔记创作活动#
2月16日 打卡day40
水波交互动画
借助pixijs来实现水波过滤效果
引入 pixi-filters.js 库后，我们就可以用它实例化一个 ShockwaveFilter 类来完成波纹效果，具体来说，就是在点击屏幕容器的时候，会实例化ShockwaveFilter 类，其中可以随机传入振幅、波长、速度、半径等参数，目的是为了让每次点击水波效果都有些许差异。再将这个过滤器添加一个单独的数组中保存，同时还要添加到 filters 中，在 step 方法不停执行的时候，我们就要遍历这个 shockwaveFilters 数组，将它的 time 属性累加就会产生水波效果动画了。但是别忘了，它执行完之后还要记得移除掉，避免占用内存空间。
2月16日 打卡day40
水波交互动画
借助pixijs来实现水波过滤效果
引入 pixi-filters.js 库后，我们就可以用它实例化一个 ShockwaveFilter 类来完成波纹效果，具体来说，就是在点击屏幕容器的时候，会实例化ShockwaveFilter 类，其中可以随机传入振幅、波长、速度、半径等参数，目的是为了让每次点击水波效果都有些许差异。再将这个过滤器添加一个单独的数组中保存，同时还要添加到 filters 中，在 step 方法不停执行的时候，我们就要遍历这个 shockwaveFilters 数组，将它的 time 属性累加就会产生水波效果动画了。但是别忘了，它执行完之后还要记得移除掉，避免占用内存空间。
展开
评论
点赞
#青训营笔记创作活动#
2月15日 打卡day39
苹果官网文字滚动特效
1.借助background-clip实现
2.将文字颜色设置为透明
3. mix-blend-mode
2月15日 打卡day39
苹果官网文字滚动特效
1.借助background-clip实现
2.将文字颜色设置为透明
3. mix-blend-mode
展开
评论
点赞
#青训营笔记创作活动#
2月13日 打卡day38
React Hooks事件
React Hooks 作为 React 库的重要补充，它使函数组件能够以新的方式编写、重用和共享 React 代码。
从本文学到了很多hooks的使用方法，要善于学习他人的技巧，不断学会新技能。
2月13日 打卡day38
React Hooks事件
React Hooks 作为 React 库的重要补充，它使函数组件能够以新的方式编写、重用和共享 React 代码。
从本文学到了很多hooks的使用方法，要善于学习他人的技巧，不断学会新技能。
展开
评论
点赞
#青训营笔记创作活动#
2月12日 打卡day37
原生js实现图片预览功能
实现图片预览/查看的关键点在于 CSS3 中的 transform 变换，该属性应用于元素在2D或3D上的旋转，缩放，移动，倾斜等等变换，通过设置 translate(x,y) 即可偏移元素位置，设置scale即可缩放元素，
PC上的点击、移动，H5的手势操作，都离不开DOM事件监听。例如鼠标移动事件对应 mousemove，移动端因为没有鼠标则对应 touchmove，在监听事件中我们可以通过 event 对象获取各种属性，例如常用的 offsetX、offsetY 相对偏移量，clientX、clientY 距离窗口的横坐标和纵坐标等。
。
2月12日 打卡day37
原生js实现图片预览功能
实现图片预览/查看的关键点在于 CSS3 中的 transform 变换，该属性应用于元素在2D或3D上的旋转，缩放，移动，倾斜等等变换，通过设置 translate(x,y) 即可偏移元素位置，设置scale即可缩放元素，
PC上的点击、移动，H5的手势操作，都离不开DOM事件监听。例如鼠标移动事件对应 mousemove，移动端因为没有鼠标则对应 touchmove，在监听事件中我们可以通过 event 对象获取各种属性，例如常用的 offsetX、offsetY 相对偏移量，clientX、clientY 距离窗口的横坐标和纵坐标等。
。
展开
评论
点赞
#青训营笔记创作活动#
2月11日 打卡day34
在vue中尽量不要使用index作为key
为什么要使用key，因为key是vue中虚拟dom标记的唯一标识，通过这个key，diff算法能更加准确和快捷。不使用key的情况下，因为vue的就地更新会选择复用节点，之前的状态被保存，可能会产生一系列的bug。另外，key的唯一性可以被map数据结构充分利用，时间复杂度仅为o（1）。
当用index作为key时，因为diff算法会就地更新，index的值不固定，不能作为唯一标识
2月11日 打卡day34
在vue中尽量不要使用index作为key
为什么要使用key，因为key是vue中虚拟dom标记的唯一标识，通过这个key，diff算法能更加准确和快捷。不使用key的情况下，因为vue的就地更新会选择复用节点，之前的状态被保存，可能会产生一系列的bug。另外，key的唯一性可以被map数据结构充分利用，时间复杂度仅为o（1）。
当用index作为key时，因为diff算法会就地更新，index的值不固定，不能作为唯一标识
展开
评论
点赞
#青训营笔记创作活动#
2月10日 打卡day35
不使用第三方库实现前端引导页
首先使用第三方库时，可以使用的方案有：
1. vue-tour
2. driver.js
3. shepherd.js
4. intro.js
不使用第三方库：
1. cloneNode + position + transition
2. z-index + position + transition
2月10日 打卡day35
不使用第三方库实现前端引导页
首先使用第三方库时，可以使用的方案有：
1. vue-tour
2. driver.js
3. shepherd.js
4. intro.js
不使用第三方库：
1. cloneNode + position + transition
2. z-index + position + transition
展开
评论
点赞
#青训营笔记创作活动#
2月9日 打卡day34
提升代码可读性，减少if-else的使用
1. 使用异或的运算 “ || ” 当符号左侧为false时直接返回右边的结果，如果左侧为真，则直接返回左侧的结果
2. 使用三元运算符 ，如果代码量较少 则直接可用三元运算符来代替if-else的使用
3. switch case，如果对于固定的选择结果，那么我们就可以使用switch-case来返回对应的结果
4. 使用对象配置策略，也就是一个键对应一个值，只需要返回对应键的结果即可。
如果对于大量的if-else使用，代码看起来非常不友好，所以如果if-else嵌套有很多层时 则可以使用其它方式替代，不能仅局限于if-else。
2月9日 打卡day34
提升代码可读性，减少if-else的使用
1. 使用异或的运算 “ || ” 当符号左侧为false时直接返回右边的结果，如果左侧为真，则直接返回左侧的结果
2. 使用三元运算符 ，如果代码量较少 则直接可用三元运算符来代替if-else的使用
3. switch case，如果对于固定的选择结果，那么我们就可以使用switch-case来返回对应的结果
4. 使用对象配置策略，也就是一个键对应一个值，只需要返回对应键的结果即可。
如果对于大量的if-else使用，代码看起来非常不友好，所以如果if-else嵌套有很多层时 则可以使用其它方式替代，不能仅局限于if-else。
展开
评论
点赞
#青训营笔记创作活动#
2月7日 打卡day32
前端实现docx以及pdf在线预览
一般是借助于第三方库实现在线预览，docx的预览使用docx-preview进行实现
pdf的预览需要使用PDFJS这个插件,通过将文件流解析写到canvas上实现预览效果
2月7日 打卡day32
前端实现docx以及pdf在线预览
一般是借助于第三方库实现在线预览，docx的预览使用docx-preview进行实现
pdf的预览需要使用PDFJS这个插件,通过将文件流解析写到canvas上实现预览效果
展开
评论
点赞
#青训营笔记创作活动#
2月7日 打卡day31
AST抽象语法树是源代码语法结构的一种抽象表示，它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。在代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等场景均有广泛的应用。
2月7日 打卡day31
AST抽象语法树是源代码语法结构的一种抽象表示，它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。在代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等场景均有广泛的应用。
展开
评论
点赞
#青训营笔记创作活动#
2月6日 打卡day30
qiankun实现JS沙箱隔离的原理，共有三种类型的沙箱
SnapshotSandbox：记录 window 对象，每次 unmount 都要和微应用的环境进行 Diff
LegacySandbox：在微应用修改 window.xxx 时直接记录 Diff，将其用于环境恢复
ProxySandbox：为每个微应用分配一个 fakeWindow，当微应用操作 window 时，其实是在 fakeWindow 上操作
2月6日 打卡day30
qiankun实现JS沙箱隔离的原理，共有三种类型的沙箱
SnapshotSandbox：记录 window 对象，每次 unmount 都要和微应用的环境进行 Diff
LegacySandbox：在微应用修改 window.xxx 时直接记录 Diff，将其用于环境恢复
ProxySandbox：为每个微应用分配一个 fakeWindow，当微应用操作 window 时，其实是在 fakeWindow 上操作
展开
评论
点赞
#青训营笔记创作活动#
2月5日 打卡day29
package的相关参数说明：
name：项目名称
version： 项目的版本号
repository：项目的仓库地址
description：项目的描述
keywords：一组项目的关键词
homepage：项目的主要链接或者网站
bugs：项目的反馈地址，通常是github的issue
license：项目的开源许可证
author：项目的作者
同时还有项目的文件配置：file type main browser module exports workspace
以及项目的脚本配置：scripts config
项目的依赖配置：dependencies devDependencies peerDependencies optionalDependencies peerDependenciesMeta bundleDependencies
项目的系统配置： engines os cpu
第三方配置： types或者typing unpkg jsdelivr browserslist sideEffects link-staged
2月5日 打卡day29
package的相关参数说明：
name：项目名称
version： 项目的版本号
repository：项目的仓库地址
description：项目的描述
keywords：一组项目的关键词
homepage：项目的主要链接或者网站
bugs：项目的反馈地址，通常是github的issue
license：项目的开源许可证
author：项目的作者
同时还有项目的文件配置：file type main browser module exports workspace
以及项目的脚本配置：scripts config
项目的依赖配置：dependencies devDependencies peerDependencies optionalDependencies peerDependenciesMeta bundleDependencies
项目的系统配置： engines os cpu
第三方配置： types或者typing unpkg jsdelivr browserslist sideEffects link-staged
展开
评论
点赞
#青训营笔记创作活动#
2月4日 打卡day28
读一读Tapable源码
Tapable是一个类似于 Node.js 中的 EventEmitter 的库，但它更专注于自定义事件的触发和处理。通过 Tapable 我们可以注册自定义事件，然后在适当的时机去执行自定义事件。
tapable 做的事情就类似于vue和react中的生命周期，我们可以通过它先注册一系列的生命周期函数，然后在合适的时间点执行。
源代码比较少，如果想要在前端方面做进阶，还是要了解一下这些东西的。
2月4日 打卡day28
读一读Tapable源码
Tapable是一个类似于 Node.js 中的 EventEmitter 的库，但它更专注于自定义事件的触发和处理。通过 Tapable 我们可以注册自定义事件，然后在适当的时机去执行自定义事件。
tapable 做的事情就类似于vue和react中的生命周期，我们可以通过它先注册一系列的生命周期函数，然后在合适的时间点执行。
源代码比较少，如果想要在前端方面做进阶，还是要了解一下这些东西的。
展开
评论
点赞