为什么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...
优化浏览器渲染主线程的 api 都有哪些？怎么用？
为了提高浏览器的性能和用户体验，现代浏览器采用了一些技术来优化主线程的执行。主要有： setTimeout 延迟加载 （使用不当可能适得其反） web worker 多线程 （不能操作dom，主要计算密集型的任务） requestIdleCallback 帧空闲时运行 （react18带🔥的，低优先级任务） requestAnimationFrame 每帧都会运行 （主要做动画效果调优） setTimeout 延迟加载非常常见，但是它...
你知道生成器和迭代器是啥玩意吗
迭代器和生成器 迭代器和生成器是为了完成函数的中断效果而出现的。让原本只能一次性执行完的函数具备分段处理的功能。在本质上，这两者都属于函数的一种。 迭代器 官方介绍：在 JavaScript 中， 迭代器 是一个对象，它定义一个序列，并在终止时可能返回一个返回值。更具体地说，迭代器是通过使用 方法实现 的任何一个对象，该方法返回具有两个属性的对象： ，这是序列中的 next 值；和 ，如果已经迭代到序列中的最后一个值，则它为 。如果 和...
如何正确地使用encodeURI()对 URL 进行编码
如何正确地使用encodeURI()对 URL 进行编码 方法详解 在 Web 开发中，处理 URL 时经常需要对 URL 进行编码，以确保 URL 的有效性和安全性。JavaScript 提供了 方法来实现这一功能。本文将详细介绍 方法，包括其语法、使用场景以及代码示例。 方法概述 方法用于对整个 URI 进行编码。它会对 URI 中的特殊字符进行编码，以便在网络上传输时不产生歧义。与 方法不同的是， 不会对 URI 中的特殊字符（如...
面试官：console.log(++[[]][+[]] + [+[]])，我：你认真的？
让我们来仔细分析这道经典的 JavaScript 面试题： 说真的，要是在面试中遇到这种变态面试题，我只能说，面试官你过分了啊！这题目拐着弯、绕着圈、还顺便做了个花式回旋，这不就故意刁难人嘛！要是我，直接三下五除二做出来直接就溜了溜了 这段代码看起来非常复杂，但其实它考察了 JavaScript 中的一些核心概念，如 类型转换、操作符优先级、隐式转换 等。通过这道题目，我们可以更深入地了解 JavaScript 的底层机制和行为。本文将...
CSS 终于在 2024 年增加了垂直居中功能
在 2024 年的 CSS 原生属性中允许使用 1 个 CSS 属性 进行垂直居中。 支持情况： | Chrome: 123 | Firefox: 125 | Safari: 17.4 | | | | | CSS 对齐一般会使用 或 布局，因为 在默认的流式布局中不起作用。在 2024 年，浏览器实现了 。 你不需要 flexbox 或 grid，只需要 1 个 CSS 属性就可以进行对齐。 因此内容不需要包裹在 div 中。 令人惊讶...