- 博客(32)
- 收藏
- 关注
RSS订阅原创 Redux 扩展与标准化模板方案
通过以上扩展方案，可以构建出结构清晰、易于维护且功能强大的Redux架构，适用于各种规模的前端应用开发。根据项目需求，可以选择性地采用这些方案进行组合使用。
2025-07-06 00:00:00
252
原创 LESS/SCSS 高效主题换肤方案
/ 定义主题映射@themes: {light: {dark: {// 应用主题混入.button {// 定义主题映射$themes: (light: (),dark: (// 应用主题混入.button {
2025-07-05 15:10:43
274
原创 Fiber 架构实现原理
Hooks 依赖于调用顺序：React 使用链表结构按顺序存储 Hook 状态，因此不能在条件或循环中使用 Hooks。双缓存技术：React 使用 current 和 workInProgress 两棵树来实现异步可中断的渲染。闭包陷阱：函数组件每次渲染都会创建新的闭包，这解释了为什么有时候会拿到旧的 state 或 props。批量更新：React 会合并多个状态更新，避免不必要的重复渲染。副作用调度：useEffect 的副作用会在浏览器完成布局与绘制之后延迟执行。
2025-07-05 15:03:15
339
原创 React Hooks 内部实现原理与函数组件更新机制
Hooks 依赖于调用顺序：React 使用链表结构按顺序存储 Hook 状态，因此不能在条件或循环中使用 Hooks。双缓存技术：React 使用 current 和 workInProgress 两棵树来实现异步可中断的渲染。闭包陷阱：函数组件每次渲染都会创建新的闭包，这解释了为什么有时候会拿到旧的 state 或 props。批量更新：React 会合并多个状态更新，避免不必要的重复渲染。副作用调度：useEffect 的副作用会在浏览器完成布局与绘制之后延迟执行。
2025-07-05 14:10:59
313
原创 TCP、HTTP/1.1 和HTTP/2 协议
理解这些协议的差异有助于优化网络应用设计（如减少DNS查询、启用压缩、利用CDN等）。实际开发中，HTTP/2已成为主流，但在某些旧系统或特殊场景（如长连接）中仍需权衡选择。TCP、HTTP/1.1 和 HTTP/2 是互联网通信中的核心协议，它们在网络分层中处于不同层级，各有特点且逐步演进。
2025-07-04 14:28:18
579
原创 WebAssembly 详解
WebAssembly（简称Wasm）是一种为Web设计的新型二进制指令格式，它提供了接近原生的性能，使开发者能够在Web浏览器中运行高性能代码。
2025-07-04 11:50:16
531
原创 XAMPP本地 MySQL开发工具的使用
XAMPP 是一个流行的跨平台 Web 服务器解决方案包，包含 Apache、MySQL/MariaDB、PHP 和 Perl。下面是 XAMPP 的全面使用指南。
2025-07-04 11:47:59
522
原创 FFmpeg、WebAssembly 和 WebGL 在 Web 端的结合应用
这三个技术组合可以创建强大的浏览器端多媒体处理解决方案，下面我将详细介绍它们如何协同工作。
2025-07-04 11:29:01
319
原创 memo和useMemo区别
/ 返回 true 表示 props 相等，跳过重新渲染// 返回 false 表示 props 不相等，需要重新渲染});useMemo是一个 React Hook，用于记忆计算结果。
2025-07-03 14:41:13
311
原创 Git中推送代码（push）之后自动触发自动化打包部署
例如，在GitLab中，你可以设置一个Webhook，当有新的代码被推送到仓库时，GitLab会向指定的URL发送一个POST请求。在GitLab中设置Webhook到你的服务器地址（例如 http://yourserver.com/deploy）。如果你有自己的服务器，你可以编写一个简单的HTTP服务器脚本来监听来自Git Webhook的请求，并执行部署脚本。添加一个新的Webhook，输入你的部署脚本的URL（例如，一个Jenkins服务器或自建的Web服务器）。示例：使用GitLab CI/CD。
2025-07-03 10:52:12
335
原创 Git Hooks 配置指南
Git hooks 是在 Git 执行特定操作时自动运行的脚本，可以用于自动化开发流程、代码质量检查等。以下是常见的 Git hooks 配置方法和示例代码。
2025-07-03 10:43:44
254
原创 自定义 Babel 插件
Babel 是一个强大的 JavaScript 编译器，允许你通过插件系统来转换 JavaScript 代码。创建自定义 Babel 插件可以让你实现特定的代码转换需求。Babel 插件工作原理：2. 插件基本结构3. 常用 AST 节点类型: 标识符（变量名、函数名等）: 函数声明: 变量声明: 函数调用: 成员表达式（如 ）: 二元运算表达式4. 示例插件：将 替换为 5. 测试插件创建测试文件 :使用插件：高级技巧1. 处理特定函数调用2. 添加 import
2025-07-03 09:50:22
296
原创 JavaScript 原型扩展
在 JavaScript 中，原型扩展是一种强大的功能，允许你向现有对象类型添加新的方法或属性。这种技术常用于扩展内置对象（如 Array、String 等）的功能。
2025-07-03 09:00:00
268
原创 Node.js入门指南
Express是Node.js最流行的Web框架，简化了服务器创建过程。');});${');});});`);});Node.js彻底改变了JavaScript只能运行在浏览器的局面，使得全栈JavaScript开发成为可能。其非阻塞I/O模型和事件驱动架构使其特别适合I/O密集型应用。随着不断的版本更新和生态系统的壮大，Node.js已成为现代Web开发不可或缺的一部分。希望这篇入门指南能帮助你开始Node.js之旅！如果你有任何问题，欢迎在评论区留言讨论。
2025-07-02 16:23:31
944
原创 前端微服务架构详解
独立开发：每个微应用可由不同团队独立开发独立部署：无需整体发布，单个微应用可单独部署技术异构：不同微应用可以使用不同技术栈（React、Vue、Angular等）运行时集成：在客户端动态组合成完整应用。
2025-06-30 09:30:00
990
原创 Fiber是什么?
将树形结构的更新分解为基于 Fiber 节点的线性任务列表（链表）。调度器根据任务的优先级（用户交互 > 动画 > 数据更新等）安排执行顺序。在浏览器需要处理高优先级任务（如用户输入）时，React 可以暂停当前的渲染工作，保存进度（Fiber 树的状态），处理完高优先级任务后再从中断点恢复。React 在内存中维护两棵 Fiber 树：current树：代表当前已渲染到屏幕上的 UI。树：代表正在后台构建的新的 UI 状态。在更新过程中，React 在。
2025-06-29 10:30:00
771
原创 ES Modules (ESM) 与 CommonJS (CJS) 的区别
文件扩展名| .js 或 .cjs |.js (需声明 “type”: “module”) 或 .mjs。动态导入 |require() 是同步的 |import() 是异步的。加载时机 |同步加载 (运行时) |异步加载 (编译时静态分析)动态加载：require() 可以在代码的任何位置调用。特性 |CommonJS |ES Modules。应用开发：根据 Node.js 版本选择。浏览器开发：使用 ESM 配合打包工具。顶层await |不支持 |支持。默认使用 CommonJS。
2025-06-26 11:05:13
426
原创 Chrome DevTools 详细使用指南
在 Performance 面板中的"Performance monitor"标签。在 Sources 面板右侧 XHR/fetch Breakpoints。点击左上角箭头图标(或按 Ctrl+Shift+C)选择页面元素。右键菜单：在页面上右键点击，选择"检查(Inspect)"右键 DOM 节点可以：删除节点、编辑 HTML、复制等。点击左上角手机/平板图标(或 Ctrl+Shift+M)选择"Break on"设置子树修改、属性修改等断点。在 Sources 面板的 Overrides 标签。
2025-06-26 09:56:05
421
原创 浏览器缓存策略
浏览器缓存策略是Web性能优化的核心机制之一，通过合理利用缓存可以减少网络请求、降低服务器负载并加速页面加载。浏览器直接使用本地缓存资源，不发送请求到服务器。no-cacheno-storepublicprivate当强缓存失效时，浏览器向服务器验证资源是否变更。若未变更（304响应），则继续使用缓存。：通过文件修改时间判断。：通过文件内容生成的唯一标识（如哈希值）判断。：更精准，能识别内容变化。：计算ETag消耗服务器资源。
2025-06-25 17:19:31
836
原创 copy-webpack-plugin 版本问题
可以看出以上源码中,使用的Promise.all()并行处理,当我们需要通过参入的数组patterns按顺序覆盖会出现问题,查看新版本源码得知 已修复此问题。
2025-06-24 17:28:04
101
原创 Webpack 自定义 Plugin 开发指南
Webpack 插件(plugin)是 webpack 生态系统的关键部分，允许你介入 webpack 的编译过程，实现自定义功能。下面我将详细介绍如何开发自定义 webpack 插件。
2025-06-23 15:41:43
273
原创 useEffect的依赖数组默认行为解析
在 React 中，useEffect的依赖数组默认行为确实有一些需要特别注意的地方，尤其是与"浅比较"相关的问题。
2025-06-23 14:31:55
307
原创 理解 react useEffect 的清理机制
的清理机制是 React Hooks 中一个非常重要的概念。让我们详细解释你提到的这句话：对于 ，它的执行顺序是：这句话可以这样理解：假设我们有一个 effect：第一次渲染（count=0）：count 变为 1：count 变为 2：清理函数会在两种情况下执行：这种设计有几个好处：当 变化时：当组件卸载时：这种机制确保了副作用的正确管理和资源的安全释放。
2025-06-23 14:12:44
378
原创 图片上传预处理（剪裁压缩）
基于bootstrap的fileinput.js上传图片插件，在上传前进行图片的剪裁压缩，对图片大小及宽高不做限制，方便用户上传图片。写入代码前需要引入jquery.js及fileinput.js //初始化fileinput控件（第一次初始化） function initFileInput(ctrlName, uploadUrl,initImage,picId) { ...
2019-01-03 15:37:56
1362
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人