摘要：
页面卡顿的本质是浏览器无法在16.7毫秒内完成一帧的渲染工作（以达到60FPS的流畅度）。 问题根源可归为两大类：CPU计算瓶颈和I/O等待瓶颈。 一、 CPU瓶颈（主线程过载） 根本原因： JavaScript是单线程的。主线程负责执行JS、计算样式、布局、绘制等。一个长时间任务会阻塞整个线程。 阅读全文
posted @ 2025-09-25 22:30
HuangBingQuan
阅读(57)
评论(0)
推荐(0)
摘要：
JavaScript 函数重载技术实现文档 1. 概述 本文档描述了一个 JavaScript 函数重载的实现方案，通过高阶函数和闭包技术，使对象方法能够根据不同的参数长度执行不同的逻辑。 2. 核心实现 2.1 实现代码 /** * 为对象添加重载方法 * @param {Object} obje 阅读全文
posted @ 2025-04-26 14:24
HuangBingQuan
阅读(28)
评论(0)
推荐(0)
摘要：
随着新的一年的钟声敲响，祝大家2024年元旦快乐！愿你的代码如同流水般顺畅，bug远离你的键盘。在这个充满希望的新年里，愿你在编程的世界里发现更多的乐趣和创新。让我们一起在代码的海洋里航行，探索未知的领域，创造出更加精彩的作品。愿你在新的一年里，不仅技术日新月异，也能享受生活的每一个美好瞬间。新年快 阅读全文
posted @ 2024-01-01 20:56
HuangBingQuan
阅读(57)
评论(0)
推荐(0)
摘要：
### 编译结果分析 #### 观察编译结果后，模拟打包模块 ``` // 改对象中保存了所有的模块，以及模块对应的代码 var modules = ((modules)=> { var moduleExports = {}; // 用于缓存模块的导出结果 // require函数相当于是运行一个模 阅读全文
posted @ 2023-04-19 16:44
HuangBingQuan
阅读(54)
评论(0)
推荐(0)
摘要：
Vue数据响应式底层原理 数据响应式定义：（当数据变化的时候，会自动运行一些相关函数） 原理就是通过Object.defineProperty() 对属性进行劫持，当访问该属性时我们就收集依赖，当数据发生改变后就派发更新 function observe(obj) { for (const key 阅读全文
posted @ 2023-02-19 21:59
HuangBingQuan
阅读(64)
评论(0)
推荐(0)
摘要：
深度克隆（深拷贝） export const deepClone = (targetObj)=> { return new Promise(resolve => { const { port1, port2 } = new MessageChannel(); port1.postMessage(ta 阅读全文
posted @ 2022-12-29 23:54
HuangBingQuan
阅读(90)
评论(0)
推荐(0)
摘要：
BroadcastChannel API 提供了一个简单有效的跨页签通信解决方案，特别适合需要实时同步状态的同源页面场景。虽然存在一些局限性，但在合适的业务场景下，它能够以最小的开发成本实现良好的通信效果。 核心实现代码 // 创建频道 const channel = new BroadcastCh 阅读全文
posted @ 2025-10-15 23:45
HuangBingQuan
阅读(12)
评论(0)
推荐(0)
摘要：
交叉观察者- IntersectionObserver复盘 一、 Intersection Observer是什么？ Intersection Observer API 提供了一种异步观察目标元素与祖先元素或视口交叉状态的方法。通俗地说，就是可以高效地监测一个元素是否进入或离开了另一个元素的“可视区 阅读全文
posted @ 2025-10-13 23:17
HuangBingQuan
阅读(17)
评论(0)
推荐(0)
摘要：
什么是泛型 T 是一个类型变量，代表"某种类型" 举个例子 loadMore: (page: number) => Promise<T[]>; 相当于说：这个函数返回一个Promise，Promise解析的结果是T类型的数组 实际使用时的具体化 // 当 T = Product 时： loadMor 阅读全文
posted @ 2025-09-30 23:59
HuangBingQuan
阅读(9)
评论(0)
推荐(0)
摘要：
这是一种 TypeScript 的高级类型技巧，用于从值推导出类型，实现类型和值的完美同步。 基本语法 /** 常量数组声明 声明了一个名为 eventNames 的常量，其值是一个字符串数组。 as const 这是 TypeScript 的 字面量常量断言 没有 as const 时，TypeS 阅读全文
posted @ 2025-09-20 22:45
HuangBingQuan
阅读(19)
评论(0)
推荐(0)
摘要：
定义 自定义Hook就是将常用的、跨组件的Hook功能或实现极致的逻辑与UI分离抽离成一个useXxx函数。 意义 自定义Hook实现了 逻辑与UI分离 。 组件变得非常轻量，只负责使用数据并渲染UI，而所有复杂的状态管理、数据获取等业务逻辑 都委托给了自定义 Hook。 这让代码的可维护性和复用性 阅读全文
posted @ 2025-09-05 00:20
HuangBingQuan
阅读(13)
评论(0)
推荐(0)
摘要：
要理解useMemo首先要明白React函数式组件是如何工作的 React 函数组件工作原理 渲染即调用：函数组件的本质就是一个 JavaScript 函数，每次状态（State）或属性（Props）发生变化时，React 就会调用这个函数来生成新的虚拟 DOM（JSX），并与之前的进行对比（Dif 阅读全文
posted @ 2025-09-01 00:22
HuangBingQuan
阅读(21)
评论(0)
推荐(0)
摘要：
CSS 线性渐变 线性渐变(linear-gradient)是CSS中创建颜色平滑过渡的强大工具。 基本语法 background-image: linear-gradient(渐变方向, 颜色1 变化区间, 颜色2 变化区间, ... 颜色n变化区间); 渐变方向 使用角度：0deg（上到下）、9 阅读全文
posted @ 2025-07-29 22:32
HuangBingQuan
阅读(40)
评论(0)
推荐(0)
摘要：
React 错误边界 React错误边界的本质上是防止子组件错误（渲染过程中）向上冒泡导致整个应用崩溃，错误边界可以解决导致整个应用崩溃问题。 在 React 错误边界中，fallback 确实实现了典型的降级策略： 理想情况：正常渲染业务组件 异常情况：当组件崩溃时，降级显示预设的备用 UI（组件 阅读全文
posted @ 2025-07-25 22:08
HuangBingQuan
阅读(48)
评论(0)
推荐(0)
摘要：
什么是AbortController？ AbortController 是现代浏览器提供的 Web API，用于中止一个或多个 Web 请求。它已经成为取消异步操作的标准方式。 AbortController 对象 和 AbortSignal 对象 AbortController 对象：主控制器，用 阅读全文
posted @ 2025-06-10 16:52
HuangBingQuan
阅读(52)
评论(0)
推荐(0)
摘要：
用于自动识别和引入 uView UI 组件库的组件。 pages.json下配置easycom "easycom": { "autoscan": true, "custom": { "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" } } 1. easyc 阅读全文
posted @ 2025-06-04 16:40
HuangBingQuan
阅读(293)
评论(0)
推荐(0)
摘要：
在 SCSS 中，@import 和 @use 都是用于引入其他样式文件的规则，但它们的工作方式和用途有显著区别。 以下是两者的主要对比： @import 全局作用域：通过 @import 引入的文件中的变量、混合（mixins）、函数等会全局暴露，可能导致命名冲突。 // file: _vars. 阅读全文
posted @ 2025-05-16 09:47
HuangBingQuan
阅读(305)
评论(0)
推荐(0)
摘要：
useResize 是一个自定义 Vue3 Hook，用于实现大屏项目的自适应布局。它通过监听窗口尺寸变化，自动调整页面元素的缩放比例，确保在不同分辨率下都能保持一致的视觉效果。 import { onBeforeMount, onBeforeUnmount, onMounted, ref } fr 阅读全文
posted @ 2025-05-02 21:55
HuangBingQuan
阅读(97)
评论(0)
推荐(0)
摘要：
这段代码是一个用于移动端响应式布局的 REM 自适应方案，其核心原理是通过动态调整根元素（html）的字体大小（font-size），使得页面元素能够根据屏幕宽度等比缩放。 假设设计稿宽度为 1080px，定义 1rem = 100px。 设计稿中 100px 的元素 → 代码写为 1rem。 根字 阅读全文
posted @ 2025-03-31 17:23
HuangBingQuan
阅读(85)
评论(0)
推荐(0)
摘要：
webpack中的hash 在Webpack配置中，hash的目的是为了生成唯一的文件名：bundle.(hash).js 不同环境下对hash的需求是不一样的 开发环境：频繁进行代码修改和构建，不需要长时间缓存，生产hash会增加不必要的构建时间。 生产环境：希望生产hash，以便利用浏览器缓存机 阅读全文
posted @ 2025-03-14 20:43
HuangBingQuan
阅读(25)
评论(0)
推荐(0)
摘要：
TypeScript 中的类型拓宽（Type Widening）是 TypeScript 编译器在推断变量类型时的一种行为。 它通常发生在使用 let 或 var 声明变量时，TypeScript 会将变量的类型推断为一个更宽泛的类型，而不是具体的字面量类型。这种行为是为了确保变量在后续可以被重新赋 阅读全文
posted @ 2025-03-04 13:37
HuangBingQuan
阅读(23)
评论(0)
推荐(0)
摘要：
tsconfig.json jsx为react-jsx React中提示xxxx不能用作JSX组件 产生原因：TypeScript 与 @types/react 版本不适配 版本对照表 https://www.npmjs.com/package/@types/react?activeTab=vers 阅读全文
posted @ 2025-02-28 16:26
HuangBingQuan
阅读(64)
评论(0)
推荐(0)
摘要：
Form.Item 下有多层包裹导致表单无法正确回填数据 在 Ant Design v4 中，如果 Form.Item 下有多层包裹（例如 Input 被包裹在 div 或其他组件中），可能会导致表单无法正确回填数据。这是因为 Form.Item 需要通过 name 属性找到直接子组件（如 Inpu 阅读全文
posted @ 2025-02-27 15:46
HuangBingQuan
阅读(81)
评论(0)
推荐(0)
摘要：
GitLab上配置SSH来拉取代码 1. 生成 SSH 密钥（如果尚未生成） 打开终端（Linux/macOS）或 Git Bash（Windows），运行以下命令生成密钥： ssh-keygen -t ed25519 -C "your_email@example.com" 按回车确认默认保存路径（ 阅读全文
posted @ 2025-02-24 13:03
HuangBingQuan
阅读(1726)
评论(0)
推荐(0)
摘要：
HtmlWebpackPlugin 版本号："webpack-dev-server": "^3.10.1" html-webpack-plugin@3 是较旧的版本（最新主版本已到5.x），主要适配 Webpack 4 及更早版本。 npm install html-webpack-plugin@3 阅读全文
posted @ 2025-02-16 20:54
HuangBingQuan
阅读(48)
评论(0)
推荐(0)
摘要：
webpack.BannerPlugin 是一个用于在生成的打包文件顶部添加自定义注释或横幅的插件。它通常用于添加版权信息、版本号、作者信息等。 基本配置 BannerPlugin 的配置对象可以是一个字符串或一个对象。以下是两种常见的配置方式： 1. 字符串配置 const webpack = r 阅读全文
posted @ 2025-02-06 11:44
HuangBingQuan
阅读(100)
评论(0)
推荐(0)
摘要：
1. 虚拟DOM的本质 在 Vue 中，可以通过一个名叫 h 的函数，该函数的调用结果就是返回虚拟 DOM，也就意味着虚拟DOM的本质是由渲染函数调用生成的普通JS对象. 真实DOM和虚拟DOM都设计到了两个层面计算 真实DOM 解析字符串（JS层面） 创建DOM的节点（DOM层面） 虚拟DOM 创 阅读全文
posted @ 2025-01-13 17:09
HuangBingQuan
阅读(40)
评论(0)
推荐(0)
摘要：
安装 TypeScript（TS）是一种编译时的静态类型语言，是一种强类型语言。 静态类型: 在TypeScript中，变量和函数的类型是在编写代码时指定的，而不是在运行时确定的。这有助于捕捉类型错误，并提供更好的代码自动补全、导航和重构支持。 编译时: 浏览器和nodejs并不能直接识别TS代码， 阅读全文
posted @ 2024-12-31 14:54
HuangBingQuan
阅读(64)
评论(0)
推荐(0)
摘要：
使用第三库简化流程 ts-node: 将ts代码在内存中完成编译，同时完成运行 安装: npm i -g ts-node 运行: ts-node src/index.ts nodemon: 检测文件变化 安装: npm i -g nodemon 运行: nodemon --exec ts-node 阅读全文
posted @ 2024-12-31 14:44
HuangBingQuan
阅读(14)
评论(0)
推荐(0)
摘要：
git 常用命令。 创建SSH Key $ ssh-keygen -t rsa -C "youremail@example.com" 配置用户信息 $ git config --global user.name "Your Name" $ git config --global user.email 阅读全文
posted @ 2024-12-11 12:27
HuangBingQuan
阅读(13)
评论(0)
推荐(0)
摘要：
为防止不符合规范的数据存入数据库，在用户对数据进行插入、修改、删除等操作时，MySQL提供了一种机制来检查数据库中的数据是否满足规定的条件，以保证数据库中数据的准确性和一致性，这种机制就是完整性约束。 MySQL中主要支持以下几种种完整性约束，如表所示。 其中Check约束是MySQL8中提供的支持 阅读全文
posted @ 2024-12-07 15:22
HuangBingQuan
阅读(106)
评论(0)
推荐(0)
摘要：
DDL修改，删除数据库表 -- 修改表结构 -- 增加一列 ALTER TABLE t_student ADD score DOUBLE(5, 2); -- 增加一列（放在最前面） ALTER TABLE t_student ADD score DOUBLE(5, 2) FIRST; -- 增加一列 阅读全文
posted @ 2024-12-07 14:16
HuangBingQuan
阅读(14)
评论(0)
推荐(0)
摘要：
修改，删除数据 DML -- 修改操作 UPDATE t_student SET age = 23 WHERE sno = 2056035; -- 删除操作 DELETE FROM t_student WHERE sno = 2056035; 总结 关键字，表名，字段名不区分大小写。 默认情况下，内 阅读全文
posted @ 2024-12-07 13:42
HuangBingQuan
阅读(10)
评论(0)
推荐(0)
摘要：
插入数据 SELECT * FROM t_student; -- 在t_student数据库表中插入数据 INSERT INTO t_student VALUES (2056035, '张三', '男', 18, NOW(), '移动2002', '666666@163.com'); INSERT 阅读全文
posted @ 2024-12-06 23:56
HuangBingQuan
阅读(8)
评论(0)
推荐(0)
摘要：
hash模式 <html> <head> <meta charset="UTF-8"> <title>Hash</title> <style> .nav_container { display: grid; justify-content: center; width: 100%; height: 阅读全文
posted @ 2024-11-27 17:09
HuangBingQuan
阅读(14)
评论(0)
推荐(0)
摘要：
vite.config.js中配置esbuild import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export 阅读全文
posted @ 2024-11-27 15:57
HuangBingQuan
阅读(136)
评论(0)
推荐(0)
摘要：
webpack+Terser 代码压缩 // webpack.config.js const TerserPlugin = require('terser-webpack-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css- 阅读全文
posted @ 2024-11-15 15:35
HuangBingQuan
阅读(14)
评论(0)
推荐(0)
摘要：
圣杯模式 圣杯模式的核心就是拿一个空的构造函数去当中间人,解决组合模式的缺陷。 举个例子 function Person(name, age) { this.name = name??""; this.age = age??""; }; Person.prototype.say = function 阅读全文
posted @ 2024-09-16 22:29
HuangBingQuan
阅读(55)
评论(0)
推荐(0)
摘要：
组合模式 前置知识 原型 原型链 apply 举个例子 function Person(name, age) { this.name = name??""; this.age = age??""; }; Person.prototype.say = function () { console.log 阅读全文
posted @ 2024-09-16 19:18
HuangBingQuan
阅读(9)
评论(0)
推荐(0)
摘要：
数据模式，结构，Props Vue双向绑定，修改数据自动更新视图，React单向数据流，需要手动setState。 Vue template 结构表现分离，React jsx 结构表现融合。 Vue Props 要声明才能使用，React 不需要声明直接使用。 阅读全文
posted @ 2024-09-04 14:48
HuangBingQuan
阅读(14)
评论(0)
推荐(0)
摘要：
使用ref 可以使用 ref 创建一个响应式的数据： <template> <div>{{ name }}</div> </template> <script setup> import { ref } from 'vue' // 现在的 name 就是一个响应式数据 let name = ref( 阅读全文
posted @ 2024-09-03 00:20
HuangBingQuan
阅读(40)
评论(0)
推荐(0)
摘要：
// 该函数就是接受不了多个参数 // function add(x, y) { // return x + y; // } // console.log(add(1, 2)); // 3 // console.log(add(5, 7)); // 12 // 接下来我们要将其进行柯里化 // fu 阅读全文
posted @ 2024-08-06 09:51
HuangBingQuan
阅读(22)
评论(0)
推荐(1)
摘要：
/* * @Author: HuangBingQuan <17671241237@163.com> * @Date: 2024-07-07 21:16:08 * @LastEditTime: 2024-07-08 12:56:45 * @FilePath: /myCdn/index.js */ co 阅读全文
posted @ 2024-07-08 13:11
HuangBingQuan
阅读(21)
评论(0)
推荐(0)
摘要：
所有的webpack内置插件都作为webpack的静态属性存在的，使用下面的方式即可创建一个插件对象 const webpack = require("webpack") new webpack.插件名(options) DefinePlugin 全局常量定义插件，使用该插件通常定义一些常量值，例如 阅读全文
posted @ 2024-06-24 13:15
HuangBingQuan
阅读(16)
评论(0)
推荐(0)
浙公网安备 33010602011771号