- 博客(88)
- 收藏
- 关注
RSS订阅原创 JS原型链
JavaScript中的原型（prototype）是每个函数都具有的特殊属性，它构成了原型链的基础。当通过构造函数创建对象时，对象的__proto__属性会指向构造函数的prototype。原型链是对象属性的查找机制：当对象自身没有某个属性时，会沿着__proto__链向上查找，直到Object.prototype或null。所有函数（包括内置函数）都由Function构造，甚至Function自身也指向Function.prototype。原型链的核心规律包括：实例对象的__proto__指向构造函数的p
2025-08-20 15:21:46
874
原创 说一下事件传播机制
DOM事件传播机制分为捕获、目标和冒泡三个阶段。事件先在捕获阶段从document向下传播到目标元素，然后在目标阶段触发目标元素的事件处理函数，最后在冒泡阶段从目标元素向上传播回document。通过addEventListener的第三个参数可控制事件在捕获或冒泡阶段触发，默认是在冒泡阶段。stopPropagation可阻止事件继续传播，而stopImmediatePropagation还能阻止当前元素的其他同类型事件。事件委托正是利用冒泡机制，通过在父元素监听事件来管理子元素的事件。
2025-08-17 22:49:26
329
原创 说一下事件委托
摘要：事件委托是利用事件冒泡机制，将子元素的事件处理程序统一绑定在父元素上的技术。相比传统绑定方式，事件委托只需一次绑定，支持动态元素，性能更优。适用条件包括事件可冒泡、父元素覆盖所有子元素、能区分事件源。注意避免冒泡范围过大，但可自动支持动态元素。传统绑定适用于少量固定子元素，而事件委托更适合处理大量或动态生成的子元素，具有性能优势且代码更简洁。核心原理是通过event.target识别事件源，在父元素统一处理子元素事件。
2025-08-17 22:40:01
215
原创 说一下分离读写
摘要：分离读写在前端开发中是指将DOM读取和写入操作分开执行，以减少回流和重绘，提升性能。读操作获取元素信息但不改变DOM，而写操作修改DOM或样式可能触发回流。频繁交替读写会强制浏览器多次回流，影响性能。优化策略包括批量读写、使用requestAnimationFrame或FastDom等工具自动分组操作。核心思想是先完成所有读操作，再统一执行写操作，从而减少回流次数，优化渲染效率。
2025-08-17 22:33:58
290
原创 如何做HTTP优化
HTTP优化旨在提升网页性能和用户体验，核心策略包括：减少请求数（合并文件、使用雪碧图）、压缩资源（文本/图片/字体）、优化缓存（HTTP头部/CDN）、改进网络传输（HTTP/2/Keep-Alive）、提升首屏速度（异步JS/关键CSS内联）以及持续监控性能指标。通过多维度优化可显著降低延迟、减少带宽占用并加快页面加载。
2025-08-17 21:54:21
445
原创 TCP和UCP的区别
TCP与UDP协议对比 TCP（传输控制协议）是面向连接的可靠协议，通过三次握手建立连接，提供有序传输、重传机制及流量控制，但速度较慢，适用于文件传输、网页浏览等场景。UDP（用户数据报协议）是无连接协议，直接发送数据，不保证可靠性，但传输速度快、开销小，适用于实时性要求高的视频直播、在线游戏等场景。两者主要区别在于连接方式、可靠性、速度和适用场景，TCP侧重可靠传输，UDP侧重高效传输。
2025-08-17 21:26:49
310
原创 prototype 和 _ _ proto _ _的关联
JavaScript中prototype和__proto__是原型链的关键概念。prototype是构造函数特有的属性，包含实例共享的方法和属性；__proto__则是实例的内部属性，指向构造函数的prototype。当实例访问属性时，先在自身查找，找不到则通过__proto__沿原型链向上查找。两者关系为：实例的__proto__指向其构造函数的prototype，共同实现原型继承机制。简言之，prototype存放共享属性和方法，__proto__负责原型链查找。
2025-08-17 21:02:18
286
原创 谈谈对面向对象OOP的理解
面向对象编程(OOP)是一种以对象为核心的程序设计思想，通过类定义对象模板，实现数据与行为的封装。核心概念包括对象、类、封装、继承和多态，强调现实模拟、代码复用和灵活扩展。在前端开发中，JavaScript的类与对象、组件化思想以及工具库封装都体现了OOP原则。OOP使代码更贴近现实、易于维护和扩展，是现代软件开发的重要范式。
2025-08-17 20:54:15
404
原创 vue路由懒加载
Vue项目通过动态import实现路由懒加载，将组件配置为返回import()的函数，使Webpack/Vite单独打包成按需加载的chunk。可通过webpack魔法注释命名chunk文件，或在Vue3中使用defineAsyncComponent添加加载状态处理。这种方式有效减少首屏加载体积，提升性能。Nuxt3等框架已内置自动懒加载功能。
2025-08-17 20:09:58
306
原创 聊聊Vuex vs Pinia
Vuex 和 Pinia 是 Vue 的状态管理工具，核心思想是集中管理组件共享状态。Vuex 包含 State、Getter、Mutation、Action 和 Module 五个模块，需通过 mutation 修改状态，action 处理异步逻辑。Pinia 简化了流程，废弃 mutation，允许 action 直接修改 state，天然模块化，支持多个独立 store，且对 TypeScript 更友好。两者都支持响应式状态和派生计算，但 Pinia 学习成本更低，已成为官方推荐方案，正逐步取代 V
2025-08-17 19:47:07
451
原创 跨域及解决方案
文章摘要： 跨域问题由浏览器同源策略引发，限制了不同源（协议/域名/端口不同）的资源请求。常见解决方案包括：1）CORS（后端设置响应头）；2）JSONP（利用<script>标签，仅限GET）；3）反向代理（如Webpack/Nginx转发请求）；4）PostMessage实现跨窗口通信。其中CORS为标准方案，JSONP逐渐淘汰，反向代理适合本地开发。注意跨域限制仅针对浏览器端，后端请求不受影响。危险方案（如关闭浏览器安全策略）仅限调试使用。
2025-08-14 21:10:48
443
原创 【算法题】：和为N的连续正数序列
本文介绍了两种寻找和为N的连续正数序列的方法。方法一采用双指针技术，通过移动start和end指针来动态计算区间和，时间复杂度为O(N)。方法二通过数学公式计算连续序列和，使用双重循环寻找符合条件的序列。两种方法都能正确输出结果，如输入15时都能得到[[1,2,3,4,5],[4,5,6],[7,8]]。双指针法更高效，适合处理较大N值；方法二思路直观但效率稍低。两种实现都提供了JavaScript示例代码。
2025-08-10 23:09:25
170
原创 【算法题】：斐波那契数列
本文介绍了三种JavaScript实现斐波那契数列的方法：1)迭代法使用两个变量累加计算；2)递归法通过参数传递当前和下一个值；3)数组法存储已计算的值。所有方法都遵循斐波那契数列定义（F(0)=1,F(1)=1,F(n)=F(n-1)+F(n-2)），并通过测试验证了正确性，如fibonacci(4)返回5，fibonacci(7)返回21。这些实现展示了不同编程思路解决同一问题的灵活性。
2025-08-10 22:40:18
203
原创 JS实现数组扁平化
ES6新增的flat()方法可以方便地实现数组扁平化，默认展开一层嵌套，通过depth参数可指定展开深度（Infinity表示完全展开）。ES6之前需递归实现，而ES6之后可用reduce结合递归简化代码。三种方式都能实现数组展平，但flat()方法最为简洁高效。
2025-08-10 21:28:30
164
原创 JS数组排序算法
本文介绍了三种常见排序算法及其JavaScript实现。冒泡排序通过相邻元素两两比较和交换实现排序，时间复杂度O(n²)，简单但效率低；插入排序将数组分为已排序和未排序部分逐个插入，时间复杂度O(n²)，适合部分有序数据；快速排序采用分治法选取基准元素递归排序，平均时间复杂度O(n log n)，是大数据量排序的高效选择。三种算法各有特点：冒泡和插入是稳定排序，而快速排序不稳定但速度最快。代码示例展示了各算法的具体实现方式。
2025-08-10 20:35:38
315
原创 一些js数组去重的实现算法
本文介绍了多种JavaScript数组去重方法：1）传统双重循环法（O(n²)复杂度）；2）利用indexOf或forEach简化代码；3）使用对象哈希表实现高效去重（O(n)）；4）ES6推荐方法包括Set数据结构、filter+indexOf、reduce+includes等。针对对象数组，可按指定字段去重。不同方法各有优劣：传统方法易理解但效率低，Set简洁高效但不支持深度对象比较，哈希表法高效但需注意类型转换问题。实际应用中应根据数据类型和性能需求选择合适方案。
2025-08-10 20:01:05
205
原创 js 实现 ajax 并发请求
JavaScript并发请求处理方案摘要：1）Promise.all同时发起多个请求，全部成功才处理，任一失败立即终止；2）Promise.allSettled无论请求成功与否都会返回结果，适合需要完整响应的场景；3）limitConcurrency通过队列控制并发数，限制同时执行的请求数量，防止服务器过载。三种方案分别适用于不同并发需求场景，可根据实际业务需求选择使用。
2025-08-10 11:59:41
228
原创 Ajax、Axios、Fetch核心区别
本文对比了 Ajax、Axios 和 Fetch 三种前端数据请求技术。Ajax 作为技术概念，通过 XMLHttpRequest 实现，兼容性好但需手动处理回调。Axios 是基于 Promise 的第三方库，支持自动 JSON 转换、拦截器和取消请求等功能，适用于复杂场景。Fetch 是浏览器原生 API，轻量但功能有限，需手动处理错误和数据转换。三者各有特点：Ajax 兼容性最佳，Fetch 适合现代浏览器项目，Axios 功能最全面。选择时需根据项目需求（兼容性、功能复杂度等）权衡。
2025-08-10 01:14:44
568
原创 Javascript中的一些常见设计模式
设计模式摘要 本文介绍了9种常见设计模式：1)单例模式确保类唯一实例；2)工厂模式通过工厂函数创建对象；3)策略模式封装可替换算法；4)观察者模式实现一对多通知；5)中介者模式解耦对象间通信；6)装饰器模式动态扩展功能；7)代理模式控制对象访问；8)外观模式简化复杂系统调用；9)发布订阅模式通过事件中心管理通信。每种模式都包含核心思想、应用场景和JavaScript实现示例，如单例模式用于全局状态管理，观察者模式实现Vue响应式数据，代理模式在Vue3中应用等。这些模式为解决特定问题提供了可复用的解决方案。
2025-08-08 18:09:08
670
原创 前端AOP面向切片编程
面向切面编程（AOP）在前端开发中通过解耦横切逻辑（如埋点、权限控制）提升代码复用性。核心原理是在函数执行前后插入统一逻辑，典型实现方式包括高阶函数封装（如before/after）和Vue自定义指令（如v-permission-click）。常见场景包括自动埋点、权限校验、异常处理等，例如用AOP统一管理按钮点击事件的权限验证和埋点上报，避免业务代码污染。Vue中可通过指令集中处理权限与埋点，使组件仅关注核心功能。AOP优势在于逻辑集中管理、降低耦合度，尤其适合多交互场景的标准化处理。
2025-07-30 22:12:15
249
原创 Javascript对象合并
本文介绍了JavaScript中合并对象的几种方法：1）浅合并使用Object.assign()或展开运算符...，仅合并第一层属性；2）深合并通过递归实现多层对象合并；3）推荐使用lodash的_.merge方法处理复杂合并。文章提供了代码示例和对比表格，帮助开发者根据需求选择合适的方法，其中浅合并适合简单场景，深合并和lodash方法适用于嵌套对象合并。总结指出每种方法的特点、递归能力和是否修改原对象等关键差异。
2025-07-30 21:15:11
211
原创 浅拷贝和深拷贝
文章摘要：本文介绍了浅拷贝和深拷贝的概念、实现方式及应用场景。浅拷贝仅复制对象的第一层属性，引用类型属性共享地址，可通过Object.assign()、展开运算符等方式实现。深拷贝递归复制所有层级，生成完全独立的副本，常用JSON.parse(JSON.stringify())或递归函数实现。文中还对比了二者的特性，指出浅拷贝适合扁平数据结构，深拷贝适用于嵌套结构及需要独立副本的情况，并提供了代码示例和场景说明。
2025-07-30 21:06:24
578
原创 Reflect.ownKeys(obj)和Object.getOwnPropertyDescriptors(obj)的区别
Reflect.ownKeys()和Object.getOwnPropertyDescriptors()都能获取对象自有属性，但功能不同。前者返回所有自有属性的键名数组（含Symbol和不可枚举属性），后者返回包含完整属性描述符的对象（包括值、可枚举性等元信息）。实际应用中，前者适合遍历键名，后者适合深度拷贝属性。两者都支持Symbol属性和不可枚举属性，是ES6提供的强大对象操作工具。
2025-07-22 10:52:54
149
原创 闭包的定义和应用场景
闭包核心概念与实用封装模式 闭包是函数能够记住并访问其定义时的词法作用域的特性，即使函数在原始作用域外执行。它通过函数嵌套实现，内部函数能访问外部函数变量，且外部函数执行后其作用域仍被保留。本文介绍了8种常见闭包封装模式：1）私有变量封装，保护数据安全；2）防抖函数，控制高频操作如搜索输入；3）节流函数，限制事件触发频率；4）缓存函数，优化重复计算；5）单例模式，确保唯一实例；6）柯里化，参数分步处理；7）工厂函数，管理组件状态；8）延迟计算，提升性能。需注意闭包可能导致内存泄漏和调试困难，但合理使用能显著
2025-07-18 22:21:39
646
原创 从输入URL到页面呈现都发生了什么？
浏览器请求网页的完整流程包括：URL解析、缓存检查（强缓存和协商缓存）、DNS查询（多级缓存机制）、TCP三次握手建立连接、HTTPS加密握手（如适用）、HTTP请求资源、页面渲染（DOM/CSSOM构建、JS执行等），最后根据连接类型决定是否断开TCP连接。整个过程涉及网络协议栈各层的协作，并充分利用缓存机制提升性能。
2025-07-14 14:23:19
292
原创 强缓存和协商缓存详解
浏览器缓存机制包含强缓存和协商缓存两种方式。强缓存通过响应头（如Cache-Control）直接读取本地缓存，适用于静态资源；协商缓存在资源过期时向服务器验证更新状态（通过ETag/Last-Modified），适用于可能更新的资源。两者配合使用可提升性能，前端可通过文件hash策略优化缓存效果。缓存类型分为内存缓存（临时）和磁盘缓存（持久），由浏览器根据资源特性自动选择。
2025-07-10 16:43:09
974
原创 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
422
原创 encodeURI vs encodeURIComponent的区别
JavaScript的URL编码函数encodeURI和encodeURIComponent主要区别在于编码范围：encodeURI用于完整URL编码，保留?、&等特殊字符；encodeURIComponent则编码URL组件，包括所有特殊字符。实际应用中，构建URL参数时应使用encodeURIComponent编码参数值，防止解析错误或注入攻击。简单来说，完整URL用encodeURI，参数值用encodeURIComponent更安全。
2025-07-09 17:54:06
218
原创 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
3850
2
原创 LocalStorage和SessionStorage的区别和应用
本文对比了LocalStorage和SessionStorage的差异，从生命周期、存储大小、作用域等方面进行了详细分析。LocalStorage适合持久化数据存储（如用户偏好、登录Token），SessionStorage适合会话级临时数据（如多步表单）。文章提供了两种存储API的使用示例，并针对不同场景给出了存储建议。最后封装了一个带过期时间的LocalStorage缓存工具，支持自动清理过期数据。开发者可根据数据敏感性和时效性需求选择合适的存储方案。
2025-07-08 18:47:57
372
原创 Vue2 重写了数组的 7 个变更方法（原理）
Vue2通过重写数组的7个变更方法(push/pop/shift/unshift/splice/sort/reverse)解决响应式问题。由于Object.defineProperty无法有效监听数组索引变化和长度修改，Vue2采用原型链拦截的方式：先备份原生方法，然后在方法调用后手动触发更新，并对新增元素进行响应式处理。这种设计避免了直接劫持数组索引的性能问题，但要求开发者必须使用特定方法或Vue.set操作数组，否则会破坏响应式。该方案在功能实现和性能之间取得了平衡，是Vue2响应式系统的重要设计。
2025-07-06 23:08:39
502
原创 IntersectionObserver详解与应用场景
IntersectionObserver API 提供了一种高效的元素可见性检测方案，通过异步监听目标元素与视口的交叉状态实现。其核心包括观察器实例、回调函数和配置项（rootMargin、threshold等），支持图片懒加载、无限滚动、曝光统计等常见场景。相比传统滚动监听方案，该API具有性能优势（不阻塞主线程）和精确控制能力（多阈值触发）。使用时需注意兼容性、频繁触发回调及内存管理等问题，是现代Web开发中替代scroll事件监听的最佳实践方案。
2025-07-06 22:26:51
603
原创 DOM 元素（Element）属性classList 对象详解
classList 是 DOM 元素的操作类名的属性，提供安全便捷的类管理方法。核心特性包括实时同步、链式调用、自动去重和空格限制。主要方法有 add/remove/toggle/contains/replace 等，支持多类操作和强制切换。相比 className 字符串操作更高效可靠，兼容 IE10+。典型应用场景包括动态样式切换、状态管理等，使用时需注意类名格式要求。
2025-07-06 22:13:39
535
原创 getBoundingClientRect() 详解：精准获取元素位置和尺寸
getBoundingClientRect()是JavaScript中获取元素几何信息的核心API，返回包含坐标、尺寸等属性的DOMRect对象。它相对视口计算位置，包含边框和内边距，常用于元素定位、滚动检测、拖拽实现等场景。与offsetTop等属性相比，它提供更全面的几何数据但性能开销较大。文章详细解析了其属性、应用实例、性能优化技巧及浏览器兼容性方案，是前端开发中处理元素位置尺寸问题的必备工具。使用时需注意避免频繁调用以防性能问题。
2025-07-06 22:05:51
584
原创 contain:paint和overflow:hidden的区别
摘要： contain: paint与overflow: hidden的核心差异在于优化目的与剪裁行为。前者通过渲染隔离提升动画/滤镜性能（不剪裁内容但限制重绘范围），后者仅用于布局剪裁（隐藏溢出内容但不优化性能）。典型场景：性能优化选contain: paint，内容裁剪用overflow: hidden，二者可共存但功能互补。示例中，contain: paint保持阴影可见并优化渲染，而overflow: hidden会直接裁剪超出内容。（149字）
2025-07-06 21:43:30
325
原创 javascript中的this详解及应用场景
JavaScript中的this指向取决于调用方式而非定义位置。全局中指向window/global，对象方法中指向调用者，构造函数指向实例，箭头函数继承定义时上下文，事件处理指向触发元素。使用call/apply/bind可显式绑定this。常见问题包括this丢失，可用bind解决。关键口诀：全局window，方法调用者，构造实例，箭头继承，显式指定，事件元素。掌握this指向规则对JavaScript开发至关重要。
2025-07-06 19:15:41
313
原创 回调函数 vs Promise vs async/await区别
JavaScript异步编程方式对比：回调函数易导致嵌套地狱，语法简单但维护困难；Promise通过链式调用优化流程，支持统一错误处理；async/await基于Promise，用同步写法实现异步逻辑，可读性最佳。三种方案各有适用场景：旧项目用回调，并发处理用Promise，现代开发首选async/await。随着ECMAScript标准演进，异步编程正朝着更简洁高效的方向发展。
2025-07-06 16:48:59
459
原创 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
397
原创 Promise 如何中止？
JavaScript Promise无法直接取消，但有几种模拟取消的方法：1）使用AbortController中止fetch请求；2）通过外部标志控制自定义Promise的结果处理；3）封装可取消的Promise工具；4）利用Axios的取消API。原生AbortController能真正中止网络请求，而手动取消标志和封装方法只能跳过结果处理。建议统一封装异步请求，在组件销毁时调用abort()，避免内存泄漏并处理重复请求。（150字）
2025-07-06 16:03:14
437
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人