- 博客(60)
- 收藏
- 关注
RSS订阅原创 JavaScript 运算符与隐式类型转换
JS 运算符分为：算术运算符、赋值运算符、比较运算符、逻辑运算符、位运算符、三元运算符、逗号运算符。，JS 引擎自动帮你转类型。其余全部是真值（truthy）取反：先转布尔值再取反。只要任意一边是字符串，短路特性（非常高频考点）隐式转换：代码里没有写。重点：很多面试坑都来自。
2026-11-09 11:22:28
222
原创 JavaScript 垃圾回收机制 GC
JavaScript自动垃圾回收基于可达性判断，通过标记清除（主流）与复制算法实现内存管理。V8采用分代回收：新生代用复制算法，老生代用标记清除+整理，提升效率。GC期间存在StopTheWorld（STW），现代引擎通过增量标记优化卡顿。内存泄漏常见于全局变量、闭包缓存、未清理定时器或事件监听。优化手段包括减少全局变量、及时置空、使用WeakMap/WeakSet弱引用，避免强引用导致的内存泄漏。
2026-11-08 15:41:47
327
原创 JavaScript 继承
本文系统讲解了JavaScript继承的五种方式：原型链继承、借用构造函数、组合继承、寄生组合继承及ES6 class继承。重点对比了各方案的优缺点，指出寄生组合继承为ES5最优解，而ES6 class是日常开发首选。强调继承本质是原型链查找，class仅为语法糖，super用于调用父类构造或方法，且子类constructor中必须先调用super。
2026-11-08 15:39:31
174
原创 JavaScript this 指向详解
JavaScript中this的指向取决于函数调用方式，而非定义位置。核心原则：谁调用，this就指向谁。五种绑定规则按优先级排序为：箭头函数（继承外层）> new绑定 > bind硬绑定 > 隐式绑定 > 默认绑定。常见坑点包括：回调、定时器中this易丢失；对象方法别名赋值后隐式绑定失效；箭头函数无法通过call/apply/bind改变this。快速判断流程：先看是否箭头或new，再依次检查bind、隐式调用，最后默认绑定。总结：普通函数看调用，箭头函数看定义。
2026-11-03 09:32:47
196
原创 JavaScript 闭包
闭包 = 函数 + 它能访问的外部作用域简单说：内层函数，引用了外层函数的变量，并且内层函数被拿到外层执行，就形成闭包。内层函数依然保留对外层作用域变量的访问权限，外层函数执行完毕，变量不会被销毁。一句话记忆：函数 A 里面定义函数 B，B 使用了 A 的变量，B 跑到 A 外面执行 → 闭包。闭包的本质：函数持有对外部词法环境的引用；作用：保存状态、封装私有数据、柯里化；代价：常驻内存，使用不当容易内存泄漏；识别关键点：内层函数跨作用域访问外层变量，且内层被外部持有。
2026-11-02 07:30:00
446
原创 JavaScript 原型与原型链
JavaScript原型链是继承的核心，对象通过__proto__指向构造函数的prototype，实现属性与方法的共享。new操作符创建实例并链接原型链，instanceof基于原型链查找判断类型。ES6 class是语法糖，底层仍依赖原型。注意避免直接修改__proto__、原型引用类型共享等问题。理解原型链，方能掌握JS继承、this及框架底层机制。
2026-11-01 22:01:30
193
原创 JavaScript 防抖与节流
防抖（debounce）与节流（throttle）是前端性能优化的核心手段。防抖适用于搜索联想、输入校验等场景，确保用户停止输入后才执行；节流用于滚动、鼠标移动等高频事件，限制单位时间内函数执行次数。前者“等停了再干”，后者“匀速干活”。合理使用可避免频繁请求与卡顿。建议结合实际场景选择方案，优先使用 lodash 等成熟库，并注意清除定时器防止内存泄漏。
2026-10-29 09:43:17
155
原创 JavaScript 事件循环（Event Loop）
JavaScript是单线程语言，通过事件循环实现异步调度。执行顺序遵循：同步任务优先 → 清空微任务队列 → 执行一个宏任务 → 再清空微任务，循环往复。微任务（如Promise.then）优先级高于宏任务（如setTimeout），且微任务中产生的新微任务会在本轮全部执行。浏览器与Node.js事件循环机制不同，需注意setImmediate与setTimeout在Node中的不确定性。开发中应避免依赖setTimeout(0)立即执行的错觉，防止微任务堆积阻塞渲染，长耗时操作可使用WebWorker。
2026-10-27 08:21:33
233
原创 JavaScript 异步编程｜回调、Promise、async/await 权威指南
把一个函数作为参数传给另一个函数，等异步操作完成之后再执行这个传入函数，就是回调。// 简单定时器回调console.log('开始')console.log('定时器回调执行')}, 1000)console.log('结束')开始结束定时器回调执行。
2026-10-25 08:00:00
308
原创 CSS 模块化方案｜隔离、复用与工程化选型权威指南
本文系统梳理了前端样式模块化的四大主流方案：CSSModule（编译期哈希隔离）、Vue Scoped CSS（属性选择器）、CSS-in-JS（运行时动态生成）与原子化CSS（TailwindCSS）。对比其原理、优缺点及适用场景，强调选型应结合技术栈与团队规范。核心建议：React优先用CSSModule，Vue首选scoped，避免混用多种方案，合理搭配CSS变量实现主题管理，确保样式可维护性与隔离性。
2026-10-24 09:12:13
7
原创 CSS BEM 命名规范｜组件化样式分层权威指南
BEM是一套清晰的命名约定，通过block__element--modifier结构实现组件化开发，提升代码可读性与维护性。它消除样式歧义、降低选择器权重，适用于中大型项目与团队协作。强调语义化命名、扁平化结构，避免深层嵌套与层级选择器，搭配预处理器可高效编写。虽类名较长，但换来高可维护性，是长期项目的优选方案。
2026-10-23 09:00:00
205
原创 CSS 变量｜样式复用与动态主题权威指南
CSS变量（自定义属性）是实现主题切换、换肤与组件化设计的核心技术。通过--定义，var()引用，支持继承、动态修改与calc()计算，结合JS可实现暗黑模式等交互。建议将设计Token统一置于:root，语义命名，组件内使用局部变量，避免污染。注意变量名格式、单位书写及兜底值设置，提升可维护性与扩展性。
2026-10-22 10:38:52
140
原创 CSS 过渡与动画｜页面动效设计权威指南
本文系统梳理CSS过渡（transition）与动画（animation）的原理、属性、实战应用及性能优化。transition适用于状态切换，如hover交互；animation基于@keyframes实现多阶段循环动效，适合loading等持续动画。强调优先使用transform、opacity提升性能，避免width/height等引发重排。总结：合理搭配二者，结合will-change、backface-visibility等技巧，可实现流畅优雅的原生动效。
2026-10-15 19:57:39
189
原创 Grid 网格布局｜CSS 二维页面排版体系
网页布局分为一维与二维两类，Flex 擅长单条轴线的元素排布，而Grid（网格布局）是 CSS 原生二维布局方案，可以同时管控行与列，一次性构建完整网格。适合整体页面框架、复杂卡片墙、图片画廊、多列不规则排版这类场景，是现代前端页面搭建的核心能力。开启网格布局：父容器设置，直接子元素自动成为网格项。用来设置有多少列、多少行，以及每一格的宽度、高度。.wrap {/* 3列，每列1fr，三等分 */fr网格专属单位，代表剩余空间份数，非常适合自适应均分支持repeat(数量, 尺寸)简写，
2026-10-14 09:30:00
878
原创 CSS Flex 弹性布局｜一维页面弹性排版权威指南
在 Flex 布局出现之前，前端实现水平排列、居中对齐大多依赖float浮动 +clear清除浮动，代码繁琐，还会出现高度塌陷、垂直对齐难等一系列问题。Flex（弹性盒模型）是 CSS3 推出的一维布局方案，专门用来处理一条主轴上元素的排列、对齐、分配剩余空间。移动端、后台管理页面、导航栏、卡片列表几乎全部使用 Flex 实现，上手简单，兼容性良好，是现代前端最常用的布局方式。本文系统性拆解 Flex 容器、弹性项目两套属性，搭配大量实战示例，梳理开发选型与踩坑要点。作用主轴；作用交叉轴，不要记混。
2026-10-13 08:30:00
786
原创 JS 数组高阶方法｜函数式编程数组处理指南
数组高阶方法是前端数据处理的核心工具，涵盖遍历（forEach）、映射（map）、过滤（filter）、查找（find/findIndex）、判断（some/every）及聚合（reduce），均接收回调函数，不修改原数组，返回新结果。合理选用可大幅简化代码、提升可读性。链式调用需注意执行顺序，优先筛选后映射以优化性能。关键规范：map必return，reduce必设初始值，forEach不可中断，避免滥用链式。掌握这些方法，实现高效列表渲染与数据处理。
2026-10-12 10:03:50
484
原创 JS ES6常用新特性｜let/const、解构赋值、展开运算符
ES6新特性提升JS开发效率：let/const实现块级作用域与暂时性死区，优先使用const；解构赋值简化数据提取；展开运算符...实现数组/对象合并与浅拷贝；箭头函数简化语法，但无自身this和arguments；模板字符串支持换行与变量插值。工程中应规范使用这些特性，避免常见坑点，如深拷贝误用、this绑定问题等。
2026-10-09 08:00:00
382
原创 JS数组高阶方法｜函数式编程数组处理指南
数组高阶方法核心是接收回调函数，不修改原数组，返回新结果。forEach用于遍历，无返回值；map实现元素转换，需return；filter筛选符合条件项；find/findIndex查找单个元素或下标；some/every判断条件存在或全部满足；reduce用于聚合计算，必须传初始值。链式调用提升可读性，但避免过长链条。开发中应根据场景选型：遍历用forEach，转换用map，过滤用filter，查找用find/findIndex，校验用some/every，聚合用reduce。注意map需return、
2026-10-08 10:08:20
428
原创 JS原型与原型链｜对象继承与实例底层原理
JavaScript原型与原型链是面向对象的底层机制，通过prototype和__proto__实现属性共享与继承。实例通过__proto__指向构造函数的prototype，形成原型链，实现方法复用与内存优化。new操作符自动完成对象创建、原型链接、this绑定与返回。原型链在属性查找中向上追溯至Object.prototype，赋值不修改原型。常见继承方案包括原型链继承、组合继承与ES6 class extends（语法糖）。需注意constructor重置、避免原型污染、合理使用instanceof、
2026-09-30 17:58:37
554
原创 JS函数｜封装、作用域与高阶函数权威指南
本文系统讲解JavaScript函数核心原理，涵盖定义方式（声明、表达式、箭头函数）、参数与返回值机制、作用域与闭包、高阶函数及this指向规则。强调函数复用、模块化设计与工程实践规范，指出常见陷阱如作用域污染、内存泄漏、this误用等，助力开发者从基础编码迈向工程化开发。
2026-09-29 14:33:29
713
原创 CSS定位体系｜层级叠加与精准布局权威指南
本文系统解析CSS定位体系，涵盖static、relative、absolute、fixed、sticky五种模式的参照物规则、文档流特性与层级逻辑。重点阐释absolute父相子绝布局范式、fixed全局悬浮应用及sticky滚动吸附机制，结合z-index堆叠规则与工程选型规范，总结高频踩坑点，助力开发者实现精准可控的现代网页布局。
2026-09-28 15:11:13
348
原创 CSS浮动布局｜传统排版原理、高度塌陷与清除浮动实战
浮动（float）原用于图文环绕，非多栏布局。其核心特性包括脱离文档流、自动块级化、同行停靠换行及文字保留流。常见问题为父容器高度塌陷，可通过清除浮动解决：额外标签法兼容性好但破坏语义；overflow:hidden简洁但裁剪内容；伪元素after法（clearfix）无冗余节点且可复用，企业通用；双伪元素法更全面。新项目优先使用Flex/Grid，旧项目统一采用clearfix。避免手动设height掩盖问题，浮动元素间无margin垂直合并，维护时建议统一浮动。浮动是历史布局手段，现代应以Flex/Gr
2026-09-24 16:44:12
462
原创 CSS盒模型｜标准盒与怪异盒模型，布局底层基石
本文系统讲解盒模型四大组成部分（content、padding、border、margin），对比标准盒模型（content-box）与怪异盒模型（border-box）的差异，强调推荐全局使用box-sizing: border-box以避免布局溢出。详解margin外边距合并现象及解决方案，介绍BFC（块级格式化上下文）的触发条件与应用，如解决浮动清除、父子塌陷等问题。实战中应优先统一盒模型模式，合理使用padding与margin，规避布局风险。
2026-09-23 08:23:29
581
原创 CSS过渡与动画｜transition与animation动效体系
本文系统讲解CSS过渡（transition）与动画（animation）的使用方法。transition实现元素状态间的平滑过渡，需触发事件，仅支持两状态切换；animation通过@keyframes定义多阶段动画，可自动播放、循环，适合复杂效果。对比指出：transition适用于hover反馈，animation适合loading、呼吸灯等持续动画。实战中推荐使用transform和opacity提升性能，避免重排，禁用all属性，合理控制循环动画数量，确保跨设备流畅性。
2026-09-22 11:24:08
399
原创 CSS选择器大全｜基础筛选、层级匹配、伪类与伪元素体系
通配符 < 标签选择器 < 类/伪类/属性选择器 < ID选择器 < 行内样式 <!hover、聚焦、奇偶样式全部使用伪类自动匹配，适配动态数据。基础选择器用于全局、精准、批量选中元素，是所有样式的根基。根据标签属性、属性值模糊匹配元素，适合表单、链接批量筛选。权重不会进位，多个低权重选择器叠加，不会超过高权重选择器。，常用于图标、分割线、遮罩、文字修饰，减少DOM节点。important、ID选择器，防止权重混乱。，实现hover、聚焦、点击、禁用交互。，默认行内元素，可改宽高、定位。
2026-09-21 08:21:33
476
原创 async/await｜JS同步写法解决异步终极方案
async/await是Promise的语法糖，使异步代码如同步般书写。async函数返回Promise，await仅在async内使用，用于等待异步结果。默认串行执行，有依赖时适用；无依赖时用Promise.all实现并行，提升性能。所有await必须包裹try/catch防止崩溃。核心：异步逻辑同步写法，底层仍基于Promise。
2026-09-19 14:12:50
227
原创 DOM文档对象模型｜JS操作页面交互核心API
本文系统介绍DOM基础概念与核心操作，涵盖DOM树结构、元素获取（如getElementById、querySelector）、内容读写（innerText与innerHTML区别）、属性操作（原生与data-*自定义属性）、样式管理（style与classList）、节点增删改及事件处理机制。强调开发中注意JS执行时机、性能优化与安全防范，推荐使用classList和addEventListener，避免频繁DOM操作与XSS风险，提升页面交互效率与安全性。
2026-09-17 19:01:15
351
原创 CSS定位体系｜页面层级与精准布局原理
本文系统讲解CSS五大定位模式：static（默认）、relative（相对）、absolute（绝对）、fixed（固定）和sticky（粘性）。重点阐述各模式的定位规则、偏移属性及应用场景，如“父相子绝”布局、悬浮导航、吸顶标题等。强调z-index控制层级，总结工程选型口诀：普通布局用static，微调用relative，叠加层用absolute，全局固定用fixed，滚动吸顶用sticky，实现高效精准布局。
2026-09-16 19:01:21
113
原创 JS循环结构｜批量重复逻辑与迭代控制
循环核心思想是满足条件则重复执行代码，直至条件不成立。三种循环：while先判断后执行，可能一次不执行；do-while先执行后判断，至少执行一次；for循环结构集中，适合遍历数组。循环三要素——初始化、条件、更新缺一不可，避免死循环。break用于立即终止循环，continue跳过当前轮次。选择策略：次数明确用for，不确定用while，需至少执行一次用do-while。嵌套循环可实现多层结构，但应避免深层嵌套以提升性能。
2026-09-14 11:30:06
301
原创 JS分支结构｜程序逻辑判断与流程控制
分支结构是程序逻辑的灵魂，所有业务判断、权限控制、状态渲染、表单校验都基于此实现。熟练掌握 if / else if / switch / 三元表达式，能够解决前端 80% 的基础逻辑判断。掌握判断逻辑后，下一步即可学习循环结构，实现批量、重复数据处理。
2026-09-10 17:49:21
286
原创 JavaScript基础体系｜前端交互语言核心入门
HTML搭建页面结构，CSS负责视觉渲染，而JavaScript赋予网页动态交互能力。三者共同构成前端页面的铁三角。很多初学者误以为JS只是简单的点击弹窗、修改文字。实际上它是一门完整的解释型编程语言，拥有变量、类型、分支、循环、函数等整套编程体系。既能在浏览器操作页面DOM，也可以借助Node.js在服务端运行。本文开启JS专栏第一篇，系统梳理JavaScript基础核心体系，建立完整的语言认知框架。
2026-09-09 17:50:01
612
原创 Flex弹性布局｜现代网页布局核心范式
Flex擅长一维布局：一行、一列的排版。如果需要同时控制行和列二维布局场景，就轮到 Grid 出场。相比浮动布局，Flex规避了大量布局副作用，是移动端、后台管理系统页面首选方案。熟练掌握容器与弹性项两套属性，绝大多数页面布局问题都可以迎刃而解。
2026-09-08 17:33:46
403
原创 盒模型与BFC｜CSS布局底层渲染原理
<think>我们只需要根据内容生成摘要，≤150字。内容主要讲盒模型与BFC，解决布局问题。概括要点。</think>盒模型与BFC是CSS布局核心。盒模型决定元素尺寸计算，BFC提供独立渲染区域。常见布局问题如margin塌陷、浮动高度塌陷、元素遮挡，均源于理解不足。掌握box-sizing、BFC触发条件及三大能力（包裹浮动、阻止塌陷、避免覆盖），可系统排查问题，减少盲目调试。
2026-09-07 18:25:38
817
原创 CSS 高阶选择器深度解析｜精准渲染与样式工程化实战
结合工程实战，梳理高频易错点，规避样式BUG：优先使用子代选择器替代后代选择器，防止样式全局渗透污染结构伪类计数需区分节点类型，根据业务场景选择 nth-child / nth-of-type伪类单冒号、伪元素双冒号，严格区分语法，伪元素必填 content 属性样式冲突不盲目加权重，通过优化选择器层级精准解决问题巧用 :not() 否定伪类，精简冗余样式代码，提升代码优雅度高阶选择器的核心价值，不在于实现炫酷样式，而在于解耦结构与样式、精简DOM冗余、统一页面渲染规则。
2026-09-06 10:57:35
200
原创 CSS 核心体系解析｜网页视觉渲染与布局底层逻辑
CSS（Cascading Style Sheets）层叠样式表层叠、继承、优先级，这三个特性是 CSS 运行的底层核心。结构与样式分离将网页结构（HTML）与视觉表现（样式）完全解耦，让页面维护、迭代、复用更加高效，这也是现代前端工程化的基础。层叠性：多个样式同时作用于同一元素，自动叠加生效继承性：文本类样式自动向下继承子元素，简化代码冗余优先级：冲突样式按照权重规则择优生效，避免样式混乱真正的 CSS 开发，不是“调样式”，而是掌控渲染规则、把控布局结构、优化视觉体验、兼顾兼容性与性能。
2026-09-05 09:24:41
654
原创 JavaScript 对象零基础详解｜属性、方法、遍历、增删改查
对象是一组键值对（key: value）的集合，用来描述一个具体事物。属性：事物的特征（名词：名字、年龄、性别）方法：事物的行为（动词：说话、跑步）数组是一堆数据，对象是一个完整的人/物品/数据模型。适合批量生成多个结构相同的对象。} // 实例化多个对象 let s1 = new Student("张三", 19);let s2 = new Student("李四", 21);对象以键值对存储数据，描述一个完整事物包含：属性（特征）、方法（行为）字面量{}是开发首选创建方式. 静态取值。
2026-09-01 21:43:12
207
原创 JavaScript 作用域与预解析详解｜变量提升、就近原则、暂时性死区
作用域：变量的合法访问范围变量在哪能⽤、在哪不能⽤，由作⽤域决定。JS 一共有三种作用域：全局作用域函数作用域块级作用域（ES6 新增）作用域控制变量访问范围：全局、函数、块级let/const 有块级作用域，var 没有变量查找遵循就近原则var 存在变量提升，容易出 buglet/const 存在暂时性死区，更严谨、安全函数声明提升、函数表达式不提升作用域和预解析是 JS 逻辑底层基石，学懂它，你就能看懂 90% 的 JS 诡异报错！
2026-08-31 08:19:08
207
原创 JavaScript 函数零基础详解｜定义、调用、参数、返回值、作用域
一组有序的数据集合，可以一次性存储多个数据。特点：可以存放任意类型数据：数字、字符串、布尔、对象数据有序排列，每个数据都有自己的下标（索引）数组长度可以动态变化数组是存放批量数据的容器通过下标取值，通过length获取长度搭配for循环实现批量遍历数据掌控数组增删数组是前端数据渲染、接口数据处理的核心基础，必须熟练掌握！
2026-08-28 19:07:47
166
原创 JavaScript 数组零基础详解｜创建、取值、遍历、常用方法大全
一组有序的数据集合，可以一次性存储多个数据。特点：可以存放任意类型数据：数字、字符串、布尔、对象数据有序排列，每个数据都有自己的下标（索引）数组长度可以动态变化数组是存放批量数据的容器通过下标取值，通过length获取长度搭配for循环实现批量遍历数据掌控数组增删数组是前端数据渲染、接口数据处理的核心基础，必须熟练掌握！
2026-08-27 20:51:49
185
原创 JavaScript 循环语句全解｜for、while、do-while 零基础精讲
让一段代码重复执行，满足条件就继续，不满足就停止。生活场景：跑圈：跑 1–10 圈，跑完停止打卡：重复输出 10 次“Hello”遍历商品：逐个读取所有商品数据for 循环：已知循环次数，遍历数组、批量渲染（首选）while 循环：未知循环次数，满足条件才循环do-while：需要代码至少执行一次的场景分支 + 循环 = JS 基础逻辑天花板掌握判断和循环，你已经可以写出完整的业务逻辑代码，后续的数组遍历、算法、页面渲染全部基于这两个知识点！
2026-08-26 08:51:24
789
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人