- 博客(22)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 前端工程化-构建打包
前端打包工具演进与选型评估 当前主流前端打包工具Webpack面临构建速度慢、HMR热更新效率低等痛点，尤其在大型项目中问题凸显。Babel作为核心转译工具，通过解析-转换-生成三步将ES6+代码转为兼容性更好的ES5代码。 新兴工具Vite采用浏览器原生ES Module实现按需加载，开发环境基于ESbuild快速编译，生产环境使用Rollup高效打包，相比Webpack具有显著的速度优势。Webpack生态更成熟但配置复杂，适合大型复杂项目；Vite配置简单、启动快，更适合中小型项目和快速迭代场景。 项
2025-07-13 22:36:30
1165
原创 前端内容-ES6
本文摘要对比了Common.js和ES6模块系统的区别，介绍了箭头函数特性及其与普通函数的差异，分析了var、let、const三种变量声明方式的不同，并探讨了ES6新增的Symbol、Map、Set、WeakMap等数据类型的特点和用途。文章还总结了ES6新特性的四大分类，详细讲解了五种对象属性遍历方法，以及Reflect对象的作用和静态方法。这些内容涵盖了JavaScript模块化、变量声明、函数特性、数据结构等核心知识点，有助于理解ES6的重要改进和现代JavaScript编程范式。
2025-07-12 21:34:30
512
原创 HTML-八股
本文摘要： DOM与BOM：DOM为文档对象模型，用于操作网页内容；BOM为浏览器对象模型，控制浏览器窗口及组件。 网页加载过程：包括DNS解析、TCP连接、HTTP请求、服务器响应、浏览器渲染及连接关闭六个阶段。 图片格式：介绍了位图与矢量图，压缩类型（无压缩、有损、无损），以及常见图片格式（GIF、JPEG、PNG等）的特性与应用场景。 跨页面通信：列举了多种方法，如本地存储、Cookies、postMessage、WebSocket等，实现不同页面间的数据交互。 DOM树：解析HTML生成树形结构的过
2025-07-11 16:59:36
581
原创 前端-设计模式
本文介绍了常见的设计模式及其应用场景。主要涉及五种设计模式：单例模式（全局唯一实例）、工厂模式（隐藏对象创建细节）、观察者模式（对象状态变化通知依赖）、装饰器模式（动态扩展对象功能）和适配器模式（接口转换）。设计模式分为创建型、结构型和行为型三类。重点对比了观察者模式与发布订阅模式的区别：前者是直接订阅关系，后者通过调度中心中介。文中提供了JavaScript实现发布订阅模式的代码示例，并支持同步/异步事件处理。最后讨论了MVVM架构模式，比较了MVC、MVP和MVVM的区别，指出MVVM通过双向绑定实现了
2025-07-08 18:00:46
648
原创 JavaScript-JavaScript是如何被浏览器引擎解析编译
摘要：V8引擎执行JavaScript代码分为四个阶段：1) Parse阶段将代码转换为AST抽象语法树，用于后续分析和优化；2) Ignition解释器将AST转为字节码，解决直接生成机器码导致的内存问题；3) TurboFan编译器通过JIT技术将热点代码优化为高效机器码；4) Orinoco阶段进行垃圾回收。AST在代码分析、Babel编译等场景有广泛应用。V8采用字节码+机器码的混合执行模式，平衡了性能和内存占用，其中Ignition和TurboFan协同工作，分别负责解释执行和优化编译。
2025-07-03 19:39:19
337
原创 JavaScript-JS引擎的垃圾回收机制
本文介绍了JavaScript的内存管理机制，重点分析了V8引擎的内存限制原因和垃圾回收策略。JavaScript的基本数据类型存储在栈内存，而引用数据类型存放在堆内存并由垃圾回收机制管理。V8引擎因浏览器应用场景和性能平衡考虑，对内存使用进行了限制（64位系统1.4GB，32位0.7GB）。文章详细阐述了三种垃圾回收算法：引用计数（简单但存在循环引用问题）、标记清除（可靠但会暂停程序）和分代回收（结合前两者优点）。针对回收效率问题，V8采用增量标记、懒性清理、并发/并行等优化技术。新生代使用Scaveng
2025-07-03 14:31:42
583
原创 JavaScript-如何理解Generator、async/await等异步编程的语法糖
Generator与异步编程 Generator函数（function*）通过yield暂停执行，返回可迭代对象，需手动调用next()恢复执行。其核心价值在于适配异步流程： 暂停-恢复机制：yield暂停等待异步操作，next()恢复执行，实现同步式异步编程。 解决回调地狱：平铺异步逻辑，提升可读性。 自动执行方案： Thunk函数：将多参函数转为单参回调，递归调用next()实现自动执行。 Promise：通过.then()链式调用自动推进Generator。 演进为async/await：内置执行器、
2025-07-02 22:32:36
563
原创 JavaScript-深入理解Promise
Promise核心概念与应用 Promise是异步编程的解决方案，包含三种状态（pending/fulfilled/rejected），状态转变不可逆。其核心优势在于： 回调延迟绑定与返回值穿透实现链式调用，解决回调嵌套问题 错误冒泡机制自动传递异常到最近的catch 提供四种静态方法： all：全成功才成功，用于并行请求 allSettled：获取所有结果（含失败） any：任一成功即成功 race：竞速响应，常用于超时控制 典型应用包括接口并行请求、异步流程串行化、统一错误处理等场景，显著提升异步代码可
2025-07-02 18:44:41
958
原创 JavaScript-异步编程
前端异步编程方法概述 前端开发中常用的异步编程方法包括回调函数、事件监听、Promise、Generator和async/await。同步编程会阻塞代码执行，而异步编程允许在等待操作完成时继续执行其他任务，这对单线程的JavaScript尤为重要。回调函数是基础的异步实现方式，但容易导致"回调地狱"。Promise通过链式调用解决了这一问题，并提供Promise.all等并行处理方法。Generator函数通过yield暂停执行，配合迭代器实现异步控制。这些方法各有特点，开发者可根据需求
2025-07-02 14:27:54
745
原创 JavaScript-sort数组排序
JavaScript数组的sort方法使用混合排序策略：小数组(n<10)用插入排序，大数组用快速排序。快排优化采用中位数选取策略，避免最坏情况。时间复杂度分析显示，快排平均O(nlogn)但可能退化到O(n²)，而插排稳定但O(n²)。该方法通过动态切换和优化策略平衡性能，适合不同规模的数据排序。参数compareFunction控制排序顺序，通过返回值决定元素位置。
2025-07-02 12:18:01
227
原创 JavaScript-数组排序
文章摘要： 本文系统介绍了6种常见的数组排序算法。首先将排序分为比较类和非比较类两大类，指出时间复杂度差异。随后详细讲解了冒泡排序（通过相邻元素比较交换）、快速排序（分治法递归排序）、插入排序（构建有序序列插入元素）、选择排序（每次选择最小元素）和堆排序（利用大顶堆结构）的实现原理。每种算法均附有JavaScript代码示例，包含关键注释说明。文章重点突出了各算法的核心思路和实际应用方法，为开发者提供了清晰的排序算法学习路径。
2025-07-01 22:13:51
1018
原创 JavaScript-数组扁平化
本文介绍了6种实现数组扁平化的方法：1）递归遍历数组元素；2）使用reduce函数迭代；3）扩展运算符结合some方法；4）toString与split转换；5）ES6的flat方法；6）JSON.stringify配合正则处理。这些方法按实现难度分为易、中两级，包括递归、字符串转换、原生方法等多种思路。其中flat方法最为简便，而递归和reduce体现了基础编程思想，其他方法则展示了不同的技术组合。开发者可根据需求选择适合的扁平化方案。
2025-07-01 20:02:11
942
原创 JavaScript-数组API-类数组
摘要： JavaScript数组API包括构造器、判断方法、改变/不改变原数组的方法及遍历方法。构造器有Array.of和Array.from，后者常用于类数组转换。数组判断推荐Array.isArray。改变原数组的方法如push、splice，不改变的方法如concat、slice。遍历方法包括forEach（无返回值）、filter（筛选）、map（映射新数组）等。ES6新增entries、find等方法，增强数组操作灵活性。
2025-07-01 17:40:54
993
原创 JavaScript-call、apply、bind
本文介绍了如何手动实现JavaScript中的call、apply和bind方法。在call的实现中，通过将函数设为context对象的属性来实现this绑定；apply实现类似但参数处理不同；bind则返回一个新函数，处理了参数合并和new调用的情况。三者的共同点是：1)进行类型检查确保调用对象是函数；2)处理this绑定上下文；3)通过Symbol避免属性冲突；4)最终返回执行结果或新函数。其中bind还特别处理了原型继承问题，确保新函数能继承原函数的原型链。这些实现帮助我们更深入理解JavaScrip
2025-07-01 15:58:39
210
原创 JavaScript-this指向
默认绑定: 非严格模式下this指向全局对象，严格模式下this会绑定到undefined隐式绑定: 满足XXX.fn()格式，fn的this指向XXX。如果存在链式调用，this永远指向最后调用它的那个对象隐式绑定丢失：起函数别名，通过别名运行；函数作为参数会造成隐式绑定丢失。显示绑定: 通过修改this指向new绑定: 通过new来调用构造函数，会生成一个新对象，并且把这个新对象绑定为调用函数的this。箭头函数绑定: 箭头函数没有this，它的this是通过作用域链查到外层作用域的this。
2025-07-01 14:19:17
576
原创 JavaScript-运行机制
JavaScript中的原型链机制是实现对象继承的核心。对象通过__proto__属性指向其构造函数的原型对象(prototype)，形成链式结构。查找属性时，会沿原型链向上查找。构造函数通过prototype共享属性和方法，避免重复创建。__proto__和prototype的区别在于：前者是所有对象都有的隐式原型，指向构造函数的原型；后者仅函数拥有，用于定义共享属性和方法。使用时应注意：避免修改原型中的可变数据类型，推荐使用Object.getPrototypeOf()而非非标准的__proto__。
2025-07-01 14:18:20
793
原创 JavaScript-原型链
JavaScript中的原型链机制是实现对象继承的核心。对象通过__proto__属性指向其构造函数的原型对象(prototype)，形成链式结构。查找属性时，会沿原型链向上查找。构造函数通过prototype共享属性和方法，避免重复创建。__proto__和prototype的区别在于：前者是所有对象都有的隐式原型，指向构造函数的原型；后者仅函数拥有，用于定义共享属性和方法。使用时应注意：避免修改原型中的可变数据类型，推荐使用Object.getPrototypeOf()而非非标准的__proto__。
2025-07-01 14:17:48
366
原创 JavaScript-继承
JavaScript继承机制总结： 原型链继承：子类原型指向父类实例，存在内存共享问题 构造函数继承：通过call调用父类构造函数，无法继承原型方法 组合继承：结合前两者优点，但父类构造函数会执行两次 原型式继承：使用Object.create实现浅继承，实例会相互影响 寄生式继承：在原型式基础上增强对象能力 寄生组合继承(推荐)：最优ES5方案，只调用一次父类构造函数 ES6继承：基于class和extends语法糖，底层仍是寄生组合继承 ES5与ES6继承差异：ES6继承语法更简洁，但需要编译才能在旧浏
2025-07-01 14:17:04
998
原创 JavaScript-闭包
摘要 JavaScript闭包是指能够访问其他函数内部变量的函数，通过内部函数保存外部函数作用域来实现。闭包具有封装数据、保持状态、实现函数工厂等优点，但也可能导致内存泄漏和性能问题。其工作原理基于作用域链机制，当函数返回内部函数时，该函数会保留对外部作用域的引用。应用场景包括数据封装、异步编程、柯里化等。使用时需注意控制闭包数量、及时释放资源，并优先使用let/const声明变量以避免问题。
2025-07-01 14:15:44
806
原创 JavaScript--JSON相关
本文介绍了JavaScript中JSON.stringify和JSON.parse两个核心方法的功能与实现。JSON.stringify用于将JS对象转换为JSON字符串，处理了数据类型转换、循环引用检测、特殊字符转义等逻辑，不支持undefined、function等类型。JSON.parse则用于解析JSON字符串为JS对象，简单实现可用eval，高级版本需使用状态机进行分词处理。文章提供了JSON.stringify的完整实现代码，包括对字符串、数字、数组、对象等类型的处理逻辑，以及循环引用检测机制，
2025-07-01 14:10:02
493
原创 前端-react工程化问题
React首页白屏问题可能由资源路径错误、依赖包兼容问题、网络请求失败、路由配置错误、资源加载阻塞、同步渲染或SSR缺失引起。解决方法包括检查配置、验证API、使用SSR/预渲染、懒加载与代码拆分、资源优化等。对于超大树形数据，可采用分页加载、虚拟滚动、懒加载、批量处理、Web Workers和缓存优化。同一链接适配PC和手机可通过UA识别或响应式设计实现。网页加载进度条可监听页面事件或模拟进度效果。
2024-05-17 13:37:50
747
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人