- 博客(72)
- 收藏
- 关注
RSS订阅原创 js 实现 ajax 并发请求
JavaScript并发请求处理方案摘要：1）Promise.all同时发起多个请求，全部成功才处理，任一失败立即终止；2）Promise.allSettled无论请求成功与否都会返回结果，适合需要完整响应的场景；3）limitConcurrency通过队列控制并发数，限制同时执行的请求数量，防止服务器过载。三种方案分别适用于不同并发需求场景，可根据实际业务需求选择使用。
2025-08-10 11:59:41
38
原创 Ajax、Axios、Fetch核心区别
本文对比了 Ajax、Axios 和 Fetch 三种前端数据请求技术。Ajax 作为技术概念，通过 XMLHttpRequest 实现，兼容性好但需手动处理回调。Axios 是基于 Promise 的第三方库，支持自动 JSON 转换、拦截器和取消请求等功能，适用于复杂场景。Fetch 是浏览器原生 API，轻量但功能有限，需手动处理错误和数据转换。三者各有特点：Ajax 兼容性最佳，Fetch 适合现代浏览器项目，Axios 功能最全面。选择时需根据项目需求（兼容性、功能复杂度等）权衡。
2025-08-10 01:14:44
155
原创 Javascript中的一些常见设计模式
设计模式摘要 本文介绍了9种常见设计模式：1)单例模式确保类唯一实例；2)工厂模式通过工厂函数创建对象；3)策略模式封装可替换算法；4)观察者模式实现一对多通知；5)中介者模式解耦对象间通信；6)装饰器模式动态扩展功能；7)代理模式控制对象访问；8)外观模式简化复杂系统调用；9)发布订阅模式通过事件中心管理通信。每种模式都包含核心思想、应用场景和JavaScript实现示例，如单例模式用于全局状态管理，观察者模式实现Vue响应式数据，代理模式在Vue3中应用等。这些模式为解决特定问题提供了可复用的解决方案。
2025-08-08 18:09:08
576
原创 前端AOP面向切片编程
面向切面编程（AOP）在前端开发中通过解耦横切逻辑（如埋点、权限控制）提升代码复用性。核心原理是在函数执行前后插入统一逻辑，典型实现方式包括高阶函数封装（如before/after）和Vue自定义指令（如v-permission-click）。常见场景包括自动埋点、权限校验、异常处理等，例如用AOP统一管理按钮点击事件的权限验证和埋点上报，避免业务代码污染。Vue中可通过指令集中处理权限与埋点，使组件仅关注核心功能。AOP优势在于逻辑集中管理、降低耦合度，尤其适合多交互场景的标准化处理。
2025-07-30 22:12:15
231
原创 Javascript对象合并
本文介绍了JavaScript中合并对象的几种方法：1）浅合并使用Object.assign()或展开运算符...，仅合并第一层属性；2）深合并通过递归实现多层对象合并；3）推荐使用lodash的_.merge方法处理复杂合并。文章提供了代码示例和对比表格，帮助开发者根据需求选择合适的方法，其中浅合并适合简单场景，深合并和lodash方法适用于嵌套对象合并。总结指出每种方法的特点、递归能力和是否修改原对象等关键差异。
2025-07-30 21:15:11
181
原创 浅拷贝和深拷贝
文章摘要：本文介绍了浅拷贝和深拷贝的概念、实现方式及应用场景。浅拷贝仅复制对象的第一层属性，引用类型属性共享地址，可通过Object.assign()、展开运算符等方式实现。深拷贝递归复制所有层级，生成完全独立的副本，常用JSON.parse(JSON.stringify())或递归函数实现。文中还对比了二者的特性，指出浅拷贝适合扁平数据结构，深拷贝适用于嵌套结构及需要独立副本的情况，并提供了代码示例和场景说明。
2025-07-30 21:06:24
549
原创 Reflect.ownKeys(obj)和Object.getOwnPropertyDescriptors(obj)的区别
Reflect.ownKeys()和Object.getOwnPropertyDescriptors()都能获取对象自有属性，但功能不同。前者返回所有自有属性的键名数组（含Symbol和不可枚举属性），后者返回包含完整属性描述符的对象（包括值、可枚举性等元信息）。实际应用中，前者适合遍历键名，后者适合深度拷贝属性。两者都支持Symbol属性和不可枚举属性，是ES6提供的强大对象操作工具。
2025-07-22 10:52:54
137
原创 闭包的定义和应用场景
闭包核心概念与实用封装模式 闭包是函数能够记住并访问其定义时的词法作用域的特性，即使函数在原始作用域外执行。它通过函数嵌套实现，内部函数能访问外部函数变量，且外部函数执行后其作用域仍被保留。本文介绍了8种常见闭包封装模式：1）私有变量封装，保护数据安全；2）防抖函数，控制高频操作如搜索输入；3）节流函数，限制事件触发频率；4）缓存函数，优化重复计算；5）单例模式，确保唯一实例；6）柯里化，参数分步处理；7）工厂函数，管理组件状态；8）延迟计算，提升性能。需注意闭包可能导致内存泄漏和调试困难，但合理使用能显著
2025-07-18 22:21:39
604
原创 从输入URL到页面呈现都发生了什么？
浏览器请求网页的完整流程包括：URL解析、缓存检查（强缓存和协商缓存）、DNS查询（多级缓存机制）、TCP三次握手建立连接、HTTPS加密握手（如适用）、HTTP请求资源、页面渲染（DOM/CSSOM构建、JS执行等），最后根据连接类型决定是否断开TCP连接。整个过程涉及网络协议栈各层的协作，并充分利用缓存机制提升性能。
2025-07-14 14:23:19
280
原创 强缓存和协商缓存详解
浏览器缓存机制包含强缓存和协商缓存两种方式。强缓存通过响应头（如Cache-Control）直接读取本地缓存，适用于静态资源；协商缓存在资源过期时向服务器验证更新状态（通过ETag/Last-Modified），适用于可能更新的资源。两者配合使用可提升性能，前端可通过文件hash策略优化缓存效果。缓存类型分为内存缓存（临时）和磁盘缓存（持久），由浏览器根据资源特性自动选择。
2025-07-10 16:43:09
908
原创 URI/URL/URN的区别
URI（统一资源标识符）是标识资源的通用概念，包含URL和URN两种类型。URL（统一资源定位符）通过协议和位置定位资源（如https://example.com），而URN（统一资源名称）仅命名资源不提供访问方式（如urn:isbn:12345）。前端开发主要使用URL，URN则多用于图书编号等场景。URI是总称，URL侧重定位，URN侧重命名。
2025-07-09 19:13:34
407
原创 encodeURI vs encodeURIComponent的区别
JavaScript的URL编码函数encodeURI和encodeURIComponent主要区别在于编码范围：encodeURI用于完整URL编码，保留?、&等特殊字符；encodeURIComponent则编码URL组件，包括所有特殊字符。实际应用中，构建URL参数时应使用encodeURIComponent编码参数值，防止解析错误或注入攻击。简单来说，完整URL用encodeURI，参数值用encodeURIComponent更安全。
2025-07-09 17:54:06
189
原创 http和https的区别
HTTP与HTTPS的核心差异在于安全性。HTTPS通过SSL/TLS加密传输数据（默认443端口），而HTTP采用明文传输（80端口），存在信息泄露风险。HTTPS需CA证书验证身份，URL以"https://"开头，被搜索引擎优先收录。虽然加密过程会略微影响速度，但现代优化已大幅缩小差距。部署建议选择HTTPS，可使用Let's Encrypt免费证书，需注意HTTPS页面调用HTTP资源会被浏览器拦截。
2025-07-08 23:07:00
3826
2
原创 LocalStorage和SessionStorage的区别和应用
本文对比了LocalStorage和SessionStorage的差异，从生命周期、存储大小、作用域等方面进行了详细分析。LocalStorage适合持久化数据存储（如用户偏好、登录Token），SessionStorage适合会话级临时数据（如多步表单）。文章提供了两种存储API的使用示例，并针对不同场景给出了存储建议。最后封装了一个带过期时间的LocalStorage缓存工具，支持自动清理过期数据。开发者可根据数据敏感性和时效性需求选择合适的存储方案。
2025-07-08 18:47:57
351
原创 Vue2 重写了数组的 7 个变更方法（原理）
Vue2通过重写数组的7个变更方法(push/pop/shift/unshift/splice/sort/reverse)解决响应式问题。由于Object.defineProperty无法有效监听数组索引变化和长度修改，Vue2采用原型链拦截的方式：先备份原生方法，然后在方法调用后手动触发更新，并对新增元素进行响应式处理。这种设计避免了直接劫持数组索引的性能问题，但要求开发者必须使用特定方法或Vue.set操作数组，否则会破坏响应式。该方案在功能实现和性能之间取得了平衡，是Vue2响应式系统的重要设计。
2025-07-06 23:08:39
475
原创 IntersectionObserver详解与应用场景
IntersectionObserver API 提供了一种高效的元素可见性检测方案，通过异步监听目标元素与视口的交叉状态实现。其核心包括观察器实例、回调函数和配置项（rootMargin、threshold等），支持图片懒加载、无限滚动、曝光统计等常见场景。相比传统滚动监听方案，该API具有性能优势（不阻塞主线程）和精确控制能力（多阈值触发）。使用时需注意兼容性、频繁触发回调及内存管理等问题，是现代Web开发中替代scroll事件监听的最佳实践方案。
2025-07-06 22:26:51
570
原创 DOM 元素（Element）属性classList 对象详解
classList 是 DOM 元素的操作类名的属性，提供安全便捷的类管理方法。核心特性包括实时同步、链式调用、自动去重和空格限制。主要方法有 add/remove/toggle/contains/replace 等，支持多类操作和强制切换。相比 className 字符串操作更高效可靠，兼容 IE10+。典型应用场景包括动态样式切换、状态管理等，使用时需注意类名格式要求。
2025-07-06 22:13:39
506
原创 getBoundingClientRect() 详解：精准获取元素位置和尺寸
getBoundingClientRect()是JavaScript中获取元素几何信息的核心API，返回包含坐标、尺寸等属性的DOMRect对象。它相对视口计算位置，包含边框和内边距，常用于元素定位、滚动检测、拖拽实现等场景。与offsetTop等属性相比，它提供更全面的几何数据但性能开销较大。文章详细解析了其属性、应用实例、性能优化技巧及浏览器兼容性方案，是前端开发中处理元素位置尺寸问题的必备工具。使用时需注意避免频繁调用以防性能问题。
2025-07-06 22:05:51
527
原创 contain:paint和overflow:hidden的区别
摘要： contain: paint与overflow: hidden的核心差异在于优化目的与剪裁行为。前者通过渲染隔离提升动画/滤镜性能（不剪裁内容但限制重绘范围），后者仅用于布局剪裁（隐藏溢出内容但不优化性能）。典型场景：性能优化选contain: paint，内容裁剪用overflow: hidden，二者可共存但功能互补。示例中，contain: paint保持阴影可见并优化渲染，而overflow: hidden会直接裁剪超出内容。（149字）
2025-07-06 21:43:30
312
原创 javascript中的this详解及应用场景
JavaScript中的this指向取决于调用方式而非定义位置。全局中指向window/global，对象方法中指向调用者，构造函数指向实例，箭头函数继承定义时上下文，事件处理指向触发元素。使用call/apply/bind可显式绑定this。常见问题包括this丢失，可用bind解决。关键口诀：全局window，方法调用者，构造实例，箭头继承，显式指定，事件元素。掌握this指向规则对JavaScript开发至关重要。
2025-07-06 19:15:41
296
原创 回调函数 vs Promise vs async/await区别
JavaScript异步编程方式对比：回调函数易导致嵌套地狱，语法简单但维护困难；Promise通过链式调用优化流程，支持统一错误处理；async/await基于Promise，用同步写法实现异步逻辑，可读性最佳。三种方案各有适用场景：旧项目用回调，并发处理用Promise，现代开发首选async/await。随着ECMAScript标准演进，异步编程正朝着更简洁高效的方向发展。
2025-07-06 16:48:59
434
原创 async/await详解
async/await是JavaScript中处理异步操作的现代语法，基于Promise实现但更简洁易读。async函数自动返回Promise对象，await则暂停函数执行直到Promise完成。通过try/catch处理错误，配合Promise.all可实现并发请求。相比回调嵌套和Promise链式调用，async/await让异步代码更接近同步写法，可读性更好。使用时需注意避免在forEach中使用await，推荐for...of循环。该语法已成为主流异步编程方式，能优雅处理各类异步场景。
2025-07-06 16:26:28
385
原创 Promise 如何中止？
JavaScript Promise无法直接取消，但有几种模拟取消的方法：1）使用AbortController中止fetch请求；2）通过外部标志控制自定义Promise的结果处理；3）封装可取消的Promise工具；4）利用Axios的取消API。原生AbortController能真正中止网络请求，而手动取消标志和封装方法只能跳过结果处理。建议统一封装异步请求，在组件销毁时调用abort()，避免内存泄漏并处理重复请求。（150字）
2025-07-06 16:03:14
409
原创 Promise详解
Promise是JavaScript中处理异步操作的方式，替代回调函数，解决回调地狱问题。它有三种状态：pending、fulfilled和rejected。基本语法包括resolve、reject和链式调用then/catch/finally方法。常用方法有Promise.all、allSettled、race和any，分别用于处理并发请求、全量结果、竞速操作和首个成功结果。Promise可以顺序执行或并发处理接口请求，支持超时控制，并可与async/await结合使用。其优点在于语义清晰、可读性好，支持
2025-07-06 15:52:12
295
原创 回调函数详解和应用
回调函数是将一个函数作为参数传递给另一个函数，并在特定时机被调用的编程机制。它分为同步（立即执行）和异步（如定时器、网络请求）两种类型。回调函数广泛应用于事件处理、数组操作、异步编程等场景。虽然回调机制灵活，但多层嵌套会导致"回调地狱"问题，影响代码可读性。现代JavaScript通常使用Promise或async/await来处理异步操作，以避免回调嵌套过深的问题。在简单场景可使用匿名回调函数，复杂逻辑则推荐使用命名函数提高可维护性。
2025-07-05 17:20:47
320
原创 Proxy详解
JavaScript 的 Proxy 是一个强大的元编程工具，它允许你创建一个对象（或函数）的代理，并通过定义“陷阱”来拦截和自定义对该代理的基本操作（如属性访问、赋值、函数调用、new 操作等）。它的主要用途包括验证、日志记录、提供默认值、模拟私有属性、函数包装以及构建响应式系统（如 Vue 3）。理解 target、handler 和 trap 的概念是掌握 Proxy 的关键。虽然功能强大，但也需注意潜在的性能影响和正确实现陷阱逻辑以确保预期行为。
2025-07-02 12:22:05
607
原创 深入解析 call、apply 和 bind 方法
JavaScript中的call、apply和bind是控制函数执行上下文的三个核心方法。call和apply立即调用函数，前者接收参数列表，后者接收参数数组；bind则返回绑定this的新函数。它们主要用于：1）明确this指向；2）方法借用（如继承）；3）参数预设（柯里化）。call/apply在严格模式和非严格模式下对null/undefined的处理不同，而bind后的函数this不可更改。这些方法解决了this指向模糊的问题，是函数式编程的重要工具，常见于事件处理、方法借用等场景。
2025-07-02 09:18:07
390
原创 Set和Map的解析与应用场景
ES6引入的Set和Map为JavaScript提供了更高效的数据结构。Set存储唯一值，适用于数组去重、快速存在性检查等场景，其has()方法效率远高于数组。Map支持任意类型键值对，维护插入顺序，适合对象键存储、缓存和频率计数等需求。与普通对象相比，Set和Map具有更严格的唯一性判断、有序迭代和高效操作等优势。选择使用时：需要唯一值集合选Set；需要灵活键值对且维护顺序选Map；仅字符串键且不关心顺序可用普通对象。两者都填补了传统数组和对象的局限性，提供了更专业的解决方案。
2025-07-01 18:56:27
933
原创 Array.from()方法解析与应用
Array.from() 是 JavaScript 中处理类数组和可迭代对象转换的强大工具。将类数组/可迭代对象安全、方便地转换为真正的数组，从而解锁所有数组方法（map, filter, reduce, forEach 等）。提供内置的映射功能，允许在转换过程中直接修改元素。简洁地生成数值序列。熟练掌握 Array.from() 能显著提高处理 DOM 集合（NodeList）、函数参数（arguments）、集合类型（Set, Map）、字符串以及创建特定序列数组的效率和代码可读性。
2025-06-30 17:07:26
712
原创 词法作用域定义及特性解析
词法作用域（静态作用域）是编程语言中变量作用域的核心规则，由代码书写位置决定作用域链的嵌套关系。其特点是：①作用域在代码定义时确定；②变量查找沿定义时的外层作用域链进行；③与函数调用位置无关。典型应用包括闭包（保持定义时作用域）和模块化（封装私有变量）。不同于动态作用域（如Bash）依赖调用上下文，主流语言（JS/Python等）均采用词法作用域，这是理解闭包、内存管理等概念的基础。150字
2025-06-30 11:01:58
337
原创 JavaScript中Object()的解析与应用
摘要：JavaScript的Object()构造函数用于创建对象或转换值，其行为根据输入类型而异：对象直接返回，原始值转为包装对象，null/undefined生成空对象。关键静态方法包括Object.keys()获取属性、Object.assign()合并对象、Object.create()原型继承等。实际应用中，推荐使用字面量{}创建对象，Object.assign()进行浅拷贝，Object.freeze()保护对象。注意原始值会转为包装对象，且Object.assign()仅执行浅拷贝，深拷贝需特殊
2025-06-29 00:02:20
390
原创 生成器函数概念与用法详解
生成器函数（Generator Function）是 JavaScript 中一种特殊的函数，它允许你逐步执行函数体，并在过程中多次返回（或“产出”）值，而不是一次性执行完毕。这种特性使得它非常适合处理异步操作、创建迭代器和处理大数据集等场景。
2025-06-22 17:17:21
361
原创 Web Worker技术详解与应用场景
Web Worker是解决JavaScript单线程限制的关键技术，通过创建独立后台线程执行耗时任务，避免主线程阻塞。它无法访问DOM/BOM，只能通过消息机制与主线程通信。主要分为专用Worker、共享Worker和服务Worker三类。使用时需注意通信开销、同源策略及错误处理等问题。Web Worker适用于复杂计算、图像处理等CPU密集型任务，能显著提升网页性能和响应速度。最佳实践包括优化数据传输、合理评估开销和使用Transferable对象等。
2025-06-22 17:10:40
732
原创 JavaScript 循环性能深度对比与最佳实践
JavaScript循环性能与最佳实践摘要 本文系统分析了JS各类循环的性能表现与适用场景： 1️⃣ 基础循环（for/while）性能最佳（5⭐），推荐缓存数组长度 2️⃣ 数组方法（forEach/map）可读性好但不可中断，比基础循环慢60% 3️⃣ for...of接近基础循环性能（80%），for...in遍历数组性能最差（慢95%） 🔑 关键建议： 性能优先选传统for循环（缓存长度） 需要中断时用for...of替代forEach 对象遍历用for...in+hasOwnProperty检查
2025-06-22 16:54:56
716
原创 Symbol.iterator 详解
Symbol.iterator是JavaScript中定义对象默认迭代器的内置符号，用于实现可迭代协议。关键点包括：1）通过实现[Symbol.iterator]方法使对象可被for...of等消费；2）迭代器需返回包含next()方法的对象，next()返回{value,done}结构；3）内置对象如Array/String/Map/Set已支持；4）适用于自定义数据结构、惰性计算等场景。该特性是ES6标准，需注意旧环境兼容性。文中提供了自定义迭代器和生成器实现的代码示例，展示如何创建可迭代对象。
2025-06-20 23:19:34
375
原创 JavaScript Symbol 属性详解
JavaScript 中的 Symbol 是 ES6 引入的第七种原始数据类型，用于创建唯一标识符。其核心特性包括唯一性、不可变性和可用作非字符串对象键。Symbol 可以通过 Symbol() 创建本地符号或 Symbol.for() 注册全局符号。作为对象属性时，Symbol 属性需要特殊方法访问和遍历，默认不会出现在常规枚举中。JavaScript 还提供了内置 Symbol 值（如 Symbol.iterator）用于修改对象核心行为。Symbol 的主要应用场景包括避免属性冲突、模拟私有属性、定义
2025-06-20 18:47:12
1097
原创 WeakMap的定义与特性解析
WeakMap是JavaScript中特殊的键值集合，其核心特性是仅允许对象/Symbol作为键且持有弱引用。当键对象失去其他强引用时，垃圾回收会自动清除键值对，防止内存泄漏。与Map不同，WeakMap不可枚举且无size属性，适合存储与对象生命周期绑定的元数据（如DOM节点数据、类私有数据）。主要方法包括set/get/has/delete，但不支持遍历。典型应用场景包括对象关联数据自动清理和避免内存泄漏。
2025-06-20 17:44:19
829
原创 console.time()用法详解
JavaScript 提供了 console.time() 和 console.timeEnd() 方法用于测量代码执行时间。基本用法是：用 console.time(label) 启动计时器，console.timeEnd(label) 结束计时并输出耗时（毫秒）。标签必须匹配，可嵌套使用多个计时器。适用于测试循环、函数性能，比较算法效率等开发场景，但不建议用于生产环境。所有现代浏览器和Node.js都支持该方法，测量精度通常到小数点后3位。
2025-06-19 11:11:34
336
原创 JS数据类型检测方法总结
方法优点缺点typeof简单快速，适合原始类型无法区分数组/对象/nullinstanceof检测自定义对象不适用原始类型，多窗口环境失效精准识别所有类型（推荐）语法稍复杂数组检测最优解仅适用于数组基础类型检测 → typeof数组检测 → Array.isArray()完整类型检测 → Object.prototype.toString.call()null 检测 → value === null。
2025-06-18 21:44:08
431
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人