全部文章
共 1299 篇文章
瀑布流的效果是怎么实现的
还记得那是周五的一个晚上，那天正在寝室用笔记本玩赛博朋克2077 happy 中🥰，突然女朋友给我发了一个小红书的超链接，我像往常一样无视发送的内容直奔链接准备看完赶紧应付几句话继续游戏🤣 打开链接以为跟其他类似产品一样都会让你直接选择下载 App，没想到小红书的 PC 端惊到我了，首页出乎意料的好看 那时候年轻的我还不知道瀑布流是什么，只是觉得这个布局配合卡片的一些点击交互很有感觉，啧啧啧，我一个大男的看一些女性的推荐都被吸引到了...
用浏览器打开终端竟这么容易实现
你所追求的事物，所做的每一件事情，都有它存在的意义 说到用网页打开终端，相信大多数人都使用过，但是应该也没几个人去认真研究过🤔。自己也是因工作需要，于是对其进行了一番探索。 如果你有用过云服务器，肯定对这个就更熟悉了，比如阿里云的Workbench远程连接。它提供给我们的服务便利性、用户体验还是相当不错的，让我们和实际的机器通过网络联通了。 除此之外，浏览器上能运行的东西还有很多， 如：云文档、云软件、云IDE、云储存、云函数、云调用...
Performance的使用攻略
Performance是Chrome浏览器自带的性能监测工具。根据我的使用，简单理解就是我们可以通过它录制一段时间的浏览器活动，通过活动的数据去分析页面是否存在提升的空间。想要获取页面的活动数据，那我们的第一步便是录制浏览器的活动。 打开F12，进入Perfomance标签页，我们可以看到出现了提示。我们不想看这个文本在说什么，我们只想马上开始用（不是），由于我已经百度翻译过了（不是，看过了），所以文本提示是在说箭头所指的地方，实心圆代...
Vue3嵌套路由中使用keep-alive缓存多层的实现
目录 前言 Demo项目结构 路由层级扁平化 给所有的 router view 都嵌套上 keep alive 前言 是Vue中的缓存标签， 组件在标签中的内容会被缓存下来;但是在多层嵌套的 中， 只能缓存到该层下的 ， 由于路由嵌套比较常见，所以这里提供两种我觉得OK的解决方案。 解决思路 路由层级扁平化，在路由守卫中执行一个拍平的函数，将需要缓存的路由提升到第一层，这样处理会影响到路由层级，最直白的影响如对 面包屑 等功能有直接影响...
完美解决vue3 keep-alive多个路由使用同一个组件的缓存问题
之前页面少的话 用keep live结合router view，使用keep live的include属性就可以自己决定keep live缓存那些组件不缓存那些组件，直到遇到个问题。 平时写的代码如下： 其中 visitedViewPaths表示的是一个放Component name的数组，可以去看文档 如果配置的路由A用A组件，路由B用A组件，因为include属性是靠组件的name来决定缓存与不缓存的，还有这种情况，路由里配置的{...
极致爽文，tsx、jsx语法应用vue3
JSX语法让程序员体验到前所未有的舒爽，而在Vue3中，快速过渡到TSX也是轻而易举的。除了下文介绍的TSX用法外，其他方面与Vue3的使用方式并无二致。TSX所需学习的内容并不繁杂，只是稍微改变了开发习惯，取消了模板语法，让我们能够像编写JavaScript一样书写页面。 通过执行 来创建一个Vue工程。 工程地址 你可以在以下地址找到本文使用的工程示例： 组件定义：defineComponent 在Vue3中， 是一个用于定义组件的...
浏览器节能机制导致Websocket断连的巨坑
点击上方 前端Q，关注公众号 回复加群，加入前端Q技术交流群 作者：tager https://juejin.cn/post/7362576319928008755 你踩过吗？浏览器节能机制导致Websocket断连的坑 近期，在使用 连接时遇到了频繁断连的问题，这种情况在单个用户上每天发生数百次。尽管利用了 的自动重连机制能够在断连后迅速恢复连接，但这并不保证每一次重连都能成功接收 消息。因此，我们进行了一些的排查和测试工作。 最终发...
SPA项目频繁上线导致白屏？最佳实践来了
<span style="color: var( g textcolor);" 背景是我们团队有个项目，上线后，偶尔会听到有人反馈说页面白屏了，刷新页面才好，因为有相当的机率复现，就排查原因。最后发现与SPA有关。</span 什么是SPA SPA是"单页应用程序"（Single Page Application）的缩写，与传统的多页应用程序（Multi Page Application，就是原生的一个个的HTML）相对应。 在传统的多...
vue下拉刷新组件的开发及slot的使用
“下拉刷新”和“上滑加载更多”功能在前端、尤其是移动端项目中非常重要，这里笔者由曾经做过的vue项目中的“blink”功能和各位探讨下【下拉刷新】组件的开发： JavaScript正式开篇 在前端项目的 components 文件夹下新建 pullRefreshView 文件夹，在其中新建组件 index.vue：（它代表“整个屏幕”，通过slot插入页面其他内容而不是传统的设置遮罩层触发下拉刷新） 首先需要编写下拉刷新组件的 temp...