- 博客(74)
- 收藏
- 关注
RSS订阅原创 面试官最喜欢问的 14 种Vue修饰符
众所周知，修饰符也是Vue的重要组成成分之一，利用好修饰符可以大大地提高开发的效率，接下来给大家介绍一下面试官最喜欢问的13种Vue修饰符。
2024-03-25 14:36:02
516
原创 尤雨溪都在推荐的 Vue 拖拽库！
在 Sortablejs 官方以往的 Vue 组件中，都是通过使用组件作为列表的直接子元素来实现拖拽列表，当使用一些组件库时，如果组件库中没有提供列表根元素的插槽，就很难实现拖拽列表，vue-draggable-plus 完美解决了这个问题，它可以让你在任何元素上使用拖拽列表，可以使用指定元素的选择器，来获取到列表根元素，然后将列表根元素作为 Sortablejs 的 container。：用 TypeScript 编写，带有完整的 TS 文档。：支持组件、指令、函数式调用，总有一款是您喜欢的。
2024-03-25 09:12:19
1125
1
原创 面试常问：为什么 Vite 速度比 Webpack 快
通过使用export和import语句，ES Modules 允许在浏览器端导入和导出模块。当使用 ES Modules 进行开发时，开发者实际上是在构建一个依赖关系图，不同依赖项之间通过导入语句进行关联。主流浏览器（除IE外）均支持ES Modules，并且可以通过在 script 标签中设置来加载模块。默认情况下，模块会延迟加载，执行时机在文档解析之后，触发DOMContentLoaded事件前。预构建依赖通常指的是在项目启动或构建之前，对项目中所需的依赖项进行预先的处理或构建。
2024-03-20 15:22:11
1208
3
原创 如何用js判断用户长时间无操作
我们可以通过添加一个变量记录开始执行时间，当下一次执行与当前的时间间隔小于某个值时直接退出函数，从而解决这个问题。事件，在页面隐藏时移除延时器，在页面显示时继续（隐藏时间也可以不计算在内）计时，从而解决这个问题。因而我们可以通过监听相应的输入事件有无触发，来判断用户是否在操作网页。网上冲浪后，也没有找到一个比较好的js封装去解决这个问题，从而决定自己实现。方法执行失败，即添加防抖后不能正常清除延时器，其次嵌套。是的，肯定有那么点影响，那我为啥不添加防抖呢？以下代码，简易实现了一个判断失活的方法。
2024-03-20 15:07:36
904
原创 2024 年 AI 辅助研发趋势
总结来说，AI辅助研发的未来充满挑战和机遇，技术的不断进步和行业应用案例的增多，为研发工作带来了前所未有的效率和创新能力。同时，我们也需要关注伴随而来的挑战，包括技术、伦理和法规问题，以及如何通过教育和培训为这一变革做好准备。
2024-03-18 15:16:43
731
原创 中高级前端工程师都需要熟悉的技能--前端缓存
web缓存主要指的是两部分：浏览器缓存和http缓存。其中http缓存是web缓存的核心，是最难懂的那一部分,也是最重要的那一部分。浏览器缓存：比如,localStorage,sessionStorage,cookie等等。这些功能主要用于缓存一些必要的数据，比如用户信息。比如需要携带到后端的参数。亦或者是一些列表数据等等。不过这里需要注意。像localStorage，sessionStorage这种用户缓存数据的功能，他只能保存5M左右的数据，多了不行。cookie则更少，大概只能有4kb的数据。
2024-03-18 14:47:23
830
原创 前端新能优化篇之localStorage和sessionStorage的区别及其使用方式
注意：在适用sessionStorage和localStorage的时候，存储的敏感数据（比如账号密码）最好都加密一下。不过同一个页面下嵌套的iframe属于同源。同页面下的iframe之间可以进行通讯。，因为sessionStorage的生命周期是基于浏览器页面的。一个窗口存储的数据在另一个窗口可以拿到。在浏览器的“应用程序”里是可以看到的↓。
2024-03-18 14:45:59
826
原创 分享几个ES6常用的方法
上面的代码表示，可以从数组中提取数值，按照对应的位置，对变量赋值。本质上，这种写法属于"匹配模式"，只要等号两边的模式相同，左边的变量就会被赋予对应的值，而解构赋值允许指定的默认值。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。模板字符串，可以换行，也可以在字符串中直接输出变量。数组的元素是按次序排列的，变量的取值由它的位置决定；它的写法就是如果键名和键值的属性名是一样时，可以只写一个。的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量。
2024-03-17 10:33:43
969
原创 28个令人惊艳的JavaScript单行代码
JavaScript作为一种强大而灵活的脚本语言，充满了许多令人惊艳的特性。本文将带你探索28个令人惊艳的JavaScript单行代码，展示它们的神奇魅力。
2024-03-16 19:01:42
284
原创 JavaScript的50个「进阶」知识点
在 Javascript 中，作用域分为全局作用域和函数作用域全局作用域：代码在程序任何地方都能访问，window对象的内置属性都属于全局作用域函数作用域：在固定的代码片段才能被访问image.png作用域有上下级关系，上下级关系的确定就看函数是在哪个作用域下创建的。如上，fn作用域下创建了bar函数，那么“fn作用域”就是“bar作用域”的上级。作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。一般情况下，变量取值到 创建 这个变量 的函数的作用域中取值。
2024-03-14 14:38:28
697
原创 总结了38个ES6-ES12的开发技巧，你能拿几分？
以下例子，PASSWORD属性无法在实例里获取到console.log(login.PASSWORD) // 报错console.log(login[PASSWORD]) // 报错console.log(login[PASSWORD]) // 报错。
2024-03-14 14:37:20
938
原创 有了这25个正则表达式，代码效率提高80%
在日常开发中，正则表达式是非常有用的，正则表达式在每个语言中都是可以使用的，他就跟JSON一样，是通用的。在日常开发中，了解一些常用的正则表达式，能大大提高你的工作效率，例如字符串的匹配表单项的格式校验今天就给大家分享25个开发中常用的正则表达式吧！！！希望大家能提高代码效率！！！
2024-03-14 14:27:02
543
原创 setTimeout+Promise+Async输出顺序？
其实不难，JavaScript代码执行机制，我就归结为三句话1、遇到同步代码直接执行2、遇到异步代码先放一边，并且将他回调函数存起来，存的地方叫事件队列3、等所有同步代码都执行完，再从事件队列中把存起来的所有异步回调函数拿出来按顺序执行
2024-03-14 14:23:53
611
原创 e.target 和 e.currentTarget 的区别？你到底知不知道？
现在我们点击，看看输出的东西，可以看出触发的是d，而执行的元素是冒泡的顺序。当你触发一个元素的事件的时候，该事件从该元素的祖先元素传递下去，此过程为。，我们看看输出结果，可以看出触发的是d，而执行的元素是捕获的顺序。这两个对象，但是却有很多人根本就不知道这两个有什么区别~~~，而到达此元素之后，又会向其祖先元素传播上去，此过程为。大家开发中经常会跟DOM的事件打交道，也会经常用到。false：默认，代表冒泡时绑定。我们给四个div元素绑定事件，且。第一个参数：绑定的事件名。第二个参数：执行的函数。
2024-03-14 14:19:28
272
原创 聊聊vue的nextTick方法
nextTick是面试常考的vue中的一个重要知识点，但是很多小伙伴常常无法真正的理解nextTick的执行机制，并且背后包含的许多vue的重要知识。本文会把nextTick聊的非常细，让大家彻底搞懂它。
2024-03-14 13:39:46
851
原创 WebSocket 的11个面试知识点
WebSocket 作为一种基于 TCP 协议的实时通信协议，为前端应用提供了强大的双向通信能力。本文将深入探讨前端 WebSocket 的相关问题，包括协议区别、用法、关键技术点等。
2024-03-13 23:45:13
764
1
原创 Token无感知刷新
无感知刷新Token是指在Token过期之前，系统自动使用Refresh Token获取新的Access Token，从而实现Token的无感知刷新，用户可以无缝继续使用应用。可以幻想一下，你在一个应用中，填写了很多个表单，最后提交的时候，401认证失败，这个时候你心里肯定一万个....所以为了解决这个问题，给用户更好的体验，本文介绍无感知刷新token的实现。在实现过程中，会发现该实现方式大部分都是在请求拦截和相应拦截中设置的，这样带来的问题就是，耦合性高，接口重试的机制不太好。token验证的原理。
2024-03-13 21:50:28
429
原创 如何在vue项目中页面上添加水印？
是 JavaScript 中的一个内置对象，它提供了一种监视 DOM（文档对象模型）树变化的能力。允许开发者注册一个回调函数，当观察的 DOM 节点或子节点发生变化时，会触发这个回调函数。这些变化可以包括节点的添加、移除、属性的变化、文本内容的改变等。使用可以监视特定的 DOM 元素或整个文档，并在相关变化发生时执行相应的操作。这对于实时监测页面变化、自动化测试、实现响应式 UI 等场景非常有用。下面是一个简单的示例，演示如何使用// 目标元素// 创建一个 MutationObserver 实例。
2024-03-13 21:14:47
1350
原创 web端屏幕截屏，生成自定义海报！
了解，它是如何工作的以及它的一些局限性。在你开始使用这个脚本以前，这里有些帮助你更好的了解脚本的好处及其的一些局限性。在使用之前我们要先定义好页面，我们先在页面上写好海报的html海报标题确定分享.img_box{.img_case{1、是基于html的渲染器，只要定义好海报结构即可生成，可以看成就是将页面结构转换成图片。2、不要使用image标签，应该使用img标签。3、不支持部分css高阶属性。
2024-03-13 14:29:35
1105
原创 7个实用的css技巧，你学会了吗
你可能永远不需要强制让你的访客使用独特的光标。至少，对于一般的用户体验目的来说是这样。然而，关于cursor属性的一点值得注意的是，它允许你展示图片。这相当于以照片格式展示工具提示。一些使用场景包括能够比较两张不同的照片，而无需在视口中渲染这些照片。例如，可以使用光标属性来节省设计中的空间。由于你可以将自定义光标锁定到特定的div元素上，所以它不会干扰到元素之外的其他元素。
2024-03-13 11:31:31
850
原创 2024前端高频面试题-JS篇
事件循环是一个单线程循环，用于监视调用堆栈并检查是否有工作即将在任务队列中完成。如果调用堆栈为空并且任务队列中有回调函数，则将回调函数出队并推送到调用堆栈中执行。
2024-03-12 23:16:56
921
原创 nginx 服务器代理工具（超详细讲解+实操）
为了有一个全面的认知，接下来我们先来看看nginx的架构以及一些特点。这篇文章也基本补齐了对nginx的认识和使用。nginx官网文档。
2024-03-12 17:58:50
3486
原创 bpmn.js Modeling API 列表
(1) 获取modules// (2) 根据ID获取Process和shape// (3) 新建Shape// (4) 添加新的shape到当前流程图// (5) 创建连线。
2024-03-12 13:47:34
276
原创 bpmn-js系列之ContextPad
自定义ContextPad与自定义Palette一样，有两种方式可以选择，第一种就是基于默认的ContextPad来修改，第二种就是完全写个新的ContextPad来替代默认的ContextPad，同样的这里就下完全自定义ContextPad，因为与自定义Palette高度相似，这里以具体代码为主1.在custom目录下新建文件，内容如下config,injector,modeling,connect,create,translate) {"connect",
2024-03-12 13:40:46
981
原创 bpmn-js系列之Palette
为了编辑方便，我想在palette上添加一个shape该如何操作呢？这里我们需要自定义Palette，自定义Palette有两种方式可以选择，第一种就是基于默认的Palette来修改，第二种就是完全写个新的Palette来替代默认的Palette，第一种只能在默认的Palette上添加shape，而不能修改或删除，比较鸡肋我们就直接放弃了，来看下完全自定义Palette该如何实现以下代码基于我们之前搭建好的代码框架，具体可看文章『最好用的流程编辑器bpmn-js系列之基本使用』1.在components。
2024-03-12 11:57:37
880
原创 bpmn-js系列之Viewer
bpmn-js提供了三种修改颜色的方式，如果你想在Modeler（编辑）模式下修改颜色，推荐使用setColor方式，而Viewer（预览）模式则只能通过另外两种overlay和Marker方式来实现，以下为bpmn-js提供的三种修改颜色的方法接触bpmn-js不久，边学边写，文章难免出错，各位多多包含。
2024-03-12 11:47:15
1241
5
原创 bpmn-js系列之Modeler、以及流程编辑界面的优化
接触bpmn-js不久，边学边写，文章难免出错，各位多多包含。想要打造一个好用的适合自己的流程编辑器，需要了解的内容比较多，bpmn-js会分多篇文章来介绍，下一篇介绍bpmn-js的Viewer模式下的节点颜色修改、鼠标拖动等内容，欢迎关注。
2024-03-12 11:27:05
1719
原创 bpmn-js系列之本地文件、保存等
想要打造一个好用的适合自己的流程编辑器，需要了解的内容比较多，bpmn-js会分多篇文章来介绍，下一篇介绍bpmn-js的页面布局等内容，欢迎关注。
2024-03-12 11:17:01
1144
原创 最好用的流程编辑器bpmn-js系列之基本使用
接触bpmn-js不久，边学边写，文章难免出错，各位多多包含。想要打造一个好用的适合自己的流程编辑器，需要了解的内容比较多，bpmn-js会分多篇文章来介绍，这是本系列的第一篇，下一篇介绍bpmn-js的数据保存等内容，欢迎关注部分小伙伴对流程编辑器不了解，或是对BPMN不了解，我搭建了个在线的Demo:，点击链接即可轻松体验，建议PC端打开效果更好。
2024-03-12 10:36:27
4527
4
原创 【axios】你的进度条准确吗
上传和下载操作在前端中是非常常见的，当我们想知道上传或下载的进度时也不难，axios已经实现了监听进度的方法翻一下axios的源码，看看它是如何实现的在/lib/adapters/xhr.js文件中，可以看到这么一段代码其中，config就是我们传给的axios的参数，如果是上传操作并且有传递onUploadProgress函数的话就监听XMLHttpRequest的progress事件，然后周期性地触发回调函数progressEventReducer。
2024-03-11 17:06:36
1339
原创 有Tomcat，为什么还用Nginx？两者有什么区别？
当有多个Tomcat实例运行同一个应用程序时，Nginx可以作为负载均衡器，根据一定的策略将请求分发给不同的Tomcat实例。当你的应用有大量静态文件（如图片、CSS、JavaScript）时，Nginx 可以更高效地处理这些请求，减轻 Tomcat 的负载，提高整体性能。Nginx以其出色的性能和高并发处理能力而闻名，可以处理大量的并发连接和请求。综上所述，使用Nginx作为Tomcat的前端服务器可以提升系统的性能、可伸缩性和安全性，同时还可以通过负载均衡和反向代理等功能来优化Web应用的部署和运行。
2024-03-11 13:46:38
3595
原创 如果让你实现实时消息推送你会用什么技术？轮询、websocket还是sse
在很久很久以前，前端一般使用轮询来进行服务端向客户端进行消息的_伪推送_，为什么说轮询是伪推送？因为_轮询本质上还是通过客户端向服务端发起一个单项传输的请求_，服务端对这个请求做出响应而已。通过不断的请求来实现服务端向客户端推送数据的错觉。并不是服务端主动向客户端推送数据。显然，轮询一定是上述三个方法里最下策的决定。首先轮询需要不断的发起请求，_每一个请求都需要经过http建立连接的流程_（比如三次握手，四次挥手），是没有必要的消耗。客户端需要从页面被打开的那一刻开始就_一直处理请求_。
2024-03-11 11:41:22
1059
原创 如何使用setInterval和setTimeout去代替webSocket进行轮询调用接口查询
3、解决了上面提到的问题，就在以为万事大吉，只待提测的时候。在跟后台联调的过程中发现定时器每1s请求一次接口，发现很多接口没等响应就开启下一次的请求，很多请求都还在pending中，这样是不对的，对性能是很大消耗。所谓的轮询就是，由后端维护某个状态，或是一种连续多篇的数据（如分页、分段），由前端决定按序访问的方式将所有片段依次查询，直到后端给出终止状态的响应（结束状态、分页的最后一页等）。试了下确实达到效果了，但其实这个问题产生的具体原因我还是有些模糊的，希望遇到过相关问题的大佬能指点一下，感激不尽！
2024-03-09 10:50:03
499
原创 你不知道的JSON.stringify神操作
好了，今天就和大家分享到这吧。一般如果真涉及到深拷贝，我还是首选自己封装一个方法或者是使用第三方的插件库来做深拷贝，这样最保险，避免不必要的麻烦。
2024-03-08 15:42:39
456
原创 Vue3和Vue2的相关面试知识点，一点要记住
这里只说Vue2的bind：指令绑定到指定元素时调用，只调用一次inserted：指定元素插入父节点时调用update：所在组件的 VNode 更新时调用：所在组件以及其子组件 VNode 全部更新后调用unbind：只调用一次，指令与元素解绑时调用props: {num: {// 返回值为false则验证不通过，报错return [== -1model: {
2024-03-06 16:17:42
412
1
原创 面试官：你知道几种数组扁平化的方法？
数组扁平化相信不少掘友在一些面试中被问到过，这在我们日常编程中也是一个常规操作，它需要我们将一个多维数组转化成一个一维数组。当然，我相信很多掘友都能回答上这个问题，但如果面试官要我们多回答几种，可能有些掘友就答不上来了，所以，借着这篇文章，我们今天就一起来汇总一下几种数组扁平化的方式。
2024-03-04 15:49:24
476
原创 如何限制一个账号只在一处登陆
打造一个专注于前端功能问题的问答平台，让大家高效搜索处理同样问题。通过不断积累问题，一起练习逻辑思维，并顺便学习相关知识点。遇到有共鸣的问题，与众多同行朋友们一起讨论，一起沉淀成长。为了给功能问题专栏添加乐趣，增设技术资讯、实用干货两个新专栏。
2024-03-03 15:19:53
916
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人