前端
文章平均质量分 78
hezf_hero
这个作者很懒,什么都没留下…
展开
-
浅析使用 JWT 的正确姿势
在很长的一段时间里,我都没有正确的使用 jwt,意识到这个问题之后,把我最真实的思考和总结拿出来和大家分享下,欢迎一起讨论。原创 2022-08-04 10:52:51 · 868 阅读 · 0 评论 -
模仿北京健康宝动画
北京健康宝有一个动画,一圈小球,沿着正方形顺时针滚动,并且颜色是渐变的,像下图的这样。原创 2022-08-02 08:31:32 · 1719 阅读 · 0 评论 -
Pinia的写法探索
在最新的Vue官方文档中,核心库的地址已经指向了,这表明已经把Pinia当做Vue3.x的官方状态管理库了。下面来探索下Pinia的使用方式。原创 2022-07-19 16:17:57 · 343 阅读 · 0 评论 -
Vue3内置组件Teleport用法详解
Vue 3.0 新增了一个内置组件teleport,主要是为了解决以下场景:有时组件模板的一部分逻辑上属于该组件,而从技术角度来看,最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置场景举例:一个Button,点击后呼出模态对话框这个模态对话框的业务逻辑位置肯定是属于这个Button,但是按照DOM结构来看,模态对话框的实际位置应该在整个应用的中间这样就有了一个问题:组件的逻辑位置和DOM位置不在一起按照以前Vue2的做法,一般是使用position: fixed;等CSS原创 2021-10-20 09:39:02 · 2246 阅读 · 0 评论 -
Threejs实现穿越云层动效
上文说到,我对《你的性格主导色》活动中最感兴趣的部分就是通过 Three.js 实现穿越云层动效了,据作者说每朵云出现的位置都是随机的,效果很好,下图是我实现的版本。在线 Demo首先说下实现穿越云层动效的基本思路:沿着Z轴均匀的放一堆64*64的平面图形,这些平面的X坐标和Y坐标是随机的(很像下图的桶装薯片)把上面的所有图形合并成一个大的图形把大的图形和贴片材质(云)生成网格,网格放进场景中动效就是将相机从远处沿着Z轴缓慢移动,就会有了穿越云层的效果首先官方文档提供了一个创建一个场景原创 2021-08-17 10:09:54 · 1421 阅读 · 0 评论 -
《你的性格主导色》揭秘
很久没有过分享了,标题看着有点“标题党”,但我这个是真的揭秘~介绍《你的性格主导色》是今年网易云音乐前端团队开发的一款测试用户主导色的 H5 应用,上线后反响很好,刷爆了微博和朋友圈。项目的主要开发者 imyzf 发表了一篇文章《官方揭秘!你的颜色是这样算出来的》,解释了一些动效和最后主导色的计算方面的问题。但由于涉及到了具体的业务,所以作者没有开源出源码,但是热心的作者给了很多的提示。我就是根据这些提示,揭秘了我比较感兴趣的部分。在线 Demo由于一直没有在生产环境中使用Vue3.0和vite,原创 2021-08-17 10:08:54 · 151 阅读 · 0 评论 -
有趣的算法『打开转盘锁』
题目描述你有一个带有四个圆形拨轮的转盘锁。每个拨轮都有 10 个数字: ‘0’, ‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’, ‘9’ 。每个拨轮可以自由旋转:例如把 ‘9’ 变为 ‘0’,‘0’ 变为 ‘9’ 。每次旋转都只能旋转一个拨轮的一位数字。锁的初始数字为 ‘0000’ ,一个代表四个拨轮的数字的字符串。列表 deadends 包含了一组死亡数字,一旦拨轮的数字和列表里的任何一个元素相同,这个锁将会被永久锁定,无法再被旋转。字符串 target 代表可原创 2020-08-05 15:05:02 · 497 阅读 · 1 评论 -
浏览器缓存最佳实践
最佳实践上来先说结论,原因放在后面:index.html 不做缓存,每次请求都获取最新版本使用 webpack 等 build 后的其他所有资源文件(包括 js、css 和图片等),都做强缓存(一个月打底,可以设置一年)原因强缓存和协商缓存在社区已经被写烂了,都知道是怎么回事,这里就不做详细解释了,这里解释下为什么说上面的是最佳实践。我们知道协商缓存其实也向服务端发起了一个请求,只不过最后经过一系列验证,结果就是不传输具体内容了,但是验证的过程也给后端造成了一些开销,所以我们要尽量减少这种开原创 2020-08-06 15:55:37 · 164 阅读 · 0 评论 -
vue-page-stack
Vue 单页应用导航管理器原创 2020-04-20 12:08:08 · 2322 阅读 · 7 评论