PureNight
获得徽章 1
- #青训营笔记创作活动#
2023/01/13 Day3
今日学习了现代前端工程离不开Monorepe的原因，分别从它的概念，弊端，收益和落地这几个方面进行讲述。这个名词很陌生，但是了解之后结合git相关知识进行映射。评论点赞 - #青训营笔记创作活动#
2022/01/12 Day2
16个前端必备的实用工具与网站
1.github desktop
2.图片在线压缩–tinypng或squoosh
3.在线代码编辑–codePen或CodeSandbox
4.json格式化–Json.cn
5.代码生成图片–carbon或ray.so
6.表情符号–emojiall中文官方网站
7.适量图标–iconfont
8.css3动画–css3-animation
9.封面模板–canva可画
10.高清图片–UnSplash
11.在线画图–boardmix或ProcessOn
12.快速部署网站–surge.sh
13.在线性能评测–pagespeed
14.多平台测试–responsively.app
15.免登录chrome扩展组件–极简插件
16.在线简历–五百丁简历(收费，但永久会员较为便宜)展开评论点赞 - #青训营笔记创作活动#
2023/01/11 打卡Day1
元素拖拽放置
1.鼠标事件
鼠标监听事件涉及参数:
①ClientX,ClientY鼠标当前横纵坐标
②offsetX,OffsetY相对偏移量，可在mousedown记录初始位置，在mouseup判断是否在目标区域
实际位置=当前偏移量–初始坐标
2.filter
filter:brightness(90%);
这个不仅仅可以调节明亮度实现鼠标覆盖动态效果，无需额外做遮罩，也让我想起了当重大日子需要将正常页面色调变换时，同样也是用这种方式实现，虽然有其他方式 但这种方式是最先想到的。
3.元素克隆体现位置移动
cloneEl = e.target.cloneNode(true) // 克隆元素 cloneEl.classList.add('flutter') // 使其浮动 e.target.parentElement.appendChild(cloneEl) // 加入到列表中
为了交互体验更好，按下拖动时将原先克隆位置的元素设置opacity:0，结束后改为1即可。
4.元素回退
同样的道理，回退通过transition过渡实现视觉上流畅效果，再setTimeout通过克隆元素的remove移除元素，这样在视觉传达上会有平滑稳定的动画效果。
性能优化
这次也体验了降低回流重绘成本的性能优化方式
以前只是纸上谈兵，仅有理论上的概念，现在就体验一下其中方法之一
利用cssText实现多个操作合并处理
实现放置
以上步骤只是让元素移动，并没有实现放置在画布上
1.这个就需要mouseup判断拖拽是否在画布上，如果是的话通过计算鼠标位置和appendChild“复制”(克隆新元素+移除移动的元素)到画布上
使用getBoundingClientRect方法获取画布本身相对视窗的偏移
元素在画布位置=鼠标坐标–画布本身偏移量
这个方法我还挺眼熟的，前段时间在做地图相关的项目时运用getBound方法。
2.边界判断
如果不做边界判断会导致拖动意外中断无法回收克隆，那可能对加载负担加重
3.使用体验优化
同张图片采用优先读缓存，先image加载原图再拖拽
这篇文章让我想起以前做过关于图片处理的qt作品，启发我可以再优化优化那个作品。![[呲牙]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_2.cd1e2bd.png)
展开评论点赞
![[呲牙]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_2.cd1e2bd.png)