- 博客(21)
- 收藏
- 关注
RSS订阅原创 手写call函数【JavaScript】
JS中改变this指向的call方法实现要点：1）处理null/undefined时this指向全局对象；2）基本类型参数转为包装对象；3）通过Symbol临时添加属性避免冲突；4）设置不可枚举属性。测试案例验证了该方法能正确绑定this并传递参数。最终返回undefined，与原call方法行为一致.
2025-08-31 16:50:59
289
原创 数组扁平化【JavaScript】
本文介绍了一个递归实现的数组扁平化函数myFlat。该函数通过遍历数组元素，当遇到子数组时递归调用自身进行展开，最终将所有元素合并到一维数组中返回。
2025-08-30 17:23:15
193
原创 数组去重【JavaScript】
本文实现了一个数组去重功能，能够识别属性相同的对象视为相同元素。主函数uniqueArray通过双重循环和equal辅助函数判断元素是否重复。isPrimitive函数判断值是否为原始类型，equal函数则递归比较两个值（包括对象）的键值对是否完全一致，确保对象属性的顺序不影响判断结果。该方法能正确处理原始值和复杂对象的去重问题。
2025-08-30 17:06:18
340
原创 手写bind函数【JavaScript】
JavaScript中bind函数的实现原理，主要包含三个要点：1) bind返回一个新函数，可以接收剩余参数；2) 第一个参数改变this指向，新函数通过apply绑定；3) 如果新函数通过new来调用的话，无论是返回结果还是this指向都是new fn的结果。
2025-08-29 18:17:16
467
原创 分时函数封装【JavaScript】
当页面需要一次性渲染大量元素时，会导致长任务阻塞主线程，造成卡顿现象。本文提出两种优化方案：1）通过performTask函数将任务分块执行，可自定义调度策略（如定时执行）；2）利用idlePerformTask函数结合requestIdleCallbackAPI，在浏览器空闲时段执行任务。核心思路都是将同步的长任务拆分为异步的微任务队列，避免阻塞UI渲染。示例代码展示了如何封装通用任务调度器，支持自定义执行时机和批量大小，其中空闲调度方案能更智能地利用浏览器空闲时间片段来优化性能体验。
2025-08-29 17:50:30
886
原创 浏览器原生弹窗功能
文章介绍了两种弹窗组件的封装方式：普通弹窗（不影响背景交互）和模态弹窗（背景半透明模糊）。推荐使用HTML5原生dialog元素，通过.show()/.showModal()方法控制弹窗显示，并配合::backdrop伪元素实现背景模糊效果。文中提供了完整的代码示例，展示如何创建带毛玻璃效果的模态弹窗，包括样式设置和基本交互功能。
2025-08-29 16:39:00
242
原创 并发任务控制【JavaScript】
文章摘要：这段代码实现了一个并发任务控制器SuperTask，其核心功能是控制Promise任务的并发执行数量（默认2个）。构造函数包含add方法（返回Promise）和内部_run方法，通过任务队列和运行计数器管理并发：当有任务完成时触发_run检查并启动新任务。关键点包括：1) 任务队列存储任务及resolve/reject回调；2) _run方法在任务完成后自动触发后续任务；3) 通过计数器确保不超过最大并发数。
2025-08-27 23:58:41
1122
原创 并发请求【JavaScript】
并发请求是指同时发送多个网络请求以提高效率。实现并发控制需考虑：1.边界情况处理；2.请求发送与结果保存；3.补位操作；4.完成状态判断与并发数控制。示例代码展示了一个concurRequest函数，该函数接收URL数组和最大并发数。
2025-08-27 22:06:36
302
原创 1.实现状态的变化【Promise方法手写】
本文介绍了Promise状态变更的实现机制。主要包括三种状态（pending/fulfilled/rejected）的定义，通过_changeState方法统一处理状态变更，确保状态不可逆。重点说明了_resolve和_reject方法的实现方式，包括立即执行executor函数时的错误处理（try-catch），以及通过bind方法绑定this指向。代码示例展示了如何使用MyPromise类，包括构造函数调用和错误抛出场景。整体实现注重状态变更的封装复用和错误边界处理。
2025-08-20 16:19:44
187
原创 JavaScript中字符串和数组如何相互转化
本文介绍了字符串与数组相互转换的常用方法。字符串转数组可通过split()按分隔符拆分、Array.from()转换、扩展运算符[...str]、Object.assign()、slice.call()或match()正则匹配。数组转字符串主要使用join()自定义分隔、toString()默认逗号分隔或模板字符串转换。这些方法适用于不同场景，split()和join()最为常用，扩展运算符和Array.from()则是ES6更简洁的写法。
2025-08-18 23:03:06
431
原创 用setTimeout实现setInterval【JavaScript】
一个简单的JavaScript计时器实现。通过两个按钮,控制计时功能，使用setTimeout实现间隔300毫秒的累加计数，并将结果显示在h1标签中。点击开始按钮会触发递归调用的interval函数，而结束按钮则清除定时器停止计数。
2025-08-14 16:49:22
86
原创 函数管道【JavaScript】
函数管道是将多个单参函数串联组合成新函数的技术，前一个函数的输出作为后一个函数的输入。通过pipe方法实现函数链式调用，简化代码并提高复用性。以字符串转小驼峰命名为例，演示了如何通过管道组合everyLetterUp、removeEmpty等处理函数。当需要处理多参函数（如截取字符串）时，可与柯里化结合使用，通过预先固定参数使其适配管道结构。这种组合方式使复杂转换操作更清晰易维护，只需调用最终的管道函数即可完成整个处理流程。
2025-08-12 15:03:18
994
原创 柯里化【JavaScript】
柯里化是将多参函数转换为单参函数调用的技术。其核心实现思路是：1)收集参数并返回新函数；2)当参数不足时递归调用Curring，参数足够时执行原函数。文中给出了基本实现方案，并针对支持空参数调用的场景提出优化方案：将参数长度判断改为检查是否传入空参数。代码示例展示了如何通过柯里化实现add(1)(2)(3)()和add(1,2)(3)()两种调用方式，最终都返回正确结果6。
2025-08-10 16:40:51
270
原创 手写对象混合和克隆【JavaScript】
本文介绍了对象混合和深克隆的实现方法。深克隆通过递归处理对象和数组，使用Map缓存解决循环引用问题。对于基本类型直接返回，引用类型则创建新对象并递归复制所有属性。
2025-08-10 14:22:51
432
原创 Webpack编译结果分析
Webpack打包结果是一个自执行函数，通过闭包防止变量污染。核心结构包含：1)模块缓存对象；2)模拟require功能的__webpack_require方法；3)入口模块执行。函数接收模块对象参数，key为路径，value为模块函数。模块函数接收module、exports和require三个参数，通过__webpack_require递归加载依赖，最终返回模块导出结果。
2025-08-04 20:24:23
639
原创 手写LRU缓存算法【JavaScript】
LRU算法是一种常用的缓存淘汰策略，通过优先移除最久未被访问的数据来管理缓存空间。其核心原理是维护数据访问顺序，新访问或更新的数据优先级最高，当缓存满时淘汰优先级最低的数据。
2025-08-01 15:25:20
315
原创 函数防抖和函数节流
函数防抖和节流的应用场景及实现方式。防抖适用于窗口resize和input输入等高频触发事件，重复调用只保留最后一次函数执行。节流实现分为立即执行（时间戳）和延迟执行两种方式，前者保证首次立即触发，后者类似防抖但会定期执行。防抖实现使用定时器清除机制，而节流通过时间戳或定时器控制执行频率，有效优化高频事件处理的性能。
2025-07-29 11:12:38
689
原创 用HTML+CSS手写一个自定义表单
这段HTML和CSS代码实现了一个用户注册表单页面。表单包含手机号、验证码、密码确认、多选爱好、性别选择、个人简介填写等输入项，以及注册和重置按钮。样式方面采用深色背景配白色表单容器，输入框和按钮使用蓝色系配色，通过CSS实现了浮动布局、表单元素统一样式、悬停效果等功能验证码输入区域采用左右布局。整体设计简洁美观，符合现代网页表单设计规范。
2025-07-29 10:04:28
359
原创 如何客户端和服务器端(node.js)生成二维码？
服务器端和客户端生成二维码的方法。服务器端使用node-qrcode库，可通过QRCode.toFile()生成图片文件或QRCode.toDataURL()生成DataURL。客户端使用qrcodejs库，通过创建QRCode实例并指定DOM元素即可生成二维码。两种方式都支持自定义颜色、尺寸等参数配置，官网提供了更详细的文档说明。
2025-07-24 10:09:53
364
原创 手写Map集合【JavaScript】
Map集合解决了传统对象存储键值对的局限性，支持任意类型键名且避免原型冲突。Map提供set()、get()、has()等方法实现增删改查，通过size属性获取元素数量。其底层实现采用数组存储键值对象，通过_isEqual方法严格比较键值（类似Object.is）。Map支持可迭代协议，可使用for-of遍历，并能与数组相互转换。相比对象存储，Map具有更强的键值处理能力和更安全的数据操作方式，是存储关联数据的理想选择。
2025-07-21 17:28:02
428
原创 手写Set集合【JavaScript】
本文实现了一个自定义Set类MySet，包含集合的基本操作。构造函数可接收可迭代对象初始化，内部使用数组_data存储元素。主要方法包括：add()添加唯一元素（通过has()和isEqual()判断元素存在性），delete()删除元素，clear()清空集合。特别处理了+0/-0的相等判断问题。实现了Symbol.iterator迭代器接口和forEach方法，支持集合遍历。该实现模拟了原生Set的核心功能，包括元素唯一性检查和集合操作等特性。
2025-07-21 15:35:19
557
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人