如何使用 JS 判断用户是否处于活跃状态
有时候，我们需要在网页判断用户是否处与非活跃状态，如果用户长时间没有在页面上进行任何操作，我们则判定该用户是非活跃的。 在 javascript 中我们可以通过监听某些鼠标或键盘相关的事件来判定用户是否在活跃中。 ...
JavaScript中执行上下文和执行栈是什么？
一、执行上下文 简单的来说，执行上下文是一种对Javascript代码执行环境的抽象概念，也就是说只要有Javascript代码运行，那么它就一定是运行在执行上下文中 执行上下文的类型分为三种： 全局执行上下文：只有一个，浏览器中的全局对象就是 window对象，this 指向这个全局对象 函数执行 ...
记使用pdf.js过程遇到的坑
最近项目中需要用到js库来渲染pdf文件，调研后发现无论是reach-pdf.js或者是svelte-pdf.js都是在pdf.js基础上做了些许精简，反而功能还不如原始的pdf.js来得全面。但是原始的库几乎没有像样的代码示例，而能搜索到的大多数代码不少都是十几年前的了，在这个过程中踩了不少坑，做 ...
说说webpack proxy工作原理？为什么能解决跨域?
一、是什么 webpack proxy，即webpack提供的代理服务 基本行为就是接收客户端发送的请求后转发给其他服务器 其目的是为了便于开发者在开发模式下解决跨域问题（浏览器安全策略限制） 想要实现代理首先需要一个中间服务器，webpack中提供服务器的工具为webpack-dev-server ...
实现抖音 “视频无限滑动“效果
前言 在家没事的时候刷抖音玩，抖音首页的视频怎么刷也刷不完，经常不知不觉的一刷就到半夜了 不禁感叹道 ＂垃圾抖音，费我时间，毁我青春＂ 这是我的 模仿抖音 系列文章的第二篇，本文将一步步实现抖音首页 视频无限滑动 的效果，干货满满 第一篇：200行代码实现类似Swiper.js的轮播组件 第 ...
next-route
在目录结构中，我们精心创建的每一个文件最终都会经过处理，转化为相应的页面路由。然而，值得注意的是，某些特殊文件格式在生成过程中并不会被当作路由路径来处理。 app |-auth login page.tsx password page.tsx //最后生成的路由路径 //·localhost:300 ...
你是怎么处理vue项目中的错误的？
一、错误类型 任何一个框架，对于错误的处理都是一种必备的能力 在Vue 中，则是定义了一套对应的错误处理规则给到使用者，且在源代码级别，对部分必要的过程做了一定的错误处理。 主要的错误来源包括： 后端接口错误 代码中本身逻辑错误 二、如何处理 后端接口错误 通过axios的interceptor实现 ...
vue3编译优化之“静态提升”
前言 在上一篇 vue3早已具备抛弃虚拟DOM的能力了文章中讲了对于动态节点，vue做的优化是将这些动态节点收集起来，然后当响应式变量修改后进行靶向更新。那么vue对静态节点有没有做什么优化呢？答案是：当然有，对于静态节点会进行“静态提升”。这篇文章我们来看看vue是如何进行静态提升的。 什么是静态 ...
Vue模板语法、属性绑定、条件渲染的学习
Vue模板语法： 使用插值表达式的内容必须是有结果的内容才可以，就是需要return出来的才可以显示出来。 插值表达式所表现的内容为纯文本模式 如何避免 即所有的逻辑操作都在js里面实现，不要再templete中实现可以完美的避免这个问题。 Vue属性绑定 1.使用v-bind 进行属性绑定 语法： ...
CSS user-select 属性(是否允许用户选中文本)
本文操作环境：Windows7系统，CSS3版本，Dell G3电脑。 user-select，设置或检索是否允许用户选中文本 user-select 属性规定是否能选取元素的文本。 在 web 浏览器中，如果您在文本上双击，文本会被选取或高亮显示。此属性用于阻止这种行为。 user-select语 ...
vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？
一、是什么 权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源 而前端权限归根结底是请求的发起权，请求的发起可能有下面两种形式触发 页面加载触发 页面上的按钮点击触发 总的来说，所有的请求发起都触发自前端路由或视图 所以我们可以从这两方面入手，对触发权限的源头进行控制，最 ...
ES 2024 新特性
ECMAScript 2024，第 15 版，添加了用于调整 ArrayBuffer 和 SharedArrayBuffer 大小和传输的功能； 添加了一个新的 RegExp /v 标志，用于创建具有更高级功能的 RegExp，用于处理字符串集； 并介绍了用于构造 Promise 的 Promise... ...
CodePen 的国内替代「笔.COOL」，一个功能完备、使用便捷的在线HTML/CSS/JS编辑器和作品分享平台
笔.COOL 提供了一个功能完备、使用便捷的在线HTML代码编辑和作品分享平台，无论是为了展示你的前端作品、复现 BUG，还是学习其他人的代码，笔.COOL 都是一个非常好的选择。无论你是初入前端的新手还是经验丰富的老鸟，都能在这里找到属于自己的乐趣和价值。 ...
浅谈Vue.js与原生开发
在现代的Web开发中，前端框架的选择是至关重要的。Vue.js作为一款流行的前端框架，与传统的原生开发相比，有许多明显的区别。 模版语法与HTML Vue.js使用特殊的模板语法来创建动态视图，这样开发者可以更方便地表达复杂的逻辑。通过指令（例如v-if、v-for等）和模板表达式，Vue.js简化 ...
给页面加一个遮罩css代码
原版css,他这个需要用到转换工具： body::before{content:"\7f51\7ad9\5347\7ea7\4e2d\ff0c\656c\8bf7\671f\5f85\3002";position:fixed;bottom:2%;left:6%;z-index:99999;width ...
Vue项目中有封装过axios吗？主要是封装哪方面的？
一、axios是什么 axios 是一个轻量的 HTTP客户端 基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端。自Vue2.0起，尤大宣布取消对 vue-resource 的官方推荐，转而推荐 axios。现在 ...
2024高频前端面试题合集(一)
1、请简述Js Bridge JavaScript Bridge 是一种技术，用于在不同的编程语言或环境中传递数据和调用函数。在 Web 开发中，JavaScript Bridge 通常指在 JavaScript 和其他语言（如 Java、Objective-C、Swift 等）之间建立通信的机制。 ...
【动画进阶】极具创意的鼠标交互动画
最近，群里在讨论这么一个有趣的交互效果，来源于：vueflow.dev： 通过审查元素，发现原效果借助了 Canvas 实现。 思索了一番，觉得这个效果利用 CSS 配合部分 Javascript 代码完全也是可以做到的。 于是动手尝试了一番，最终完美的复刻了该效果： 过程中还是有非常多有意思的技巧 ...
深入探索JavaScript中的structuredClone：现代深拷贝的解密指南
在 JavaScript 中，实现深拷贝的方式有很多种，每种方式都有其优点和缺点。今天介绍一种原生 JavaScript 提供的structuredClone实现深拷贝。 下面列举一些常见的方式，以及它们的代码示例和优缺点： 1. 使用 JSON.parse(JSON.stringify(obj)) ...
