花卷小弟
前端卡拉米
获得徽章 1
#青训营笔记创作活动#
1月16日 打卡day9
图片压缩技术
因为给前端的原型图中一些图片可能比较大从而造成一些
流量消耗过大，因此建议还是使用图片压缩，这样比较
省空间，对运维也比较友好。
使用TinyPng进行图片压缩，封装成对应的工具库，
可以搭配webpack进行plugin配置，但是不太建议
个人在使用的时候建议使用官方的TinyPng进行图片压缩
每次封装时只需要调用对应的函数即可
1月16日 打卡day9
图片压缩技术
因为给前端的原型图中一些图片可能比较大从而造成一些
流量消耗过大，因此建议还是使用图片压缩，这样比较
省空间，对运维也比较友好。
使用TinyPng进行图片压缩，封装成对应的工具库，
可以搭配webpack进行plugin配置，但是不太建议
个人在使用的时候建议使用官方的TinyPng进行图片压缩
每次封装时只需要调用对应的函数即可
展开
评论
点赞
#青训营笔记创作活动#
1月15日 打卡day8
Esbuild是一款使用Golang开发的打包工具
具有的优点有：内存消耗少，兼容性好，速度快，高效利用内存，并且支持多个插件，虚拟模块支持，编译能力优秀等
1月15日 打卡day8
Esbuild是一款使用Golang开发的打包工具
具有的优点有：内存消耗少，兼容性好，速度快，高效利用内存，并且支持多个插件，虚拟模块支持，编译能力优秀等
评论
点赞
#青训营笔记创作活动#
1月14日 打卡day7
了解了WebRTC的相关知识
WebRTC可以实现很多的功能，比如视频聊天，语音聊天，录制屏幕，拍照等
实现一些流媒体的操作，可玩性非常强，我们如果自己能够实现那么对能力也是一种很大的提升
1月14日 打卡day7
了解了WebRTC的相关知识
WebRTC可以实现很多的功能，比如视频聊天，语音聊天，录制屏幕，拍照等
实现一些流媒体的操作，可玩性非常强，我们如果自己能够实现那么对能力也是一种很大的提升
展开
评论
点赞
#青训营笔记创作活动#
1月13日 打卡day6
前端人必须掌握的抓包技能
抓取网页中的数据包我们可以借助浏览器自带的抓包工具进行抓包
可以查看不同的数据包的内容
如果想在web端抓取手机端的数据包，我们可以借助whistle这个工具
使用npm的方式进行安装
whistle的功能十分强大，是我们前端在进行代码测试时必须掌握的一项技能
1月13日 打卡day6
前端人必须掌握的抓包技能
抓取网页中的数据包我们可以借助浏览器自带的抓包工具进行抓包
可以查看不同的数据包的内容
如果想在web端抓取手机端的数据包，我们可以借助whistle这个工具
使用npm的方式进行安装
whistle的功能十分强大，是我们前端在进行代码测试时必须掌握的一项技能
展开
评论
点赞
#青训营笔记创作活动#
1月12日 打卡day5
今天学习了JavaScript常用的11个工具方法
1. 计算距离的目标日期（距离下次生日的日期）
2.当前页面滚动到页面顶部（使用scrollTop或者scrollTo)
3.复制文本（将页面选择的东西复制到剪切板）
4.防抖和节流的实现方式（高频）
5.过滤特殊字符
6.常用正则判断
7.初始化数组（常用）
8.将RGB值转化为十六进制
9.检测是否是一个函数
10.检测是否是一个安全数组
11.检测对象是否是一个安全对象
1月12日 打卡day5
今天学习了JavaScript常用的11个工具方法
1. 计算距离的目标日期（距离下次生日的日期）
2.当前页面滚动到页面顶部（使用scrollTop或者scrollTo)
3.复制文本（将页面选择的东西复制到剪切板）
4.防抖和节流的实现方式（高频）
5.过滤特殊字符
6.常用正则判断
7.初始化数组（常用）
8.将RGB值转化为十六进制
9.检测是否是一个函数
10.检测是否是一个安全数组
11.检测对象是否是一个安全对象
展开
评论
点赞
#青训营笔记创作活动#
1月11日 打卡day4
promise是用于处理异步任务的一种很好的方法
promise有三种状态：pending、fulfilled、rejected
promise的一些方法：all allSettled resolve rejected fulfilled race any
async await 异步代码同步化 最佳解决方案
1月11日 打卡day4
promise是用于处理异步任务的一种很好的方法
promise有三种状态：pending、fulfilled、rejected
promise的一些方法：all allSettled resolve rejected fulfilled race any
async await 异步代码同步化 最佳解决方案
展开
评论
点赞
#青训营笔记创作活动#
1月10日 打卡day3
现代的前端工程已经越来越离不开 Monorepo 了，Monorepo是已经有了很长一段历史了，主要是一种项目管理方式，是指将多个关联的项目放在一个仓库下，而不是每个项目都创建一个仓库，与之对应的是Mutirepo，也就是每个项目都创建一个仓库。Monorepo是一种发展趋势，现在很多项目都已经在使用这种项目管理方式
1月10日 打卡day3
现代的前端工程已经越来越离不开 Monorepo 了，Monorepo是已经有了很长一段历史了，主要是一种项目管理方式，是指将多个关联的项目放在一个仓库下，而不是每个项目都创建一个仓库，与之对应的是Mutirepo，也就是每个项目都创建一个仓库。Monorepo是一种发展趋势，现在很多项目都已经在使用这种项目管理方式
展开
评论
点赞
#青训营笔记创作活动#
1月9日 打卡day2
了解到了很多学习工具以及网站
1.git可视化工具
2.图片在线压缩网站
3.在线代码编辑（掘金）
4.json格式化
5.代码生成图片
6.表情符号
7.矢量图标库
8.css3动画
9.封面模板
10.高清图片 unSplash
11.在线画图 boardmix
12.快速部署网站 surge
13.网站性能测评 pagespeed
14.多平台效果测试工具 responsively
15.Chrome扩展插件 极简插件
16.在线简历制作工具 五百丁简历
1月9日 打卡day2
了解到了很多学习工具以及网站
1.git可视化工具
2.图片在线压缩网站
3.在线代码编辑（掘金）
4.json格式化
5.代码生成图片
6.表情符号
7.矢量图标库
8.css3动画
9.封面模板
10.高清图片 unSplash
11.在线画图 boardmix
12.快速部署网站 surge
13.网站性能测评 pagespeed
14.多平台效果测试工具 responsively
15.Chrome扩展插件 极简插件
16.在线简历制作工具 五百丁简历
展开
评论
点赞
#青训营笔记创作活动#
1月8日 打卡day1
js手写实现拖拽事件
h5提供的拖拽事件drag和drop，在使用上可能有许多不友好的地方
使用js实现拖拽事件，实现自定义拖拽效果
使用鼠标的三个时间，mousedown，mousemove，mouseup ，当点击按下的时候，克隆一个绝对定位的元素，并标识下"拖拽中"的状态，接着在 mousemove 中就可以判断应该执行的具体方法，从而让元素随着鼠标移动起来。
在监听事件的 event 对象中，有几个参数是比较重要的：clientX，clientY 标识的鼠标当前横坐标和纵坐标，offsetX 和 offsetY 表示相对偏移量，可以在 mousedown 鼠标按下时记录初始坐标，在 mouseup 鼠标抬起时判断是否在目标区域中，如果是则用鼠标获取到的当前的偏移量 - 初始坐标得到元素实际在目标区域中的位置。
感觉通过这篇文章学到了很多东西，之前自己只知道使用drag和drop，没想到自定义实现拖拽事件看了之后好像也没那么困难，加油。
1月8日 打卡day1
js手写实现拖拽事件
h5提供的拖拽事件drag和drop，在使用上可能有许多不友好的地方
使用js实现拖拽事件，实现自定义拖拽效果
使用鼠标的三个时间，mousedown，mousemove，mouseup ，当点击按下的时候，克隆一个绝对定位的元素，并标识下"拖拽中"的状态，接着在 mousemove 中就可以判断应该执行的具体方法，从而让元素随着鼠标移动起来。
在监听事件的 event 对象中，有几个参数是比较重要的：clientX，clientY 标识的鼠标当前横坐标和纵坐标，offsetX 和 offsetY 表示相对偏移量，可以在 mousedown 鼠标按下时记录初始坐标，在 mouseup 鼠标抬起时判断是否在目标区域中，如果是则用鼠标获取到的当前的偏移量 - 初始坐标得到元素实际在目标区域中的位置。
感觉通过这篇文章学到了很多东西，之前自己只知道使用drag和drop，没想到自定义实现拖拽事件看了之后好像也没那么困难，加油。
展开
评论
点赞
赞了这篇文章
赞了这篇文章