前端小知识
文章平均质量分 79
日常开发中时常关注的技术点,掌握这些就能更好的码了
LiuPing_Xie
前端开发
展开
-
面试官最喜欢问的 14 种Vue修饰符
众所周知,修饰符也是Vue的重要组成成分之一,利用好修饰符可以大大地提高开发的效率,接下来给大家介绍一下面试官最喜欢问的13种Vue修饰符。原创 2024-03-25 14:36:02 · 470 阅读 · 0 评论 -
面试常问:为什么 Vite 速度比 Webpack 快
通过使用export和import语句,ES Modules 允许在浏览器端导入和导出模块。当使用 ES Modules 进行开发时,开发者实际上是在构建一个依赖关系图,不同依赖项之间通过导入语句进行关联。主流浏览器(除IE外)均支持ES Modules,并且可以通过在 script 标签中设置来加载模块。默认情况下,模块会延迟加载,执行时机在文档解析之后,触发DOMContentLoaded事件前。预构建依赖通常指的是在项目启动或构建之前,对项目中所需的依赖项进行预先的处理或构建。原创 2024-03-20 15:22:11 · 1144 阅读 · 2 评论 -
如何用js判断用户长时间无操作
我们可以通过添加一个变量记录开始执行时间,当下一次执行与当前的时间间隔小于某个值时直接退出函数,从而解决这个问题。事件,在页面隐藏时移除延时器,在页面显示时继续(隐藏时间也可以不计算在内)计时,从而解决这个问题。因而我们可以通过监听相应的输入事件有无触发,来判断用户是否在操作网页。网上冲浪后,也没有找到一个比较好的js封装去解决这个问题,从而决定自己实现。方法执行失败,即添加防抖后不能正常清除延时器,其次嵌套。是的,肯定有那么点影响,那我为啥不添加防抖呢?以下代码,简易实现了一个判断失活的方法。原创 2024-03-20 15:07:36 · 454 阅读 · 0 评论 -
分享几个ES6常用的方法
上面的代码表示,可以从数组中提取数值,按照对应的位置,对变量赋值。本质上,这种写法属于"匹配模式",只要等号两边的模式相同,左边的变量就会被赋予对应的值,而解构赋值允许指定的默认值。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。模板字符串,可以换行,也可以在字符串中直接输出变量。数组的元素是按次序排列的,变量的取值由它的位置决定;它的写法就是如果键名和键值的属性名是一样时,可以只写一个。的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量。原创 2024-03-17 10:33:43 · 919 阅读 · 0 评论 -
28个令人惊艳的JavaScript单行代码
JavaScript作为一种强大而灵活的脚本语言,充满了许多令人惊艳的特性。本文将带你探索28个令人惊艳的JavaScript单行代码,展示它们的神奇魅力。原创 2024-03-16 19:01:42 · 277 阅读 · 0 评论 -
总结了38个ES6-ES12的开发技巧,你能拿几分?
以下例子,PASSWORD属性无法在实例里获取到console.log(login.PASSWORD) // 报错console.log(login[PASSWORD]) // 报错console.log(login[PASSWORD]) // 报错。原创 2024-03-14 14:37:20 · 914 阅读 · 0 评论 -
有了这25个正则表达式,代码效率提高80%
在日常开发中,正则表达式是非常有用的,正则表达式在每个语言中都是可以使用的,他就跟JSON一样,是通用的。在日常开发中,了解一些常用的正则表达式,能大大提高你的工作效率,例如字符串的匹配表单项的格式校验今天就给大家分享25个开发中常用的正则表达式吧!!!希望大家能提高代码效率!!!原创 2024-03-14 14:27:02 · 457 阅读 · 0 评论 -
setTimeout+Promise+Async输出顺序?
其实不难,JavaScript代码执行机制,我就归结为三句话1、遇到同步代码直接执行2、遇到异步代码先放一边,并且将他回调函数存起来,存的地方叫事件队列3、等所有同步代码都执行完,再从事件队列中把存起来的所有异步回调函数拿出来按顺序执行原创 2024-03-14 14:23:53 · 588 阅读 · 0 评论 -
e.target 和 e.currentTarget 的区别?你到底知不知道?
现在我们点击,看看输出的东西,可以看出触发的是d,而执行的元素是冒泡的顺序。当你触发一个元素的事件的时候,该事件从该元素的祖先元素传递下去,此过程为。,我们看看输出结果,可以看出触发的是d,而执行的元素是捕获的顺序。这两个对象,但是却有很多人根本就不知道这两个有什么区别~~~,而到达此元素之后,又会向其祖先元素传播上去,此过程为。大家开发中经常会跟DOM的事件打交道,也会经常用到。false:默认,代表冒泡时绑定。我们给四个div元素绑定事件,且。第一个参数:绑定的事件名。第二个参数:执行的函数。原创 2024-03-14 14:19:28 · 186 阅读 · 0 评论 -
聊聊vue的nextTick方法
nextTick是面试常考的vue中的一个重要知识点,但是很多小伙伴常常无法真正的理解nextTick的执行机制,并且背后包含的许多vue的重要知识。本文会把nextTick聊的非常细,让大家彻底搞懂它。原创 2024-03-14 13:39:46 · 788 阅读 · 0 评论 -
WebSocket 的11个面试知识点
WebSocket 作为一种基于 TCP 协议的实时通信协议,为前端应用提供了强大的双向通信能力。本文将深入探讨前端 WebSocket 的相关问题,包括协议区别、用法、关键技术点等。原创 2024-03-13 23:45:13 · 600 阅读 · 1 评论 -
Token无感知刷新
无感知刷新Token是指在Token过期之前,系统自动使用Refresh Token获取新的Access Token,从而实现Token的无感知刷新,用户可以无缝继续使用应用。可以幻想一下,你在一个应用中,填写了很多个表单,最后提交的时候,401认证失败,这个时候你心里肯定一万个....所以为了解决这个问题,给用户更好的体验,本文介绍无感知刷新token的实现。在实现过程中,会发现该实现方式大部分都是在请求拦截和相应拦截中设置的,这样带来的问题就是,耦合性高,接口重试的机制不太好。token验证的原理。原创 2024-03-13 21:50:28 · 348 阅读 · 0 评论 -
如何在vue项目中页面上添加水印?
是 JavaScript 中的一个内置对象,它提供了一种监视 DOM(文档对象模型)树变化的能力。允许开发者注册一个回调函数,当观察的 DOM 节点或子节点发生变化时,会触发这个回调函数。这些变化可以包括节点的添加、移除、属性的变化、文本内容的改变等。使用可以监视特定的 DOM 元素或整个文档,并在相关变化发生时执行相应的操作。这对于实时监测页面变化、自动化测试、实现响应式 UI 等场景非常有用。下面是一个简单的示例,演示如何使用// 目标元素// 创建一个 MutationObserver 实例。原创 2024-03-13 21:14:47 · 766 阅读 · 0 评论 -
7个实用的css技巧,你学会了吗
你可能永远不需要强制让你的访客使用独特的光标。至少,对于一般的用户体验目的来说是这样。然而,关于cursor属性的一点值得注意的是,它允许你展示图片。这相当于以照片格式展示工具提示。一些使用场景包括能够比较两张不同的照片,而无需在视口中渲染这些照片。例如,可以使用光标属性来节省设计中的空间。由于你可以将自定义光标锁定到特定的div元素上,所以它不会干扰到元素之外的其他元素。原创 2024-03-13 11:31:31 · 842 阅读 · 0 评论 -
【axios】你的进度条准确吗
上传和下载操作在前端中是非常常见的,当我们想知道上传或下载的进度时也不难,axios已经实现了监听进度的方法翻一下axios的源码,看看它是如何实现的在/lib/adapters/xhr.js文件中,可以看到这么一段代码其中,config就是我们传给的axios的参数,如果是上传操作并且有传递onUploadProgress函数的话就监听XMLHttpRequest的progress事件,然后周期性地触发回调函数progressEventReducer。原创 2024-03-11 17:06:36 · 823 阅读 · 0 评论 -
一个超冷门的 Vue3 内置组件,帮我优化了66%的性能!
Teleport组件!!原创 2024-03-11 09:53:53 · 499 阅读 · 0 评论 -
如何使用setInterval和setTimeout去代替webSocket进行轮询调用接口查询
3、解决了上面提到的问题,就在以为万事大吉,只待提测的时候。在跟后台联调的过程中发现定时器每1s请求一次接口,发现很多接口没等响应就开启下一次的请求,很多请求都还在pending中,这样是不对的,对性能是很大消耗。所谓的轮询就是,由后端维护某个状态,或是一种连续多篇的数据(如分页、分段),由前端决定按序访问的方式将所有片段依次查询,直到后端给出终止状态的响应(结束状态、分页的最后一页等)。试了下确实达到效果了,但其实这个问题产生的具体原因我还是有些模糊的,希望遇到过相关问题的大佬能指点一下,感激不尽!原创 2024-03-09 10:50:03 · 345 阅读 · 0 评论 -
你不知道的JSON.stringify神操作
好了,今天就和大家分享到这吧。一般如果真涉及到深拷贝,我还是首选自己封装一个方法或者是使用第三方的插件库来做深拷贝,这样最保险,避免不必要的麻烦。原创 2024-03-08 15:42:39 · 449 阅读 · 0 评论 -
如何限制一个账号只在一处登陆
打造一个专注于前端功能问题的问答平台,让大家高效搜索处理同样问题。通过不断积累问题,一起练习逻辑思维,并顺便学习相关知识点。遇到有共鸣的问题,与众多同行朋友们一起讨论,一起沉淀成长。为了给功能问题专栏添加乐趣,增设技术资讯、实用干货两个新专栏。原创 2024-03-03 15:19:53 · 611 阅读 · 0 评论 -
Vue3和ElementPlus封装table组件
Vue 实现了一套内容分发的 API,将 元素作为承载分发内容的出口。简单理解:就是对子组件的扩展,通过 插槽向子组件内部指定位置传递内容。插槽是组件的一块HTML模板,这块模板显示不显示,怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制。原创 2024-03-03 00:51:15 · 1242 阅读 · 0 评论 -
后端一次性返回10万条数据给你,你如何处理?前端分页?
所谓的虚拟列表实际上是前端障眼法的一种表现形式。看到的好像所有的数据都渲染了,实际上只渲染可视区域的部分罢了。如果10万条数据都渲染,那得需要多少dom节点元素呢?所以我们只给用户看,他当下能看到的如果用户要下拉滚动条或者上拉滚动条再把对应的内容呈现在可视区域内。这样就实现了看着像是所有的dom元素每一条数据都有渲染的障眼法效果了。原创 2024-03-02 17:24:29 · 377 阅读 · 0 评论 -
在vue中使用watch要适度,不能滥用,然后成屎山代码
这篇文章介绍了watch主要分为两种使用场景,一种是当watch的值改变后需要同步更新渲染的dataList,另外一种是当watch的值改变后需要异步从服务端获取要渲染的dataList。如果不管同步还是异步都一股脑的将所有代码都写在watch中,那么后续接手的维护者要梳理dataList相关的逻辑就会非常痛苦。因为到处都是watch在更新dataList的值,完全不知道应该在哪个watch中去加上最新的业务逻辑,这种时候我们一般就会再新加一个watch然后在新的watch。原创 2024-03-02 17:09:18 · 482 阅读 · 0 评论