- 博客(928)
- 收藏
- 关注
RSS订阅原创 JavaScript 中的 Set、Map、WeakSet、WeakMap 详解
JavaScript 提供了四种特殊的集合类型：Set、Map、WeakSet 和 WeakMap。它们各有特点，适用于不同的场景。 选择指南1. 需要存储唯一值 → Set2. 需要键值对且键可能不是字符串 → Map3. 需要存储对象且不希望阻止垃圾回收 → WeakSet/WeakMap4. 需要关联对象与数据且对象可能被销毁 → WeakMap5. 需要关联对象与数据且对象可能被销毁 → WeakMap这些集合类型为JavaScript提供了更丰富的数据结构选择，能够更优雅地解
2025-04-04 12:14:27
317
原创 JavaScript中Symbol详解及使用场景
Symbol的主要用途是创建唯一标识符，避免命名冲突，特别适合用于：1. 对象属性的唯一键名；2. 定义私有属性；3. 定义常量；4. 修改内置对象的行为；在现代JavaScript开发中，Symbol已经成为实现元编程和解决命名冲突的重要工具。
2025-04-02 23:31:14
401
原创 JavaScript函数式编程思想
纯函数是一种函数，其返回值仅由其输入参数决定，不产生任何可观察的副作用，如修改全局对象或外部状态。纯函数具有以下特性：1. 确定性：相同的输入永远得到相同的输出；2. 无副作用：函数执行过程中不会改变任何外部状态；纯函数在函数式编程中非常重要，因为它们提供了可预测性和可测试性。由于纯函数不依赖于且不修改外部环境的状态，它们在并发环境下特别有用，可以减少在多线程环境中由状态改变引起的错误。此外，纯函数的可组合性使得开发者能够构建更加模块化和可重用的代码。
2025-03-30 21:51:04
796
原创 JavaScript 手写 call、apply、bind 和 new
本文深入探讨 JavaScript 中 call、apply、bind 和 new 四大核心功能的手写实现，通过从零复现这些方法，揭示其底层运行机制与设计思想。文章不仅提供可直接运行的代码示例，还结合分步解析、边界条件处理及实际应用场景。
2025-03-27 10:59:49
382
原创 JavaScript中的继承有哪些方式？各有什么优缺点
在 JavaScript 中，继承主要通过原型链实现，常见的继承方式有以下几种，每种方式都有其优缺点。1. 原型链继承；2. 构造函数继承；3. 组合继承（经典继承）；4. 原型式继承；5. 寄生式继承；6. 寄生组合式继承（最优解）；7. ES6 class 继承
2025-03-26 23:04:15
331
原创 JavaScript创建对象的多种方式
在JavaScript中，创建对象有多种方式，每种方式都有其优缺点。本文将介绍四种常见的对象创建模式：工厂模式、构造函数模式、原型模式和组合模式，并分析它们的特点以及如何优化。
2025-03-26 00:31:15
797
原创 JavaScript原型和原型链详解
JavaScript 是一门基于原型的语言，理解原型和原型链是掌握 JavaScript 面向对象编程的关键。本文将详细讲解 JavaScript 中的原型和原型链，帮助你深入理解其工作机制。
2025-03-25 00:18:32
704
原创 第六篇：Setup：组件渲染前的初始化过程是怎样的？
Vue.js 3.0 允许我们在编写组件的时候添加一个 setup 启动函数，它是 Composition API 逻辑组织的入口，本节课我们就来分析一下这个函数。可以看到，这段代码和 Vue.js 2.x 组件的写法相比，多了一个 setup 启动函数，另外组件中也没有定义 props、data、computed 这些 options。
2025-03-21 22:25:41
1383
1
原创 Python中数据结构元组详解
在Python中，元组（Tuple）是一种不可变的序列类型，常用于存储一组有序的数据。与列表（List）不同，元组一旦创建，其内容无法修改。本文将详细介绍元组的基本操作、常见运算、内置函数以及其不可变性。
2025-03-21 17:15:38
626
原创 JavaScript中Promise详解
Promise 是 JavaScript 中处理异步操作的重要工具。它通过 .then() 和 .catch() 方法提供了更清晰的代码结构，避免了回调地狱。async/await 进一步简化了 Promise 的使用，使得异步代码看起来更像同步代码。掌握 Promise 的使用对于编写现代 JavaScript 应用程序至关重要。
2025-03-13 10:30:01
619
原创 JavaScript中的生成器函数详解
在 JavaScript 中，生成器函数 Generator Function 是一种特殊的函数，它允许你在函数执行过程中暂停和恢复。生成器函数通过 function* 语法定义，并使用 yield 关键字来控制函数的执行流程。生成器函数返回一个生成器对象，该对象遵循迭代器协议，可以逐步生成值。
2025-03-11 00:32:42
799
原创 JavaScript异步调度器的实现与常用场景
在JavaScript中，异步调度器是一种用于管理和调度异步任务的工具。它可以帮助我们控制任务的执行顺序、并发数量以及任务的优先级。常见的异步调度器可以通过Promise、async/await、setTimeout、setInterval等机制来实现。
2025-03-10 17:43:41
510
原创 V8引擎中的垃圾回收机制如何工作?
V8 的垃圾回收机制通过分代回收、增量标记、惰性清理和并发标记清理等技术，实现了高效的内存管理和低延迟的垃圾回收。其核心思想是：1. 分而治之：将内存分为新生代和老生代，采用不同的回收策略；2. 减少停顿：通过增量标记和并发回收，尽量减少对主线程的影响；3. 动态优化：根据内存使用情况和应用需求，动态调整垃圾回收策略；这些设计使得 V8 能够在高性能和低延迟之间取得平衡，为现代 JavaScript 应用提供强大的内存管理支持。
2025-03-06 22:22:29
1096
原创 JavaScript中函数柯里化是什么 ？
函数柯里化的应用场景非常广泛，主要包括：1. 参数复用：固定部分参数，生成新函数；2. 延迟执行：在参数未完全传入时暂不执行；3. 函数组合：将多个函数组合成一个新函数；4. 提高代码可读性：将复杂逻辑拆解为简单步骤；5. 动态生成函数：根据输入动态生成新函数；通过柯里化，可以写出更灵活、简洁和可维护的代码，尤其在函数式编程中非常有用。
2025-03-06 16:46:30
559
原创 JavaScript在执行编译时的优化策略有哪些？
现代 JavaScript 引擎通过内联缓存、隐藏类、逃逸分析、内联函数、去优化和热点代码优化等策略，极大地提高了代码的执行效率。这些优化策略使得 JavaScript 能够接近静态类型语言的性能，同时保持其动态类型的灵活性。理解这些优化策略有助于编写高性能的 JavaScript 代码。
2025-03-04 22:20:58
1022
原创 JavaScript的执行过程是什么样的？
JavaScript 的执行过程可以分为几个关键阶段，包括解析、编译、执行等。JavaScript 的执行过程是一个复杂的机制，涉及解析、编译、执行上下文、事件循环和垃圾回收等多个阶段。理解这些细节有助于编写高效、可靠的代码，并更好地调试和优化性能。
2025-02-27 20:00:35
347
原创 Chrome浏览器原理及优化
1. 输入URL，用户在浏览器的地址栏输入一个URL，并按下回车键；2. DNS解析；浏览器需要将域名转换为服务器的IP地址，以建立连接。(1). 如果浏览器缓存、操作系统缓存或路由器缓存中已有该域名的IP地址，则直接获取；(2). 否则，会向本地域名服务器发起DNS查询请求，通过递归查询的方式获得IP地址；3. TCP链接；浏览器与目标服务器之间使用三次握手建立TCP连接......
2025-02-09 13:07:34
797
原创 后台管理系统全屏功能实现
后台管理系统中有一个比较常见的功能就是全屏显示，以方便用最大的屏幕查看系统，特别是在小屏模式下。对于 screenfull 而言，浏览器本身已经提供了对用的 API，点击这里即可查看，这个 API 中，主要提供了两个方法：1. Document.exitFullscreen()：该方法用于请求从全屏模式切换到窗口模式；2. Element.requestFullscreen()：该方法用于请求浏览器将特定元素置为全屏模式；但是该方法会存在一定的小问题，比如有些区域背景颜色为黑色。
2025-01-07 23:44:57
487
原创 后台管理系统引导功能的实现
引导页是软件中经常见到的一个功能，无论是在后台项目还是前台或者是移动端项目中。那么对于引导页而言，它是如何实现的呢？通常情况下引导页是通过聚焦的方式，高亮一块视图，然后通过文字解释的形式来告知用户该功能的作用。所以说对于引导页而言，它的实现其实就是：页面样式的实现。我们只需要可以做到：1. 高亮某一块指定的样式；2. 在高亮的样式处通过文本展示内容；3. 用户可以进行下一次高亮或者关闭事件；那么就可以实现对应的引导功能。
2025-01-07 00:24:14
549
原创 后台管理系统Hamburger组件实现
后台管理系统中几乎都会用到Hamburger组件，该组件主要用于折叠和展开左侧菜单栏，系统默认为展开菜单栏，当屏幕较小时可以折叠菜单栏，以便可以用更大的屏幕区域来查看系统数据区域。
2025-01-05 23:09:52
426
原创 后台管理系统动态面包屑Breadcrumb组件的实现
在后管理系统开发中，面包屑导航是一个非常常见的功能，通常是根据当前的 url 自动生成面包屑导航菜单，当跳转路由发生变化时，面包屑导航都会随之发生变化，即动态面包屑。要完成动态面包屑我们需要制作一个动态数组，数组中每个 item 都表示一个 路由信息，在这里我们使用到route.match 属性，该属性可以获取路由地址匹配的标准化的路由记录。
2025-01-05 20:51:17
523
原创 后台管理系统用户退出登录方案实现
退出登录一直是一个通用的前端实现方案，对于退出登录而言，它的触发时机一般有两种：1. 用户主动退出，即用户点击登录按钮之后退出；2. 用户被动退出，Token过期或被 其他人"顶下来"时退出；那么无论是什么退出方式，在用户退出时，所需要执行的操作都是固定的：1. 清理掉当前用户缓存数据；2. 清理掉权限相关配置；3. 返回到登录页；
2025-01-05 16:02:40
1538
原创 Vue 3.0 中封装icon组件使用外部SVG图标
通常在企业级项目开发时，所使用的 icon 图标，一共分为两类：1. element-plus 的图标2. 自定义的 svg 图标对于 element-plus 的图标我们可以直接通过 el-icon 来进行显示，但是自定义图标的话却无法正常显示，所以就需要一个自定义的组件，来显示我们自定义的 svg 图标。对于这个组件的话，它就需要拥有两种能力：1. 显示外部 svg 图标2. 显示项目内的 svg 图标
2025-01-02 23:43:25
683
原创 Vue 3.0 中 template 多个根元素警告问题
在 Vue 3.0 中开始支持 template 存在多个根元素了。出现这个问题的原因主要是： vetur 这个 VSCode 插件依然按照 Vue 2.0 的单一根元素逻辑进行检测，所以会出现提示错误的问题。在 Vue 2.0 中，template 只允许存在一个根元素，但是这种情况在 Vue 3.0 里发生了一些变化。但是大家要注意，虽然这样不太好看，但是该问题并不影响代码运行。按以上两种方式执行之后，多根元素就不会出现不好看的错误了。２. 重启 VSCode。
2025-01-01 21:58:59
427
原创 lint-staged 自动修复格式错误
在之前的文章《通过pre-commit 处理提交时代码规范》中介绍了当我们进行代码提交时，会检测所有的代码格式规范。但是这样会存在两个问题：1. 我们只修改了个别的文件，没有必要检测所有的文件代码格式；2. 它只能给我们提示出对应的错误，我们还需要手动的进行代码修改；那么想要处理这两个问题，就需要使用另外一个插件 lint-staged 。
2025-01-01 21:13:24
237
原创 通过 pre-commit 处理提交时代码规范
在《使用ESLint与Prettier配合解决代码格式问题》的文章中，我们讲解了如何处理本地代码格式问题。但是这样的一个格式处理问题，他只能够在本地进行处理，并且我们还需要 手动在 VSCode 中配置自动保存 才可以。那么这样就会存在一个问题，要是有人忘记配置这个东西了怎么办呢？他把代码写的乱七八糟的直接就提交了怎么办呢？所以我们就需要有一种方式来规避这种风险。那么想要完成这么一个操作就需要使用 husky 配合 eslint 才可以实现。
2025-01-01 18:42:47
311
原创 使用ESLint与Prettier配合解决代码格式问题
ESLint和Prettier会存在一些冲突问题，代码保存时会自动在方法名后添加空格，所以需要在ESLint配置中添加如下配置。如上图所示，在VSCode中搜索插件Pretttier，安装后重启VSCode即可生效。如果有多个格式化工具有多个，可能会此起冲突，请将Prettier设置成默认的。如下图所示，设置编辑器让其在保存代码时自动格式化代码。
2025-01-01 18:01:33
465
原创 使用 commitlint 和 husky 检查提交描述是否符合规范要求
在上一小节中，我们了解了 Git hooks的概念，那么接下来我们就使用 Git hooks来去校验我们的提交信息。要完成这么个目标，那么我们需要使用两个工具：注意：npm 需要在 7.x 以上版本。1.commitlint 用于检查提交信息1.1.安装依赖npm install --save-dev @commitlint/config-conventional@12.1.4 @commitlint/cli@12.1.41.2.创建配置文件commitlint.con
2024-12-30 23:08:04
412
原创 什么是 Git Hooks？
在团队开发中，当成员提交代码的描述信息不符合约定提交规范的时候，需要阻止当前的提交，而要实现这个目的，我们就需要先来了解一个概念，叫做 Git hooks，即Git 在执行某个事件之前或之后进行一些其他额外的操作。而我们所期望的 阻止不合规的提交消息，那么就需要使用到 hooks 的钩子函数。
2024-12-29 00:49:27
1148
原创 如何规范的提交Git？
多人协作开发提交代码通常是遵循约定式提交规范，如果严格安照约定式提交规范， 手动进行代码提交的话，那么是一件非常痛苦的事情，但是 Git 提交规范的处理又势在必行，那么怎么办呢？经过了很多人的冥思苦想，就出现了一种叫做 Git 提交规范化工具的东西，而我们要学习的 Commitizen 就是其中的佼佼者！
2024-12-28 23:35:21
542
原创 Webpack一键打包多个环境
安装如下插件，以便可以在打包命令中设置环境变量区分不同的环境。在package.json中配置正式环境和测试环境打包命令，同时添加一个命令同打包两个环境。在vue.config.js中添加打包输出配置，其中正式环境打包输出到dist_prod文件夹，测试环境打包输出到dist_test文件夹。在package.json中配置正式环境和测试环境打包命令，同时添加一个命令同打包两个环境。安装如下插件，以便可以在打包命令中设置环境变量区分不同的环境。
2024-10-16 21:13:21
579
原创 React-router 6.0常用功能
NavLink相比于Link，主要用于导航，在传入的样式中可以用回调函数获取当前的导航是否被激活，从而可以添加对应的状态。加了基础路由后，路由地址就会多一个根路由，所有的路由地址都会基于这个地址进行跳转，这个在一些微服务的场景还是很有用的。
2024-08-20 00:57:41
651
原创 TypeScript学习第十五篇 － tsconfig.json配置
TypeScript 使用 tsconfig.json 文件作为其配置文件，当一个目录中存在 tsconfig.json 文件，则认为该目录为 TypeScript 项目的根目录。基础字段 files - 设置要编译的文件的名称；['./src/main.tsx']；include - 设置需要进行编译的文件，支持路径模式匹配；['src']；exclude - 设置无需进行编译的文件，支持路径模式匹配；['node_modules']；compilerOptions - 编译配置选项
2024-08-15 23:48:52
441
原创 TypeScript学习第十四篇 － 类型的常见操作
1. 获取Key的类型，JS当中获取key的语法：Object.keys()，TS当中获取key的类型：keyof2.获取对象类型3.遍历枚举类型
2024-08-15 00:32:52
399
原创 TypeScript学习第十三篇 － 泛型
在编译期间不确定变量的类型，在调用时，由开发者指定具体的类型。定义的时候，无法确定类型，只有在调用的时候，才能确定参数类型。Pick 就是挑选的意思，可以从已有的类型中，挑选一些类型进行使用。
2024-08-14 12:24:46
221
原创 TypeScript学习第十二篇 － 各种数据类型的定义
1. 接口通过interface定义，type是用来定义类型别名；2. 接口可以重复定义，type不可以；3. 接口可以继承，type不可以继承，但是可以使用联合类型和交叉类型来模拟继承；
2024-08-12 00:34:20
337
原创 React 中的useRef 和 useTransition
由于 React 会自动处理更新 DOM 以匹配你的渲染输出，因此你在组件中通常不需要操作 DOM。但是，有时你可能需要访问由 React 管理的 DOM 元素 。例如，让一个节点获得焦点、滚动到它或测量它的尺寸和位置。在 React 中没有内置的方法来做这些事情，所以你需要一个指向 DOM 节点的 ref 来实现。useRef 是一个 React Hook，它能帮助引用一个不需要渲染的值。
2024-08-09 22:49:36
436
原创 React 中的 useContext 和 useReducer
useReducer 实际上是 useState 的升级版，都是用来存储和更新 state，只是应用的场景不一样。一般情况下，我们使用 useState 就足够项目需要了，不多当遇到以下场景时，使用useReducer 会更好些 。1. 状态逻辑复杂：当状态的更新逻辑比较复杂时，使用 useReducer 可以将这个逻辑封装在 reducer 函数中，使代码更加清晰易懂；2. 多组件共享状态：当多组件需要共享一个状态时，可以将这个状态放在父组件，然后通过 useReducer 将状态......
2024-08-08 01:09:09
395
原创 React 中的 useMemo 和 useCallback
useCallback优化示例：定义一个子组件在父组件中调用，当父组件更新重新渲染时，子组件也会重新渲染。然后我们对子组件加了memo对传入的参数进行检测，同时对传入子组件的方法使用useCallback进行缓存，这样当父组件在更新时，缓存的方法没有发生变化，子组件通过memo发现传入的方法没有发生改变，也就不会重新渲染，以此提高了性能。
2024-08-07 00:20:35
539
原创 React 中 useEffect 语法详解
useEffect Hook 相当于 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。可以模拟渲染后、更新后、销毁三个动作。
2024-08-06 22:53:01
390
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人