花卷小弟
前端卡拉米
获得徽章 1
#青训营笔记创作活动#
2月3日 打卡day27
在JavaScript中，什么时候使用map比使用object好
对象的使用在JavaScript中非常的方便，但是很多情况下使用对象却不能满足我们的要求
map中提供了很多对外暴露的api，同时它的键可以是任意类型的变量
同时对于有非常多的属性，map的效率要高于对象
同时map的内存消耗要远小于对象形式
如果需要频繁更改键值，可以使用map，如果是一个固定的键值集，则可以使用对象
2月3日 打卡day27
在JavaScript中，什么时候使用map比使用object好
对象的使用在JavaScript中非常的方便，但是很多情况下使用对象却不能满足我们的要求
map中提供了很多对外暴露的api，同时它的键可以是任意类型的变量
同时对于有非常多的属性，map的效率要高于对象
同时map的内存消耗要远小于对象形式
如果需要频繁更改键值，可以使用map，如果是一个固定的键值集，则可以使用对象
展开
评论
点赞
#青训营笔记创作活动#
2月2日 打卡day26
Islands 架构原理和实践
在传统的 SSR 应用中，服务端会给浏览器响应完整的 HTML 内容，并在 HTML 中注入一段完整的 JS 脚本用于完成事件的绑定，也就是完成 hydration (注水) 的过程。当注水的过程完成之后，页面也才能真正地能够进行交互。当一个页面中只有部分的组件交互，那么对于这些可交互的组件，我们可以执行 hydration 过程，因为组件之间是互相独立的。而对于静态组件，即不可交互的组件，我们可以让其不参与 hydration 过程，直接复用服务端下发的 HTML 内容。可交互的组件就犹如整个页面中的孤岛(Island)，因此这种模式叫做 Islands 架构
2月2日 打卡day26
Islands 架构原理和实践
在传统的 SSR 应用中，服务端会给浏览器响应完整的 HTML 内容，并在 HTML 中注入一段完整的 JS 脚本用于完成事件的绑定，也就是完成 hydration (注水) 的过程。当注水的过程完成之后，页面也才能真正地能够进行交互。当一个页面中只有部分的组件交互，那么对于这些可交互的组件，我们可以执行 hydration 过程，因为组件之间是互相独立的。而对于静态组件，即不可交互的组件，我们可以让其不参与 hydration 过程，直接复用服务端下发的 HTML 内容。可交互的组件就犹如整个页面中的孤岛(Island)，因此这种模式叫做 Islands 架构
展开
评论
点赞
#青训营笔记创作活动#
2月1日 打卡day25
前端docker使用指南
了解 docker 常见操作，如构建镜像、运行容器、进入容器执行命令
如何进入 docker 容器中进行调试
使用 docker 启动 nginx 容器，并在本地浏览器某端口可直接打开
如何得知启动 nginx 容器的 IP 端口
了解 docker 原理，如何模拟 docker 隔离环境及限制资源
Dockerfile、Image、Container 有何区别
Dockerfile 中 CMD 与 RUN 有何区别
2月1日 打卡day25
前端docker使用指南
了解 docker 常见操作，如构建镜像、运行容器、进入容器执行命令
如何进入 docker 容器中进行调试
使用 docker 启动 nginx 容器，并在本地浏览器某端口可直接打开
如何得知启动 nginx 容器的 IP 端口
了解 docker 原理，如何模拟 docker 隔离环境及限制资源
Dockerfile、Image、Container 有何区别
Dockerfile 中 CMD 与 RUN 有何区别
展开
评论
点赞
#青训营笔记创作活动#
1月31日 打卡day24
一次性搞懂大屏适配方案
vw+vh
scale方案
rem+vw vh方案
1月31日 打卡day24
一次性搞懂大屏适配方案
vw+vh
scale方案
rem+vw vh方案
展开
评论
点赞
#青训营笔记创作活动#
1月30日 打卡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-pe
10. luban-h5
11. mometa
12. h5-factory
13. h5-factory
14. lz-h5-edit
15. tefact
16. fast-poster
17. openDataV
18. mall-cook
19. form-generator
20. vjdesign
1月30日 打卡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-pe
10. luban-h5
11. mometa
12. h5-factory
13. h5-factory
14. lz-h5-edit
15. tefact
16. fast-poster
17. openDataV
18. mall-cook
19. form-generator
20. vjdesign
展开
评论
点赞
#青训营笔记创作活动#
1月29日 打卡day22
构造高性能的树状结构
使用map形式对树进行存储 效率非常高
在增加 删除 修改等方面更加方便了
1月29日 打卡day22
构造高性能的树状结构
使用map形式对树进行存储 效率非常高
在增加 删除 修改等方面更加方便了
评论
点赞
#青训营笔记创作活动#
1月28日 打卡day21
pnpm相比于npm和yarn有许多更大的优势 比如：磁盘利用率高 不存在版本提升问题 安全性高 并且支持monorepo等特性
pnpm作为包管理器具有很大优势的
1月28日 打卡day21
pnpm相比于npm和yarn有许多更大的优势 比如：磁盘利用率高 不存在版本提升问题 安全性高 并且支持monorepo等特性
pnpm作为包管理器具有很大优势的
评论
点赞
#青训营笔记创作活动#
1月27日 打卡day20
纯前端实现🐏了个🐏
借助于前端实现 思路并不难 主要是层级的判断，使用二维数组来进行存储地图中的信息。
之前这个游戏火的时候还以为很难，可能需要很多技术，后来才发现并不难，单纯的前端功能就能够实现这些功能。
1月27日 打卡day20
纯前端实现🐏了个🐏
借助于前端实现 思路并不难 主要是层级的判断，使用二维数组来进行存储地图中的信息。
之前这个游戏火的时候还以为很难，可能需要很多技术，后来才发现并不难，单纯的前端功能就能够实现这些功能。
展开
评论
点赞
#青训营笔记创作活动#
1月26日 打卡day19
前端掌握的浏览器调试技巧
console.log
console.warn
console.error
console.time
console.timeEnd
console.assert
console.dir
console.table
console.$i
breakpoint
debug打断点
还有很多调试技巧需要自己掌握 很有利于我们前端开发
1月26日 打卡day19
前端掌握的浏览器调试技巧
console.log
console.warn
console.error
console.time
console.timeEnd
console.assert
console.dir
console.table
console.$i
breakpoint
debug打断点
还有很多调试技巧需要自己掌握 很有利于我们前端开发
展开
评论
点赞
#青训营笔记创作活动#
1月25日 打卡day18
css中实用的函数：
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值
实用性很高，多适用于需要匹配不同的显示器尺寸 并且让页面呈现良好的效果 非常高效
1月25日 打卡day18
css中实用的函数：
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值
实用性很高，多适用于需要匹配不同的显示器尺寸 并且让页面呈现良好的效果 非常高效
展开
评论
点赞
#青训营笔记创作活动#
1月24日 打卡day17
借助css来实现时间监听
1. 长按超过1秒触发 可以借助于hover 之后再添加transitionend方法
2. 长按触发事件 借助actived和transitionend方法
3. 轮播和暂停 借助hover之后添加 animation-play-state: paused 之后再监听animationend事件
1月24日 打卡day17
借助css来实现时间监听
1. 长按超过1秒触发 可以借助于hover 之后再添加transitionend方法
2. 长按触发事件 借助actived和transitionend方法
3. 轮播和暂停 借助hover之后添加 animation-play-state: paused 之后再监听animationend事件
展开
评论
点赞
#青训营笔记创作活动#
1月23日 打卡day16
前端实现人脸活体检测
人脸识别一般是前端发送图片给后端，让后端去检测
人脸识别我们也可以用前端去实现
主要是引入tensorflow的人脸模型，之后对不同坐标点进行检测
来判断人脸以及人脸转动
好像没怎么看懂，不过前端能够实现活体人脸检测确实很有意思
1月23日 打卡day16
前端实现人脸活体检测
人脸识别一般是前端发送图片给后端，让后端去检测
人脸识别我们也可以用前端去实现
主要是引入tensorflow的人脸模型，之后对不同坐标点进行检测
来判断人脸以及人脸转动
好像没怎么看懂，不过前端能够实现活体人脸检测确实很有意思
展开
评论
点赞
#青训营笔记创作活动#
1月22日 打卡day15
调试AntDesign源码
VSCode Chrome Debugger 调试网页，这个知道的人就不多
react 源码里 renderWithHooks 是调用函数组件的地方
条件断点可以在满足条件的时候断住
antd 的 esm、commonjs、UMD 三种入口
sourcemap 是干啥的，虽然经常接触，但还是有很多前端没用过
webpack 的 cheap-module-source-map 的含义，为什么需要关联 loader 的 sourcemap
而调试 antd 的组件源码需要综合运用这些技术，难度还是比较高的。
1月22日 打卡day15
调试AntDesign源码
VSCode Chrome Debugger 调试网页，这个知道的人就不多
react 源码里 renderWithHooks 是调用函数组件的地方
条件断点可以在满足条件的时候断住
antd 的 esm、commonjs、UMD 三种入口
sourcemap 是干啥的，虽然经常接触，但还是有很多前端没用过
webpack 的 cheap-module-source-map 的含义，为什么需要关联 loader 的 sourcemap
而调试 antd 的组件源码需要综合运用这些技术，难度还是比较高的。
展开
评论
点赞
#青训营笔记创作活动#
1月21日 打卡day14
新年之际 祝各位友友们前程似锦 码到成功
使用fiabricjs开发图片编辑器
因为框架用的vue，主要解决如何把fabric的实例对象共享给各个功能组件，区分出是未选中、单选、多选状态，然后将选中、取消选中事件暴露给各个功能组件，子组件根据状态进行独立的功能开发
fabric在图片编辑方面具有非常大的优势，易上手，成效快。
1月21日 打卡day14
新年之际 祝各位友友们前程似锦 码到成功
使用fiabricjs开发图片编辑器
因为框架用的vue，主要解决如何把fabric的实例对象共享给各个功能组件，区分出是未选中、单选、多选状态，然后将选中、取消选中事件暴露给各个功能组件，子组件根据状态进行独立的功能开发
fabric在图片编辑方面具有非常大的优势，易上手，成效快。
展开
评论
点赞
#青训营笔记创作活动#
1月20日 打卡day13
使用css实现节流的功能
主要实现思路是借助于animation的动画功能，点击之后让动画持续一段时间，并且动画效果是呈阶梯状的，也就是说时间到了会立即变为目标效果
css实现节流效果主要是借助于按钮不可点击或者是没有效果来实现的。
1月20日 打卡day13
使用css实现节流的功能
主要实现思路是借助于animation的动画功能，点击之后让动画持续一段时间，并且动画效果是呈阶梯状的，也就是说时间到了会立即变为目标效果
css实现节流效果主要是借助于按钮不可点击或者是没有效果来实现的。
展开
评论
点赞
#青训营笔记创作活动#
1月19日 打卡day12
js实现沙箱（不能操作DOM和调接口的环境)
实现思路：
1. 利用iframe创建沙箱，取出其中原生浏览器对象作为沙箱的全局对象
2. 实现隔离操作，设置黑名单，黑名单中的变量不允许访问
3. 在黑名单中添加document，禁止用户操作DOM
4. 在黑名单中添加XMLHttpRequest，fetch，websocket等发送请求的接口
5. 若访问当前全局变量中不存在的变量，则直接报错
6. 拦截对window对象的访问，防止通过window.document来操作DOM
微前端框架qiankun就是js沙箱隔离
1月19日 打卡day12
js实现沙箱（不能操作DOM和调接口的环境)
实现思路：
1. 利用iframe创建沙箱，取出其中原生浏览器对象作为沙箱的全局对象
2. 实现隔离操作，设置黑名单，黑名单中的变量不允许访问
3. 在黑名单中添加document，禁止用户操作DOM
4. 在黑名单中添加XMLHttpRequest，fetch，websocket等发送请求的接口
5. 若访问当前全局变量中不存在的变量，则直接报错
6. 拦截对window对象的访问，防止通过window.document来操作DOM
微前端框架qiankun就是js沙箱隔离
展开
评论
点赞
#青训营笔记创作活动#
1月18日 打卡day11
vite项目中屏幕适配的多种方案
1. 基于rem的适配方案 rem是根据html根元素来设置font-size的大小，在开发中我们通常将根元素html/body设置为10px，这样子元素中1rem=10px。基于rem的适配方案一般常用于 不固定宽高比的web应用，也就是页面中元素的宽高比没有给出固定值，而是一个相对单位，那么此时就可以使用这种方法 安装 amfe-flexible和postcss-pxtorem以及autoprefixe 在根目录创建postcss.config.js文件 并对其进行相应配置，之后需要注意文件导入依赖
2. 基于scale的适配方案 在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果 适用于固定宽高比的web应用 如大屏或者固定窗口业务
1月18日 打卡day11
vite项目中屏幕适配的多种方案
1. 基于rem的适配方案 rem是根据html根元素来设置font-size的大小，在开发中我们通常将根元素html/body设置为10px，这样子元素中1rem=10px。基于rem的适配方案一般常用于 不固定宽高比的web应用，也就是页面中元素的宽高比没有给出固定值，而是一个相对单位，那么此时就可以使用这种方法 安装 amfe-flexible和postcss-pxtorem以及autoprefixe 在根目录创建postcss.config.js文件 并对其进行相应配置，之后需要注意文件导入依赖
2. 基于scale的适配方案 在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果 适用于固定宽高比的web应用 如大屏或者固定窗口业务
展开
评论
点赞
#青训营笔记创作活动#
1月17日 打卡day10
学习了一些比较方便的css属性
1.position:stick 粘性定位
2. :empty 空选择器，可以选定没有内容的标签
3. gap 用于设置列之间的间隙，多用于flex和grid
4.background-clip:text 可以用于添加带背景的文字
5. user-select 可以控制文本是否可被选中
6. :invalid 可以用于表单校验的css属性
7. :focus-within伪类 元素被选中时的css属性
8. mix-blend-mode:difference 混合颜色搭配时可用
1月17日 打卡day10
学习了一些比较方便的css属性
1.position:stick 粘性定位
2. :empty 空选择器，可以选定没有内容的标签
3. gap 用于设置列之间的间隙，多用于flex和grid
4.background-clip:text 可以用于添加带背景的文字
5. user-select 可以控制文本是否可被选中
6. :invalid 可以用于表单校验的css属性
7. :focus-within伪类 元素被选中时的css属性
8. mix-blend-mode:difference 混合颜色搭配时可用
展开
评论
点赞