用户4951318865678
获得徽章 0
- #挑战每日一条沸点# 今天把前端打卡的最后一天阅读材料
juejin.cn看了![[庆祝]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_123.da47506.png)
，这篇主要讲的是pixi.js 库，举了一个小例子演示怎么用，没涉及到很原理的东西，虽然不知道背后那些过滤器的原理但是直接调用感觉还是可以的。
40天的阅读材料跳了几篇和react有关的博文，因为没学过react，看的实在有点费劲，但是其他都有认真看了hhh，有几篇跟包管理器，分包有关的写的真的太好了，我就算之前没怎么了解过也看懂了，就是有点小长，作者真是太厉害了。接着就是跟着一些博文重新复习了一下自己之前学过的内容，最后就是一些逻辑性不强但是做出来的前端效果真的超级好看，没接触之前感觉工作量应该不小，结果调用一些库就解决了，还是蛮长见识的，真的推荐大家把这些阅读材料都看一遍，会从很多方面有收获的。![[摸头]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_48.1b40529.png)
展开评论点赞 - #挑战每日一条沸点# 因为react之前真的没用过，所以先跳过day38的材料了，今天把day39的阅读材料juejin.cn看了，主要就介绍了一下苹果发布会的动画效果怎么做的，利用了css一些比较好玩的特性，没怎么涉及到逻辑，提到了两种方法，第一种就是background-clip用来扣出哪些地方显示背景，如果设为text，然后把文字设为透明，就可以看到字形状的里面是我们设置的背景图片，然后做一个移动背景图片的动画，我们透过文字形状看到的背景就变了，还挺好看的，第二种就是用的mix-blend-mode混合模式，文字写在一个div下，该div下面再挂一个div然后设置该子div的背景颜色为渐变色，然后在子div上设置mix-blend-mode：darken，这样只有父div中白色的部分才会透出来背景颜色，接下来就是动子div的位置就可以啦。
后面只是简单提了一下用gsap控制div或背景位置移动动画，但是之前我没用过所以又找了两篇博文（juejin.cn ，juejin.cn）看了一下，蛮简单的以后我做自己博客的时候也要用，真的好酷。
最后突然想起来，我看这篇阅读材料的时候发现我之前没用过linear-gradient做水平渐变，然后找了这篇博文juejin.cn看了一下，还蛮清楚的，css很多时候都是一些知识性的内容，看完基本就知道咋用了，但是配合出来的结果真的惊艳 展开评论点赞 - #挑战每日一条沸点# 感觉这几天都没时间看阅读材料了，毕业论文交初稿的时间要到了
![[流泪]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)
，但是现在已经看到day37了，应该能在青训营结束前看完，加油加油![[力量]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_118.1612154.png)
。 评论点赞 - #挑战每日一条沸点# 今天读了day37的阅读材料juejin.cn，直接用js实现的图片放大，放大后对图片进行缩放和平移。其实感觉蛮简单的，主要思路就是点击了某张图片之后，clone对应的元素，然后创造一个新的div铺满屏幕背景色为灰色，然后把clone的元素作为该div的子节点，之后就是监听各种事件，主要利用transform的translate和scale来缩放和移动。比较有点意思的是一开始缩放的原点是鼠标所在位置或者是两只手指的中点（如果用的是手机端，两只手指来缩放的方式），但是常常会因为在缩放过程鼠标移动了，或者两手指的中坐标变了，这个时候就会出现图片瞬移的现象，所以作者使用的方法还挺巧妙的，就是计算该缩放原点的位置变化，然后计算出一个补偿值，来避免瞬移。
不过我当时第一个想法就是在电脑端这种情况不明显可以先不处理，而手机端就是按第一次两只手指按下后算的中点作为原点，之后就不变了，直至手指抬起下一次放大的时候再重新计算缩放的原点位置（确实太偷懒了![[捂脸]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_28.8981538.png)
展开赞过 评论1 - #挑战每日一条沸点# 今天好抱歉没有看阅读材料、明天连着一起看了，今晚玩桌游玩太晚了，今天阿姨还提早赶人了，我本来还可以再自习室多待会的，明早就写沸点补上🥲赞过 评论1
- #挑战每日一条沸点# 今天把day36的阅读材料juejin.cn看了，主要讲了一下vue的for循环里为什么key不能用inex，因为之前就了解过了，现在再复习一下。博主举得例子确实都挺典型，把index作为key实际上就是把vue设计的时候预先的假设破环了，vue里的for是假设循环里的每一个组件都有自己的独一无二的表示，然后根据这个标识就可以复用它，如果用index的话，遇到更换for循环里组件的排列情况，实际上就是更换了组件这个独一无二的表示，那v-for就会错误的复用组件。举个例子就是，小红和小芳的身份证号互换了，但警局还是按之前没换身份证的情况认人，就会出现认错的情况。 展开评论点赞
- 赞过 评论1
- #挑战每日一条沸点# 今天把day34的阅读材料juejin.cn看了，里面说到的短路运算和三元运算符之前都有意识的在项目里用了，但是那个switch确实写的有点麻烦，基本上没怎么用过。新学到的东西就是对象配置/策略模式，用对象或者Map做不同输入转成不同输出的处理，确实转换关系挺清晰的，就是选项一多就很麻烦，其实作者举得年终奖分部门的那一部分就感觉有一小点冗余了，不过用在简单的转换上还是挺有意思的。 展开评论点赞
- #挑战每日一条沸点# 今天看了pinia的使用，因为之前用过了，但是也有段时间了……按这个捋了一遍，捡回来了。不过那个时候是手动持久化，自己把它放到local storage里，现在才发现有持久化插件，加一个属性就行。评论点赞
juejin.cn![[庆祝]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_123.da47506.png)
，这篇主要讲的是pixi.js 库，举了一个小例子演示怎么用，没涉及到很原理的东西，虽然不知道背后那些过滤器的原理但是直接调用感觉还是可以的。![[摸头]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_48.1b40529.png)
![[流泪]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)
，但是现在已经看到day37了，应该能在青训营结束前看完，加油加油![[力量]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_118.1612154.png)
。![[捂脸]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_28.8981538.png)