- 博客(46)
- 收藏
- 关注
RSS订阅原创 useEffect为什么会触发死循环
死循环核心：effect内更新state + state变化触发effect重新执行，形成闭环；关键认知：并非useEffect本身存在缺陷，而是逻辑设计不当；破环关键：打破“effect更新state→state触发effect”的任意一环即可。
2026-04-05 22:58:26
237
原创 100行实现Mini React
声明式 UI：通过 vnode 描述 UI。组件化：函数组件接收 props 返回 UI。状态管理：useState 让函数组件拥有内部状态。单向数据流：状态变化导致重新渲染，产生新的 vnode。return dom;/* 把 vnode 里的 props 同步到真实 DOM 上 *//* 移除旧事件 */
2026-04-01 11:27:29
362
原创 WebSocket实现长链接
网络抖动或服务器重启都会导致连接丢失，需要手动处理。：部分网络设备（如防火墙、负载均衡器）会断开长时间无数据传输的连接，导致“假死”。：服务器推送可能很频繁，如果回调处理耗时，容易造成消息乱序或丢失。：应用中可能多处需要使用长连接，如果每个地方都新建实例，会浪费资源并导致状态不一致。：缺少统一的错误日志、重试策略等。
2026-03-31 09:42:16
396
原创 深入学习webpack-tapable
/ 实现SyncHook// 实现SyncBailHookif (result!// 实现SyncWaterfallHook。
2026-03-25 22:56:37
251
原创 uniapp-降低主包体积-分包js
网上大量篇幅在讲如何分包，降低图片资源等等策略，但针对一些陈年老项目大家会发现，这些策略都已做过，那么该如何降低包体积呢？在 uni-app 小程序开发中，是最常见的痛点之一。官方默认的，直接导致主包体积暴涨，甚至无法发布。为了解决这个问题，写一个插件，专门针对小程序平台，自动将多分包共享的模块从主包剥离，分别下沉到对应分包的 vendor 中，精准瘦身主包。
2026-03-24 21:07:57
351
原创 day.js和 Moment.js
核心差异：Day.js 是轻量、不可变、活跃维护的库，Moment.js 体积大、可变、仅维护不更新；迁移成本：Day.js 兼容 Moment.js 绝大部分 API，切换几乎无学习成本；选型原则：新项目优先用 Day.js，老项目可逐步迁移，仅特殊场景保留 Moment.js。
2026-03-18 18:20:56
269
原创 javascript中 Iframe 处理多端通信、鉴权
在项目 A 内嵌项目 B 页面的场景中，单纯的基础 iframe 嵌入存在等问题。本次优化围绕「兼容性、安全性、性能、可维护性、用户体验」五大维度展开，覆盖从嵌入方式到异常处理的全流程。
2026-03-16 20:37:12
377
原创 JavaScript 原型与原型链
核心本质：原型是实现 JavaScript 继承的核心机制，原型链是属性查找的链式结构，所有对象最终继承自，终点为null；最佳实践：扩展方法优先用，创建指定原型对象用，避免直接操作__proto__；关键规则：属性查找遵循 “自身优先、就近原则”，原型方法的this指向实例，原型修改具有动态性且影响所有实例。
2026-03-11 09:46:47
528
原创 前端JS工具链
前端JS工具链是现代前端开发的核心支撑，由包管理器、编译工具、代码校验、构建打包、测试和CI/CD等模块组成，形成从编码到部署的完整闭环。
2026-03-09 22:49:27
359
原创 前端包管理器（npm、yarn、pnpm）
包管理器是现代前端开发必备工具，可自动化处理软件包（库、框架等）的安装、更新、配置与删除，解决手动管理依赖时的版本冲突、资源查找繁琐、依赖链维护复杂等痛点。前端包管理器均基于主流公共包仓库npm实现，核心围绕（依赖配置文件）和（依赖存放目录）工作，主流工具为npm、yarn、pnpm，适配不同开发场景。
2026-03-09 22:41:38
571
原创 JavaScript模块化（CommonJS+ES Module ）
简介：专门为浏览器端设计的异步模块化标准，解决CommonJS同步加载在浏览器端的阻塞问题（浏览器加载文件需通过网络，同步加载会导致页面卡顿），常与RequireJS（模块加载器）配合使用。核心语法（导入/导出）：导出：通过define()函数定义模块，可指定依赖；导入：通过require()函数异步加载模块，加载完成后执行回调函数。// 定义模块（myModule.js），依赖dependency模块});// 加载模块（index.js）myModule();});
2026-03-09 22:14:11
926
原创 前端工程化
核心：将软件工程思路应用于前端，解决传统开发（代码乱、协作差、维护难、部署繁）的痛点，最终实现“提效、保质量、易维护、低协作成本”，适配大型Web应用开发。本质：用工程化思维管理前端开发全流程，替代传统“写代码→直接部署”的粗放模式。
2026-03-09 21:39:14
70
原创 超详细！手写 Promise ，分段讲解，看完绝对懂！
/ 定义Promise的三个状态常量（不可变）核心逻辑：Promise 的本质是 “状态机”，状态一旦从 pending 变为 fulfilled/rejected 就不可变，通过缓存回调 + 异步执行实现链式调用；链式调用关键：then/catch/finally 都返回新 Promise，新 Promise 的状态由回调执行结果决定，resolvePromise 负责解析回调返回值；规范遵循。
2026-03-07 16:25:17
832
原创 发布订阅模式（EventEmitter）--结合生产使用
发布订阅模式（Publish-Subscribe Pattern）是一种经典的设计模式，核心是解耦事件的发布者和订阅者，使两者无需直接依赖即可完成通信。本文档基于 TypeScript 实现了支持单页面通信的 EventEmitter，并提供完整的使用指南、API 说明和最佳实践。
2026-03-07 15:14:50
327
原创 JavaScript 事件循环与 DOM 事件流
DOM 事件流描述事件在 DOM 树中传播的完整流程捕获阶段目标阶段冒泡阶段事件循环：浏览器渲染主线程的任务调度机制，执行顺序为：同步代码 → 清空微任务 → 执行 1 个宏任务 → 清空微任务 → 渲染（可选），微任务优先级高于宏任务，且会阻塞渲染；DOM 事件流：事件在 DOM 树中先捕获（外→内）、后冒泡（内→外），事件回调属于宏任务，会在事件循环中执行；浏览器核心约束：渲染主线程单线程执行，所有 JS、DOM 操作、渲染、事件处理串行，异步任务通过事件循环调度，避免主线程阻塞。
2026-03-06 14:33:07
321
原创 JavaScript 浅拷贝 (Shallow Copy) & 深拷贝 (Deep Copy)
1. 核心概念浅拷贝（Shallow Copy）和深拷贝（Deep Copy）只针对（对象、数组），值类型不存在深浅拷贝问题。
2026-03-05 14:10:43
360
原创 uniapp-支持发布多个微信小程序，动态修改appid
核心功能：该脚本是 uni-app 小程序的多环境切换工具，通过读取 package.json 中的环境配置，自动修改 manifest.json/project.config.json/pages.json 核心文件；关键技术：Node.js 的 fs/path 模块（文件操作 / 路径处理）、正则移除 JSON 注释、命令行参数 / 环境变量读取；扩展方向：可增加文件备份、更健壮的错误捕获、配置校验、日志记录等功能，提升脚本的稳定性和可维护性；使用建议。
2026-03-04 22:15:21
684
原创 JavaScript 闭包 （这次真的懂了）
闭包是「函数 + 该函数创建时的词法环境」的组合 —— 简单说，闭包就是一个能 “记住” 自己出生环境的函数，即使它离开这个环境（比如外部函数执行完毕），也能访问环境里的变量。闭包本质：能记住并访问定义时的词法环境的函数，核心是「词法作用域 + 变量引用保留」；核心作用：实现私有变量、跨调用保持状态、解决异步 / 循环的作用域问题；避坑关键：注意内存开销（及时解除引用）、区分 “引用” 和 “值”、警惕 this 指向问题；学习技巧：多写实战案例（比如计数器、防抖函数），结合开发者工具调试闭包。
2026-03-04 15:31:15
419
原创 JavaScript 执行上下文与作用域链
执行上下文：代码执行的 “运行环境”，由执行栈管理，生命周期分创建 / 执行 / 销毁三阶段，决定变量提升、this 指向；作用域链：变量查找的 “路径”，由词法作用域决定（定义位置而非调用位置），是闭包实现的底层核心；实战关键：let/const 带来块级作用域，闭包会保留外部词法环境，作用域链长度影响性能，调试时可通过 Call Stack/Scope 面板分析上下文和作用域。
2026-03-04 09:57:38
424
原创 JavaScript 数组核心方法（非常全面）
(2) push/pop/shift/unshift - 数组首尾操作。(1) map () - 数组转换（返回新数组）工作中最常使用。(4) forEach () - 遍历执行（无返回值）(5) some ()/every () - 条件判断。(3) sort/reverse - 排序 / 反转。(1) splice () - 增删改数组（核心）(1) slice () - 截取数组片段。(2) concat () - 数组合并。：数组转对象（按 ID 映射）手动实现核心方法（面试必考）
2026-03-03 15:20:22
880
原创 轻松理解 JavaScript 值类型与引用类型
1. 核心差异：值类型存「数据本身」，赋值传参复制副本；引用类型存「地址」，赋值传参复制地址，共享数据。2. 传参本质：始终按值传递，引用类型传递的是“地址的值”，因此修改对象属性会影响外部。3. 避坑关键：const 不限制对象内容修改；引用类型相等判断看地址，不看内容。
2026-03-03 09:37:35
312
原创 数据类型和typeof的陷阱
本文系统梳理了JavaScript中的typeof操作符及其类型判断机制。首先介绍了JS的7种原始类型和1种对象类型，指出typeof用于返回操作数类型字符串。重点分析了typeof的两个经典陷阱：将null误判为"object"（历史遗留问题）以及无法区分数组和普通对象。提供了更精准的类型判断方法：使用Object.prototype.toString.call()可识别所有类型，Array.isArray()专用于数组检测。特别说明了typeof的安全机制（未声明变量返回"
2026-03-02 09:53:18
591
1
原创 var 、let、const 有什么区别(深度理解）
ar、let、const 是 JavaScript 中声明变量的关键字，主要区别在于作用域、变量提升、重复声明、可修改性。
2026-03-02 09:32:59
456
原创 JavaScirpt笔试题---不断更新
第一套（50题）1、执行以下程序，输出结果为（）var one;var two = null;console.log(one == two,one === two);A、true false B、true true C、false false D、false true E、抛出异常解析：A ； 变量one只声明未赋值，所以其值为undefined，在使用“==”对undefined和null进行比较时，不能将null和undefined转换成其他任何值，并且规定und
2025-03-05 10:55:13
299
原创 React----Next.js框架学习
一、Next.js是什么Next.js是一款React的服务端渲染框架，用于构建SEO友好的SPA应用。Next.js具有同类框架中最佳的“开发人员体验”和许多内置功能：直观的、基于页面的路由系统，支持动态路由 预渲染。支持在页面级的静态生成（SSG）和服务器端渲染（SSR） 自动代码拆封，提升页面加载速度 具有经过优化的预取功能的客户端路由 内置CSS和Sass的支持，并支持任何CSS-in-JS库 开发环境支持快速刷新 利用Serverless Function及API路由构建API
2025-03-05 10:54:45
1680
原创 手写---前端简单路由
本文路由呈现以hash形式，当URL中的hash值发生变化时，监听hashchange，触发回调函数，再在回调函数中进行不同的操作，进行不同内容的展示。
2022-08-05 18:13:17
482
原创 前端性能优化
！减少请求1、减少HTTP请求尽量减少页面的请求数，可以合并css和js，或者使用css精灵图等2、避免重定向301、302这类的状态码就涉及内容的重定向。301永久重定向，是指原来的URI已经永久性的不存在了，今后所有的请求都必须改用新的URI。302临时重定向，是指原URI处于‘临时维护’状态，新的URI是起了顶包的临时工的作用。重定向带来一定“性能损耗”,很明显，重定向的机制决定了一个跳转会有两次请求-应答，比正常访问多了一次。3、缓存资源使用缓存资源，减少向服务器的请求数，节省加载时间，所有静态资源
2022-07-25 15:01:12
890
原创 前端实习周记1---环境配置、静态页面、作品呈现页
一、环境配置刚去公司实习，先配发了电脑，之后导师让自己先配置一下公司域网、配置VS、node、git环境1、node安装node一定要安装低一些的版本，下载地址:https://nodejs.org/en/。官网会有两个版本，工作要选择LTS版本（长期维护版）但最开始建议安装较低版本的node，我当时安装了16.15.0node，结果公司的项目代码跑起来一堆报错，找了很久问题，问了下导师才发现问题，node版本太高，最后降为了10.4.1。node版本可以使用nvm来对版本进行管理控制.
2022-05-30 11:24:31
5781
原创 CSS笔试题整合---不断更新
第一套（50题）1、那个HTML5元素用于显示已知范围内的标量测量？<meter>标签定义一致范围内或分数值内的标量测量，也被称为guage(尺度）。例如：磁盘用量、查询结果的相关性等.注：<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。2、在 HTML 中，样式表按照应用方式可以分为三种类型，其中不包括（D ）A、内嵌样式表 B、行内样式表 C、外部样式表文 D、类样式表...
2022-05-01 15:40:44
6578
原创 HTTP与HTTPS，HTTPS为什么比HTTP更安全？
一、安全性HTTP在通信中：通信使用明文，不对内容进行加密，容易被窃听 不验证通信方的身份，内容可能被伪装分子窃取HTTPS则解决了上述问题：内容加密，建立一个信息安全通道，来保证数据传输的安全 身份认证，确认网站的真实性 数据完整性，防止内容被第三方冒充或者篡改HTTPS=HTTP+SSL/TLS ，如今SSL已废弃，所以只关注HTTP+TLS，在开始传输数据之前，通过安全可靠的TLS协议进行加密，从而保证后续加密传输数据的安全性。TLS协议：传输层安全性协议，目的是为了保证网络
2022-04-27 15:50:08
1675
原创 JavaScript函数---箭头函数
// 箭头函数let fun = (name) => { // 函数体 console.log(name)};// 等同于let fun = function (name) { // 函数体 console.log(name)};箭头函数语法比普通函数要简单很多一、关于箭头函数的参数：如果箭头函数没有参数，直接写一个空括号即可 若参数只有一个，也可以省去包裹参数的括号 若有多个参数，将参数依次用“，”隔开，包裹在括号中即可// 没有参数.
2022-04-27 10:57:08
4326
原创 排序算法---堆排序
一、堆堆排序是利用堆这种数据结构来设计的一种排序算法，是一种选择排序（每轮排序会选出一个最大/最小值），最坏、最好、平均时间复杂度均为O（nlogn），是不稳定的排序。使用堆排序，可以是一个动态的过程，若题目中只需某个排序位的值，则只需排序置该位置，不用全排序好再去拿，只需要针对部分元素进行排序，这样可以降低复杂度。堆排序过程中，是看不到树的结构的，因为使用完全二叉树的性质，用数组表示对应的树结构，又叫顺序存储。顺序存储二叉树的特点：第n个元素父节点为（n-1)/2 第n个元素左子节点
2022-04-26 22:51:08
3023
原创 HTTP与HTTPS，它们的区别？
一、HTTPHTTP超文本运输协议，是实现网络通信的一种规范，是一个客户端和服务端请求和应答的标准（TCP），使浏览器更加高效，网络传输减少。HTTP协议是以明文方式发送信息，如果黑客截取了传输报文，便可直接获取其中的信息。特点如下：支持客户/服务器模式 简单快捷：客户想服务器发送请求时，只需传送请求方法和路径。HTTP协议简单，使得HTTP服务器的程序规模小，通信速度快 灵活：HTTP运行传输任意类型的数据对象。正在传输的类型由Content-Type来标记 无连接：限制每次连接只处理一
2022-04-26 21:16:44
276
原创 网络传输协议之：Http1、Http2、Http3
一、什么是HTTP？HTTP（HyperText Transfer Protocol），是超文本传输协议，是目前互联网上要用最广泛的一种网络协议，所有的 WWW文件都必须遵守该标准。HTTP又使用了可靠的数据传输协议TCP协议，不会产生数据丢失和损坏。（HTTP协议属于应用层协议）HTTP的工作流程浏览器与服务器建立TCP连接，即三次握手 TCP连接成功，浏览器发出HTTP请求命令 服务端接收请求并返回HTTP响应 服务器关闭连接，即四次挥手 浏览器解析请求的资源connection：
2022-04-25 22:51:23
10282
原创 JavaScript中实现继承的方法（深入学习原型链、盗用构造函数、组合继承、原型式继承、寄生式继承、寄生式组合继承）
一、原型链原型链的基本思想就是通过原型继承多个引用类型的属性和方法。构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个内部指针指向原型。若原型是另一个类型的实例，就意味着这个原型本身有一个内部指针指向另一个原型，相应的另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。function SuperType(){ this.property = true}SuperType.prototype.getSup
2022-04-23 09:27:37
1391
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人