绕过中间商，不用 input 标签也能搞定文件选择
在本专栏的第一篇文章中，我们重新认识了 这位老伙计，挖掘了它的几个彩蛋特性。在做文件上传时，input 标签确实是我们的黄金搭档。但是为了方便调教 CSS 样式，我们往往需要把 input 标签藏起来，而用其他 HTML 元素来做 UI 代理。似乎是我们只馋 的身子，并不会给它一个名分 🐶。 但其实，不一定非要经过 input 标签这个中间商，我们是可以直接用 JavaScript 和系统进行文件交易的！ ！ 在上面的示例中，左侧是传...
面试题
面试题 对于各位看官老爷们来说，题目应该是非常简单的，由于个人原因，这么好的运气，也没能拿下它，属实是不应该啊，不知道下次面试有没有这么好的运气了（谁还不想当侥幸哥呢！！） 对于token为什么存入localStorage？你是怎么考虑的？ 这个可能需要介绍浏览器存储的特点吧，个人认为，所以就按照存储特点进行回答了。 1. localStorage可以实现一个持久化存储，即使浏览器关闭，它的数据也不会消失，对于需要在多个页面间保持用户登...
“同学，谈谈你对vue3 响应式原理的理解”
深入解析 Vue 3 的响应式原理涉及其核心实现细节和底层机制，主要包括 的使用、依赖收集与触发、以及性能优化策略。 1\. 响应式系统概述 Vue 3 的响应式系统基于 对象来实现数据的自动追踪和更新。 的主要作用是拦截对对象属性的操作（如读取、写入等），并允许开发者定义自定义行为。 2\. 响应式对象的创建 2.1 的使用 构造函数接收两个参数： 目标对象 ：即需要被代理的原始对象。 处理器对象 ：定义了一系列拦截操作的方法（如 、...
JavaScript 内存泄漏：识别与防范
导读 内存泄漏是指程序在不再需要某些对象时，未能释放这些对象所占用的内存，导致内存占用持续增加，最终可能导致系统性能下降甚至崩溃。 在 JavaScript 中，由于其垃圾回收机制（Garbage Collection），内存管理通常由运行时环境自动处理。然而，内存泄漏仍然可能发生，特别是在长时间运行的应用程序中。本文将介绍JavaScript内存泄漏的常见原因及其预防方法。 常见的内存泄漏类型 以下是 JavaScript 中一些常见...
Web浏览器中的JavaScript事件循环机制
JavaScript是一门单线程语言，但通过事件循环（Event Loop）机制，它能够处理异步操作，实现非阻塞的I/O模型。让我们深入了解Web浏览器中的事件循环机制。 事件循环的基本概念 事件循环主要由以下几个部分组成： 1. 调用栈（Call Stack）：用于存储正在执行的函数调用。 2. 堆（Heap）：用于存储对象。 3. 任务队列（Task Queue）： 宏任务队列（Macrotask Queue） 微任务队列（Micr...
为什么vite能够让浏览器识别.vue后缀文件
本文将从 的源码带着大家一起分析我们在使用vite开发Vue项目的时候vite所处理的一些流程，本文不会讲解API的使用，因为本文的难度偏难，如果仅仅是想学习如何配置vite，本文可能不太适合您。 在阅读本文之前，请确保你对vite的基本原理有一定的了解（不一定是了解源码，但是至少要对vite的整体运行过程有一个较为清楚的认识）。众所周知，在 的的生态中，我们通过Vue提供的Loader，分别对Vue单文件组件的template、scr...
从JavaScript执行原理到作用域与闭包
闭包 是JavaScript中非常重要的一个概念，MDN中提到闭包（closure）是一个函数以及其捆绑的周边环境状态（lexical environment，词法环境）的引用的组合。换而言之，闭包让开发者可以 从内部函数访问外部函数的作用域 。在 JavaScript 中，闭包会随着函数的创建而被同时创建。看起来非常晦涩难懂，不易理解。今天写下这篇文章就是想从原理上深入探索，彻底弄明白什么是闭包。 JavaScript执行三阶段与变量...
HTTP缓存：别傻傻不会回答了
前言 在有大量数据交换的应用程序中，我们会采取一些方式将那些实时性要求不高的数据生成副本，并存储在某个相对来说可以快速到达、访问、获取的仓库，这样在需要这些数据的时候可以直接从这个仓库中获取数据。 缓存的目的： 提升数据交换的性能，提高速度。 缓解服务器或数据库的压力。 HTTP 根据是否要向服务器发送请求将缓存规则分为两类：强缓存和协商缓存。 强缓存 在强缓存中，如果命中缓存，则直接从缓存数据库中取出资源，无需再发送请求到服务器上。...
require.context解决img的src属性不能动态链相对路径问题
我有一堆在项目里的图片 想遍历渲染出来（图片都是相对路径） 一顿操作页面报错 在 Vue.js 中， 属性不能直接使用动态链的相对路径，因为 Webpack 的处理方式要求静态资源路径在编译时是已知的。动态路径无法被 Webpack 识别和解析。 使用 Webpack 的 来批量导入图片并在你的 Vue.js 组件中动态引用它们。 （图片文件在 目录下，并且文件名与 中的键一致。例如，如果你有 和 ，它们的文件名应与 中的键一致。） 1...