为什么前端打包出来的静态文件名字是一串 Hash 值 ？
前端打包出来的静态文件名带有一串 Hash 值，主要是为了实现以下几个目的：
缓存有效性：当文件内容发生变化时，Hash 值也随之改变，这意味着浏览器能够识别文件的更新。如果文件内容没有变化，Hash 值保持不变，浏览器可以从缓存中加载文件，节省网络带宽和提高加载速度。
避免缓存问题：在开发和部署过程中，可能会遇到浏览器缓存旧的文件版本的问题。引入 Hash 值后，即使文件的路径没有变化，当文件内容更新时，Hash 值的变化会确保浏览器下载新的文件，避免了缓存所导致的问题。
版本控制：Hash 值可以作为文件的唯一标识，这样在文件名中就包含了版本信息。例如，如果你的构建工具生成了一个名为 app.abc123.js 的文件，当更新内容后会生成 app.def456.js。这使得开发团队和管理人员更容易跟踪和管理不同版本的静态资源。
构建优化：在大型项目中，打包工具（如 Webpack）会根据文件的内容生成 Hash 值，这样可以优化打包过程，促进增量编译和更高效的构建。
提高安全性：通过结合文件的内容生成 Hash 值，可以降低某些类型的攻击风险。例如，攻击者如果想上传一个恶 ...
GitHub
JavaScript Learning...
阮一峰老师的 ES6 入门教程
ES6 入门教程
==>
学习总结
ES6 简介
参考链接
最新提案
let 和 const 简介
变量的解构赋值
字符串的扩展
字符串的新增方法
正则的扩展
数值的扩展
函数的扩展
数组的扩展
对象的扩展
对象的新增方法
Symbol
Set 和 Map 数据结构
Proxy
Reflect
Promise 对象
async 函数
Generator 函数的语法
Generator 函数的异步应用
Iterator 和 for…of 循环
Class 的基本语法
Class 的继承
Module 的语法
Module 的加载实现
编程风格
读懂 ECMAScript 规格
异步遍历器
ArrayBuffer
装饰器
函数式编程
Mixin
面试系列
面试问题锦集
20道大厂前端面试题
大厂JS必考手写题
JavaScript前端必刷面试题
什么是进程？什么的线程？有什么区别
说说你对 shell 的理解？常见的命令？
...
Vue的不同风格写法，你知道么？
引入打开 Vue3 的官方文档，它首先会告诉你，Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API。文档为我们提供一系列两种风格的代码参考，供我们按照偏好进行选择。
实际上，Vue3 组件可不止两种写法，而是多达十几种！然而，不管是什么写法，它们都是基于同一个底层系统实现的，概念之间也是彼此相通的，只是使用的接口不同。在实际开发中，我们也不会同时使用到那么多种写法，但是这并不意味着我们不需要去了解这些写法！
setup 语法糖setup 语法糖应该是最常用的写法了。在 Vue3 中，我们想封装一个组件，最习惯的做法还是新建一个 Vue 文件，并将组件代码写在文件中。具体是：页面结构写在 template 中，页面逻辑写在 script 中，页面样式写在 style 中。
总之，我们将与该组件相关的代码都写在一起、放在一个文件中单独维护，在需要该组件的地方引入使用。
这里我们使用了 setup 语法糖，直接在 script 中书写我们的 setup 内部的逻辑。
12345678910<template> <div>{{ ...
一文解读react-hook(useState、useReducer、useEffect、useCallback、useMemo、useRef、useContext...)
前言react在16版本之后，加入了fiber架构，官方推荐使用纯函数组件，为此react-hook应运而生。
Hook 使用规则Hook 就是 JavaScript 函数，但是使用它们会有两个额外的规则：
只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。
123456789101112131415161718192021import React, { useState } from 'react';let isName = true;function Example() { //报错：React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render // 只能在函数最外层调用 Hook。不要在循环、条件判断或者 ...
GPT4升级指南(2024年5月最新)
GPT4升级，开通 ChatGPT Plus, 升级GPT4.0 详细指南，一看就会前言重磅消息： 5月13日，GPT-4o发布，听说是低配钢铁侠的贾维斯？现在 ChatGPT Plus 用户可以直接使用GPT-4o，感受这一全能AI的强大功能。 赶紧体验一下~ 升级GPT4可以更加深度体验哈~
ChatGPT 官方暂停了升级 GPT-4 的入口，但目前官网还可以直接升级。请注意，这种情况可能会变化（截至2024.5月，此途径仍然可用）。
重要提示：请您尽量不要用微软的邮箱升级 Plus 或绑定 API, 会有被封的风险，谨记。
ChatGPT Plus信用卡付款被拒如果您在订阅ChatGPT Plus的过程中遇到了下面的提示，那您这个帐号就极有可能告别ChatGPT Plus了。不过，你可以换干净的、很少人用的IP地址，也是有可能支付成功的。
Your credit card was declined.Try paying with a debit card instead.
您的信用卡被拒绝了。请尝试用借记卡支付。
你的卡已被拒绝。
您的金融卡已被拒絕。
您的信用卡被拒絕了。請嘗 ...
CSS @符号规则的使用（@font-face、@keyframes、@media、@scope等）
随着前端开发的不断发展，CSS 的功能日益强大，其中 @规则扮演着举足轻重的角色。它们不仅扩展了 CSS 的功能边界，还为开发者提供了更加灵活和高效的样式定义方式，让我们来一同探索这些强大而实用的 @ 规则吧！
@font-face@font-face 用于使用自定义字体。它的基本用法包括定义一个字体家族并为这个家族指定一个或多个字体源文件。字体家族是为字体取的名字，而字体源文件则是字体的实际文件，可以通过 URL 指定。字体文件可以有多种格式，如 TrueType (.ttf)、OpenType (.otf)、Embedded OpenType (.eot)、SVG (.svg) 和 WOFF (.woff) 等。
例如，可以这样使用 @font-face：
12345@font-face { font-family: "MyCustomFont"; src: url("MyCustomFont.woff2") format("woff2"), url("MyCustomFon ...
CSS 函数详解url、min、rgb、blur、scale、rotate、translate等
随着技术的不断进步，CSS 已经从简单的样式表发展成为拥有众多内置函数的强大工具。这些函数不仅增强了开发者的设计能力，还使得样式应用更加动态、灵活和响应式。本文将深入探讨 CSS 常见的 66 个函数，逐一剖析它们的功能和用法，一起进入这个充满魔力的 CSS 函数世界！
基础attr()attr() 函数用于获取被选中元素的某个 HTML 属性值，并在样式文件中使用该值。这个函数也可以应用于伪类元素，此时它获取的是伪元素所依附的原始元素的属性值。
下面来看一个简单的例子：
123div { background-color: attr(data-color);}
在这个例子中，如果有一个 <div> 元素带有 data-color 属性（如 <div data-color="red">），那么该元素的背景色将被设置为红色。
注意，attr() 函数总是返回一个字符串，因此在使用它时需要确保所获取的属性值能够正确地被解析和应用到样式中。此外，不是所有的 CSS 属性都支持 attr() 函数，它通常用于那些可以接受字符串 ...
JS生成UUID的四种方法
全局唯一标识符（GUID，Globally Unique Identifier）也称作UUID(Universally Unique IDentifier) 。GUID是一种由算法生成的二进制长度为128位的数字标识符。GUID 的格式为“xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”，其中的 x 是 0-9 或 a-f 范围内的一个32位十六进制数。在理想情况下，任何计算机和计算机集群都不会生成两个相同的GUID。GUID 的总数达到了2^128（3.4×10^38）个，所以随机生成两个相同GUID的可能性非常小，但并不为0。GUID一词有时也专指微软对UUID标准的实现。
UUID有四个版本：UUID Version 1：基于时间的UUID
基于时间的UUID通过计算当前时间戳、随机数和机器MAC地址得到。由于在算法中使用了MAC地址，这个版本的UUID可以保证在全球范围的唯一性。但与此同时，使用MAC地址会带来安全性问题，这就是这个版本UUID受到批评的地方。如果应用只是在局域网中使用，也可以使用退化的算法，以IP地址来代替MAC地址－－Java的UU ...
js实现数字滚动增长动画多种方案
1、简单函数方案123456789101112131415161718192021222324252627<html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <h1 id="numBox"></h1> </body> <script type="text/javascript"> function NumAutoPlusAnimation(baseNumber, finalNum) { var step = (finalNum - baseNumber) / 20;//颗粒化可以控制速度 var count = baseNumber; // 计数器 var initial = 0; var timer = setInter ...
Vue 改变数据，页面不刷新的问题
Vue 改变数据，页面不刷新的问题最近在用 element-ui 开发一个网站，使用 table 组件时，发现修改完数据，有时候会延迟一两秒，页面才会发生变化。
看了一下代码，发现修改数据的代码是这样的
12// popupData是修改的数据，修改完后，赋值给对应的表格数据this.tableData[this.currentRow] = this.popupData
注意事项（以下内容摘自官方文档）由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
举个例子：
1234567var vm = new Vue({ data: { items: ['a', 'b', 'c'] }})vm.items[1] = 'x' // 不是响应性的vm.item ...