
获得徽章 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的场景展开评论点赞