获得徽章 7
- #青训营笔记创作活动#
2月14日 打卡 Day6
本文介绍了计算机网络相关的知识体系，
包括HTTP/HTTPS抓包的原理等。
而后介绍了whistle抓包工具，作为同样的一名H5跨端开发者，
我用得更多的是charles工具，charles工具和whistle相近，
能够通过ip、端口和证书的配置实现抓包。
当然在H5跨端开发层面讲，还有很多调试抓包的方法也很实用，如：
1. 安卓机使用chrome自带的tools连接实现抓包
2. IOS使用safari连接电脑实现抓包
3. 使用如vconsole工具加载到页面实现抓包和报错定位
这些都能在很大程度上为我们开发提供便利展开评论点赞 - #青训营笔记创作活动#
2月13日 打卡 Day5
今天学习了JS中常用的一些工具方法代码段
其中提出几点疑问
1. 对于回到顶部方法，之前有做过滚屏的需求，scrollTo有behavior: "smooth"的属性，就作者说的兼容性问题而言，用setInterval也不能够达到流畅顺滑的情况，可以参考结合easings.net中动画的js实现。同时可以考虑requestAnimationFrame这个api，10ms的延迟设置的也不够合理，应该为16（60帧）
2. 复制文本中-9999px不够合理，为什么不选择对dom元素隐藏展开评论点赞 - #青训营笔记创作活动#
2月12日 打卡Day4
笔者从JS语言特性到异步代码特性...
一步步给我们分析了从基本（回调地狱）写法 => Promise => async/await
让我们了解使用他们是怎么一步一步优化代码，使得更可读和利于维护
文中着重介绍了Promise的知识点、侧重async/await，还包括generator的知识点
值得注意的是promise .then .catch / async返回的都是一个promise对象，async、await其实是generator和promise的语法糖，通过使用他们可以使得异步代码看起来和同步一样，更有利于后续的维护展开评论点赞 - #青训营笔记创作活动#
2月11日 打卡 Day3
本次学习了Monorepo的概念，相较于传统的MultiRepo，Monorepo解决了多项目的管理问题。使得多项目在工作流一致、基建成本降低、团队协作也更易。
前端业界有lerna等Monorepo开源方案，包版本管理等，值得我们学习展开评论点赞 - #青训营笔记创作活动#
2月10日 打卡 Day2
今天通过这篇文章了解了一些前端开发中比较实用的工具
其中有很多自己已经使用过，也有一些是自己没了解过的。从侧面也反映出了前端知识面的广阔
比较常用的有：
1. 图片压缩工具（场景：图片资源加载缓慢...如果使用vscode插件会更方便）
2. 在线代码编辑（场景：写一个小demo，或者试验一下一个小功能）
3. 图标库（场景：挑选合适的图标用于产品）
最后下载体验了一下多平台测试软件，感觉很不错，对于一些兼容场景复杂、多媒体查询的情况下，能够大大提高开发效率展开评论点赞 - #青训营笔记创作活动#
2月9日 打卡 Day1
今天学习了原生拖拽实现，这是一篇优质的文章。之前有做过类似的场景，总结来看需要结合以下几个方面：
1. 样式变更。利用伪类选择器，如:hover时通过滤镜增加遮罩，修改cursor鼠标样式，添加一些较平滑的动画处理...
2. 处理鼠标事件。分为mousedown、mousemove、mouseup，对对应的时间做相应的处理。使用dragging变量标记拖拽状态
3. 监听过程中获取鼠标位置，对应修改元素位置
其中笔者还做了回退初始位置、定时器移除DOM节点、合并CSS、拖拽放大、边界判断、弱网优化等处理。整体的完整性很高。
给一个小小建议是，笔者除了对于CSS的合并外还可以对拖拽过程中频繁重排的场景再加上节流 throttle(Fn, 16)的优化～展开评论点赞 - #青训营笔记创作活动#
2月2日 打卡Day33
git作为开发中经常打交道的工具
是我们必须掌握并且熟练的知识
git指令很多，作者罗列了常用的git指令，如git cherry-pick，在特殊情况下能够有很大的帮助展开评论点赞 - #青训营笔记创作活动#
2月1日 打卡Day32
一个有意思的效果
实现的逻辑大致是：
1. 使用background-clip: text 实现背景被裁剪成文字的前景色
2. 使用渐变色做背景
3. 使用overflow: hidden裁剪以外的元素
4. 使用gsap scrollTrigger处理滚动动画（有使用过gsap动画库，非常强大展开评论点赞 - #青训营笔记创作活动#
1月30日 打卡Day31
本文用原生JS实现了图片预览功能，有很多点可以学习，如：
1. 利用滚轮事件监听改变transform scale值
2. 根据鼠标位置为中心缩放，需要解决(鼠标不断移动且幅度很大时会出现的抖动)
3. 通过指针事件处理PC和移动端事件监听的不通用（这里React是引入新的事件机制解决的）
4. 通过touches数组记录触摸点位置，根据触摸点数、距离来判断对应手势操作
5. 一些不常见的api：touch-action、translateZ(0)展开评论点赞 - #青训营笔记创作活动#
1月13日 打卡Day30
回顾了一些知识：
1. 虚拟DOM（并非真正意义上的块，而是提供了合并DOM更新、跨平台的特效）
2. diff算法
key一般使用到map的开发中经常使用，作者通过两个实际的vue案例来描述index不能作为key的场景展开评论点赞