橘子格格巫
获得徽章 1
- #青训营笔记创作活动#
1月25日 打卡day6
今日学习:主要了解了抓包的原理，以及http抓包和https抓包的区别，还了解了抓包工具whistle 的安装和使用，如何设置全局代理，如何进行抓包，如何查看抓包情况等等。评论点赞 - #青训营笔记创作活动#
1月20日 打卡day5
今天主要学习了javascript的11个工具方法。通过moment去计算生日距离天数，通过计时器滚动实现回到顶部，复制文本，防抖节流通过debounce函数和throttle实现，通过replace和pattern规则替换特殊字符为空实现过滤特殊字符，学会了常用的一些正则判断，初始化数组通过fill方法实现，rgb转换为16进制，检测是否为一个函数，检测是否为一个安全数组借助isArray实现，检测对象是否为一个安全对象。展开评论点赞 - #青训营笔记创作活动#
1月19日 打卡day4
今天主要学习了promise/async await的发展历程，使用方法，使用过程，以及分类，同时还有它的好处和弊端，让我对promise有了更加全面的认识。评论点赞 - #青训营笔记创作活动#
1月18 打卡day3
今天主要学习了一种新的项目管理方式——Monorepo，相较于之前的项目管理方式MultiRepo，它只要是将所有项目放在一个仓库，就避免了代码复用，版本管理，项目基建等各方面的问题，同时他还要很多好处，比如工作量一致，基建成本降低，以及团队协作更加方便。展开评论点赞 - #青训营笔记创作活动#
1月16日 打卡day2
今日学习：前段必备的16个工具个网址
此次阅读让我知道了很多对前端有用的工具和网址，对自己的帮助非常大，在很多方面都能够用到这些软件个和网站，增大了了解面，希望今后能够多多用到这些工具和网址。
1通过GitHub desktop能够对git进行可视化操作，
2使用tinypng能够对图片进行在线压缩，对压缩图片的需求起到很大的帮助，同时还知道了如何处理大图片压缩，使用squoosh进行压缩。
3在稀土掘金上的码上掘金也能够方便进行线上代码编译，
4JSON代码格式化可使用json.cn网站，
5代码生成图片可使用carbon，也可以使用ray.so。
6矢量图标使用阿里巴巴矢量图库非常方便，我平时也是用这个。
7表情符号颜文字可使用emoji网址。
8动画需求可使用CSS动画，
9封面模板使用canva.，上面有很多免费素材供使用，
10高清图片可以在Unsplash上面下载
11在线画图可以在boardmix上面进行，或者processon上面
12如果需要快速部署网站可以在surge，是一个免费的部署网站
13在线性能测试可以在pagespeed上面进行
14多平台测试responsively
15chrome扩展组件可以增加更多浏览器功能，
16在线简历500丁网站
展开评论点赞 - #青训营笔记创作活动#
1月15日 打卡day1
今日学习：拖拽效果
学习完这篇文章，了解了自己手动实现拖拽效果的考虑历程，实现过程，实现原理，以及对它的性能优化。在多个方面进行了学习，对js的使用更进一步，对待问题的考虑更加周到，了解更多处理优化的新方法。
主要包括一下结果方面：
1：用鼠标的点击事件形成拖拽效果:mousedown，mousemove，mouseup
按下鼠标进行坐标克隆，抬起坐标进行坐标判断，鼠标获取到的当前的偏移量 - 初始坐标得到元素实际在目标区域中的位置。
2：按下鼠标进行图片滤镜 filter: brightness(90%);
3：伪类激活 cursor 的 grab 和 grabbing 可以设置抓取动作的图标。
4：按下拖动时给本体元素设置个 opacity: 0，修改透明度
5：性能优化：
cssText：合并多个css操作
实现拖拽放大：transform: scale
改变缩放原点到左上角：transform-origin: top left;
6：实现放置：
1：判断鼠标在目标区域，拷贝元素到画布中，如果不在画布中，执行倒退动画
实现原理：
画布上绑定mouseup监听事件
getBoundingClientRect方法获取画布本身相对于视窗的偏移
2：删除元素
7：边界判断：不对边界情况进行处理可能会导致拖动时发生意外的中断，无法正确回收克隆元素。
8：体验优化：利用浏览器加载过同一张图片就会优先读缓存的机制，先用一个Image加载原图，等其加载完毕再把拖拽元素的src改成原图展开评论点赞
