涂涂图图
获得徽章 1
- #青训营笔记创作活动#
前端人70%以上 不了解的promise/async await
1月28日打卡day4
今日学习：promise/async await
1、promise
（1）promise有两个参数回调函数：reslove和reject
当执行了reslove函数，会回调promise对象的.then函数
当执行了reject函数，会回调promise对象的.catch函数
当我们new一个promise时：
new Promise((resolve, reject) => {
console.log(`executor 立即执行`)
})
（2）promise的三个状态
- pending（待定）
- fulfilled（已兑现）
- rejected（已拒绝）
状态只要从待定状态，变为其他状态，则状态不能再改变
（3）then的返回值
- 返回一个普通值，相当于主动调用Promise.resolve，并且把返回值作为实参传递到then方法中；如果没有返回值，则相当于返回undefined
- 返回一个promise对象，返回状态取决于调用resolve还是reject
- 返回一个thenable对象，返回状态取决于调用resolve还是reject展开赞过 33 - #青训营笔记创作活动#
12月30日 打卡day3
今日学习：Monorepo
Monorepo，把多个项目放在一个仓库里面管理
Monorepo的优点：①工作流的一致性：代码复用非常方便，版本更新及时；②项目基建成本低：项目复用无需切换开发环境，可以直接使用已有的基建流程，维护成本降低；③团队协作容易：共享和复用，git时支持以功能为单位提交。展开赞过 评论1 - #青训营笔记创作活动#
12月27日 打卡day2
今日学习：前端实用工具
1.GitHub Desktop，新手可以用git可视化工具
2.图片在线压缩
tinypng.com、squoosh.app
3.在线代码编辑 codePen、CodeSandbox
4.JSON格式化www.json.cn
5.代码生成图片carbon.now.sh、ray.so
6.表情符号emoji大全www.emojiall.com
7.阿里巴巴矢量图表库www.iconfont.cn
8.css3动画库www.webhek.com
9.canva可画www.canva.cn
10.高清图片下载unsplash.com
11.在线思维导图boardmix.cn
12.快速部署建站surge.sh
13.网站性能综合测评pagespeed.web.dev
14.多平台测试，查看网站在各种设备效果responsively.app 评论区说有毒
15.谷歌扩展插件chrome.zzzmh.cn
16.在线简历www.500d.me 展开评论点赞 - #青训营笔记创作活动#
12月26日 打卡day1
☛图片拖拽![[灵光一现]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_25.51e6984.png)
监听事件的 event 对象的几个重要参数：①clientX，clientY --鼠标当前横坐标和纵坐标；②offsetX ，offsetY --相对偏移量，可以在 mousedown 鼠标按下时记录初始坐标，在 mouseup 鼠标抬起时判断是否在目标区域中，如果是：实际在目标区域中的位置=获取到的当前的偏移量 - 初始坐标
通过调节明亮度实现鼠标滑过图片变暗效果
el:hover{
filter:brightness(90%)
}
拖拽：克隆原图，隐藏原图（opacity:0；）
拖拽放大：transform:scale() ,将拖动位置之间的距离当做变化系数（假设为d），那么scale变化数值即为(元素宽度 + d)/元素宽度
松开回退：给克隆元素添加过渡属性，回到初始位置，定时器清除克隆元素
松开放置：给画布绑定mouseup事件，图片位置=鼠标坐标-画布相当于视窗的偏移量
频繁进行多个CSS操作，使用cssText将操作合并处理
展开评论点赞
tinypng.com![[灵光一现]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_25.51e6984.png)