漂流瓶jz-CSDN博客

原创（个人简介）Coding Home - 漂流瓶jz

华东师范大学计算机专业硕士。Web前端开发工程师。部分文章的相关代码会放在GitHub上。

2017-03-14 10:56:18 1046 1

原创总结CSS组件化演进之路：命名规范/CSS Modules/CSS in JS/原子化CSS

本文梳理了前端开发中CSS组件化的演进历程。早期采用关注点分离原则，将HTML、CSS、JavaScript代码分离，但逻辑关联性导致开发效率低下。随后组件化框架（如Vue、React）将三者整合，形成独立可复用的组件。针对CSS组件化，文章介绍了四种主流方案：CSS命名规范（如BEM）通过层级命名避免冲突；CSS Modules自动生成唯一类名；CSS in JS在JavaScript中编写CSS规则；原子化CSS通过编译时生成样式规则。

2026-05-17 23:39:01 394

原创从TailwindCSS到UnoCSS：原子化CSS框架接入、特性与配置

本文介绍了原子化CSS工具Tailwind CSS的接入和使用方法。Tailwind CSS通过预置大量原子化类名，开发者只需组合这些类名即可实现样式效果，无需编写大量CSS代码。文章详细演示了在Vanilla JS和React项目中接入Tailwind CSS的步骤，并分析了其零运行时构建特性——Tailwind CSS通过静态分析代码中的类名字符串来生成对应的CSS规则，生产环境中无需运行时支持。此外还介绍了VSCode插件提供的智能提示功能，以及如何使用伪类、伪元素等高级特性。Tailwind CSS

2026-05-13 19:02:19 414

原创 UVA-11054 Gergovia的酒交易题解答案代码算法竞赛入门经典第二版

该摘要描述了一个解决算法竞赛中酒桶运输问题的C语言实现。算法基于《算法竞赛入门经典》第二版的方法，通过数组遍历计算需要运输的酒量。核心思路是维护一个sum变量表示未匹配的酒量，每次迭代累加当前元素的绝对值到计数器，并更新sum值。代码包含compute函数计算总运输量，主函数处理输入输出。该方法通过O(n)时间复杂度解决问题，适用于大规模数据输入。

2026-05-03 22:18:02 63

原创 UVA-11134 传说中的车题解答案代码算法竞赛入门经典第二版

该文章讨论了如何为给定区间分配点的问题。作者最初尝试通过排序区间右侧坐标来分配点，但发现这种方法会导致结果不正确（如示例所示）。随后改用遍历整个坐标范围的方法，确保每个区间都能分配到合适的点。文章提供了完整的C++实现代码，包括处理x和y坐标独立性的函数，以及主程序的输入输出逻辑。当无法为所有区间分配点时，程序会输出"IMPOSSIBLE"。最终解决方案通过逐个检查坐标点来确保正确分配，避免了排序方法带来的问题。

2026-05-03 17:06:47 165

原创 UVA-1152 和为0的4个值题解答案代码算法竞赛入门经典第二版

摘要：该代码实现了刘汝佳《算法竞赛入门经典》中四数和为零的问题解法。通过将四个集合分成两组，先计算前两组的n²个和并排序（O(n²logn)），再计算后两组的和，使用二分查找在排序数组中寻找相反数（O(n²logn)）。总时间复杂度为O(n²logn)。代码包含快速排序、二分查找上下界等关键步骤，最终统计满足条件的四元组数量。该方法通过分治策略和预处理优化，有效降低了暴力枚举的O(n⁴)复杂度。

2026-05-02 00:45:52 57

原创 UVA-1605 联合国大楼题解答案代码算法竞赛入门经典第二版

本文介绍了一个解决国家办公室连接问题的算法方案。通过设置两层结构：第一层按行区分国家，第二层按列区分国家，确保每个国家的办公室内部连接且不同国家间也能相互连接。算法实现采用二维数组存储映射关系，并通过字符输出函数将数字转换为字母表示。该方案简洁高效，已通过在线评测系统验证。核心代码展示了如何构建两层结构并进行格式化输出，为类似连接问题提供了参考解法。

2026-04-22 00:09:10 35

原创 UVA-120 煎饼题解答案代码算法竞赛入门经典第二版

摘要：本文介绍了一个基于翻转操作的排序算法实现，通过找到最大元素并两次翻转将其移动到底部，逐步完成整个序列的排序。算法首先定位当前子序列中的最大值，通过翻转操作将其移至顶部，再翻转到底部，重复该过程直至序列有序。文中提供了完整的C语言实现代码，包括数组处理、最大值查找和翻转操作等核心功能。该解法是针对算法竞赛中特定翻转排序问题的有效解决方案。

2026-04-18 23:18:51 99

原创运行时vs编译时：CSS in JS四种主流方案介绍和对比

CSS in JS技术将CSS样式直接写入JavaScript代码中，实现样式与组件的紧密耦合。React原生支持内联样式但功能有限，而styled-components作为主流CSS in JS库，通过标签模板字符串动态生成带样式的组件。它采用运行时注入CSS的方式，根据组件props动态生成样式类名，支持组件继承和样式复用。虽然使用方便，但需要注意动态props可能导致样式类名不断累积的问题。该技术适用于需要高度动态样式的React项目，但需权衡其带来的便利性与潜在性能影响。

2026-04-18 18:57:56 543

原创 UVA-10384 推门游戏题解答案代码算法竞赛入门经典第二版

摘要：该项目提供了刘汝佳《算法竞赛入门经典》第二版中UVA例题的解答代码。其中展示了一个迷宫最短路径问题的解法，采用迭代加深搜索策略处理可推墙的复杂情况。代码实现了墙的移动与状态恢复机制，通过位运算高效处理墙的状态变化。算法在每次移动时检查墙和边界条件，当找到出口时返回结果。该解法有效处理了迷宫中的长路径和推墙机制带来的状态变化问题。

2026-04-05 22:02:43 95

原创 UVA-11694 Gokigen Naname谜题题解答案代码算法竞赛入门经典第二版

摘要：该代码实现了刘汝佳《算法竞赛入门经典》中的一道题目解法，主要解决二维网格中斜线连接的逻辑问题。通过递归遍历每个空白区域，尝试两种斜线连接方式（/和\），并进行两种关键判断：1)检查交叉点连线是否符合数字约束；2)使用DFS检测是否形成环路。代码包含多个辅助函数：getSecNum计算交叉点连接数，judgeSec验证区域约束，loop和judgeLoop检测环路，computed进行递归求解。最终输出满足条件的斜线连接方案。

2026-04-05 01:34:48 50

原创 UVA-11846 找座位题解答案代码算法竞赛入门经典第二版

本文介绍了两种解决算法竞赛中矩形覆盖问题的思路。第一种方案遍历队长生成可能的矩形，通过递归检查所有情况，但因重复遍历导致超时。作者优化了重叠检测方法，改用矩形中心距离比较，但仍未解决超时问题。第二种方案直接遍历整个正方形座位，将每个座位放入符合条件的矩形中递归检查，最终通过测试。文章详细展示了方案2的AC代码实现，包括矩形判断、设置和团队处理等核心函数，并提供了完整的解决方案框架。

2026-04-03 23:29:22 53

原创 CSS Modules完全指南：CSS模块化的特性，生态工具和实践

CSS Modules中文叫做CSS模块。默认情况下，我们定义的CSS类名标识符是全局的。使用CSS Modules之后，每个类名将变为唯一的全局名称，包含不会重复的哈希值。引入CSS文件时，我们可以拿到CSS文件导出的类名到全局名称的对应关系，从而在HTML中提供相应的类名。

2026-03-19 00:49:21 839

原创 UVA-11882 最大的数题解答案代码算法竞赛入门经典第二版

摘要：该代码实现了在给定矩阵中寻找最长数字路径的算法。通过DFS遍历每个非零元素，记录比当前路径数字大的路径，并采用剪枝优化：当最大路径长度等于数字总数且首元素较大时跳过DFS。算法使用二维数组存储矩阵，通过四方向移动搜索路径，比较并更新最大路径。最终输出找到的最长数字序列。

2026-03-14 01:48:31 59

原创 UVA-307 小木棍题解答案代码算法竞赛入门经典第二版

摘要：本文讨论解决算法竞赛中木棍拼接问题的优化方法。作者通过分析他人AC代码发现，基于等长原始木棍的DFS方法更高效。在保留自身DFS方案的基础上，作者通过剪枝优化（如从大到小排序、跳过重复尝试等）最终AC，耗时1710ms。文中指出"优先长木棍"策略并非绝对，有时需要尝试不同组合。给出的C++代码实现了排序、DFS剪枝和结果计算功能，最终输出可能的最小原始木棍长度。

2026-03-11 01:27:44 57

原创 UVA-817 数字表达式题解答案代码算法竞赛入门经典第二版

本文介绍了一个解决算法竞赛中特定数字表达式问题的DFS方法。题目要求在数字间插入运算符（+、-、*或无符号）使表达式结果为2000，且不能有前导零。作者采用DFS遍历所有可能的运算符组合，通过两阶段计算（先处理乘法，再处理加减法）来验证结果。文中详细说明了输入处理、零值判断、运算符检测和结果计算的关键步骤，并提供了完整的C++实现代码。该方法有效解决了数字排列与运算符组合问题，同时确保了结果的正确性和无重复性。

2026-03-07 00:21:08 73

原创 BEM、OOCSS、SMACSS、ITCSS、AMCSS、SUITCSS：CSS命名规范简介

在前端开发中，不同组件/模块的class类名都是公用的，假设两个组件中起了同样的类名，那么就会出现样式污染。既然问题出在名字，那么让不同组件的类名不同就能解决问题了。因此，社区中出现了一些CSS命名规范，希望使用规范将CSS的冲突污染减少，同时通过命名起到和HTML标签关系更紧密，封装公共CSS样式，以及一些其它作用。

2026-02-26 23:39:46 394

原创 UVA-1533 移动小球题解答案代码算法竞赛入门经典第二版

本文介绍了解决算法竞赛中三角形棋盘跳棋问题的BFS方法。通过将三角形棋盘转换为二维数组表示，使用15位二进制数表示状态，采用广度优先搜索寻找最短路径解。特别处理了字典序最小解的要求，通过状态比较确保输出最优解。算法实现包括状态转换、路径记录和比较逻辑，最终输出符合要求的移动序列或判定无解。该方案有效解决了原题中棋盘状态表示和最优路径搜索的难题。

2026-02-23 01:13:07 95

原创 UVA-12569 树上的机器人规划（简单版）题解答案代码算法竞赛入门经典第二版

本文探讨了算法竞赛中一个关于机器人在有限节点间移动的问题。针对15个节点的场景，作者最初尝试DFS遍历所有状态但出现超时问题，后改用BFS方法解决。BFS通过按步数顺序遍历，确保首次到达目标即为最优解。文中详细描述了状态表示方法（15位二进制记录石头分布）和BFS实现细节，包括状态转移、路径记录等。最终AC代码展示了完整的BFS解决方案，能正确输出最短路径或判断不可达情况。该方案通过合理的状态表示和BFS的广度优先特性，有效解决了DFS的超时问题并保证了最优解。

2026-02-21 02:08:49 156

原创 UVA-11214 守卫棋盘题解答案代码算法竞赛入门经典第二版

本文介绍了使用迭代加深搜索算法解决棋盘皇后覆盖问题的实现方法。算法通过剪枝策略优化搜索过程：1)避免在同一行/列放置棋子；2)使用range数组记录多个棋子共同守卫的区域。代码实现了皇后棋的米字形移动规则，通过逐步增加皇后数量进行深度优先搜索，确保所有标记位置被占据或守卫。关键点包括：国际象棋皇后移动规则的理解、搜索剪枝策略的应用以及状态恢复机制。该解法在UVA算法竞赛题目中成功通过测试，展示了如何将理论规则转化为有效算法实现。

2026-02-19 23:31:17 82

原创 UVA-1604 立体八数码问题题解答案代码算法竞赛入门经典第二版

本文描述了一个解决立方体颜色匹配问题的算法优化过程。初始采用迭代加深搜索方法因超时被放弃，转而使用DFS+剪枝策略成功AC。代码实现了状态表示、方向变换处理和剪枝优化，通过深度优先搜索在30步限制内寻找最优解。核心优化点在于：1) 利用方向变换规律减少计算量；2) 通过启发式剪枝提前终止无效路径；3) 状态回滚机制确保搜索正确性。该解法虽接近时间限制，但有效解决了立方体顶面颜色匹配问题，展示了搜索算法优化在实际问题中的应用。

2026-02-18 23:41:33 102

原创 UVA-12107 数字谜题解答案代码算法竞赛入门经典第二版

本文描述了一个解决数字谜题的算法实现。算法分为两个主要步骤：首先判断谜题是否有唯一解，通过遍历等式前的*号（0-9）并计算结果验证；其次通过逐步修改数字位置（从0处开始递增）来寻找符合条件的解，处理时需考虑字典序和前导0问题。程序使用递归方法尝试不同修改组合，优先选择使整体字典序更小的修改方案。代码实现了输入解析、解验证、修改尝试和结果输出等功能，最终输出满足唯一解条件且字典序最小的修改方案。

2026-02-17 04:19:24 86

原创 Polyfill方式解决前端兼容性问题：core-js包结构与各种配置策略

core-js是一个知名的前端工具库，里面包含了ECMAScript标准中提供的新对象/新方法等，而且是使用旧版本支持的语法来实现这些新的API。这样即使浏览器没有实现标准中的新API，也能通过注入core-js代码来提供对应的功能。

2026-01-21 00:07:18 1345

原创 PostCSS完全指南：功能/配置/插件/SourceMap/AST/插件开发/自定义语法

PostCSS是一个转义CSS代码的工具，它的输入为CSS文件，输出也是CSS文件。它首先把CSS转换为抽象语法树AST，再使用插件对语法树进行修改，最后生成新的CSS代码。它的作用非常像JavaScript中的Babel。

2025-12-27 23:09:53 1236

原创 SourceMap数据生成核心原理：简化字段与Base64VLQ编码

本文深入解析SourceMap的核心mappings字段生成原理，通过一个代码压缩示例展示如何将源代码与生成代码的变量位置关系转换为紧凑的mappings字符串。首先创建源代码与生成代码的对应关系表格，然后逐步精简字段：将文件名存入数组、标识符存入names数组、去除重复数据。最后将数字表格转换为用逗号分隔的分段字符串，并以分号区分不同行，形成最终的mappings编码。这一过程实现了代码位置信息的高效存储，为调试提供了精准的源码映射。

2025-11-17 23:23:31 1006

原创 Webpack中各种devtool配置的含义与SourceMap生成逻辑

这篇文章总结了Webpack中生成SourceMap数据的配置与具体效果，尤其详细描述了各种devtool配置项的逻辑。devtool虽然有几十个配置选项，但都是由几个前缀组合而成的，拥有对应前缀的特性。

2025-11-05 23:16:18 791

原创快速定位源码问题：SourceMap的生成/使用/文件格式与历史

SourceMap，中文名叫“源映射”。在前端开发中，打包后的文件中除了我们写的代码与npm包的代码之外，经常还会出现一个后缀名为.map的文件。这就是SourceMap文件，也是我们今天要讲的主题。

2025-10-19 19:29:20 972

原创解锁Babel核心功能：从转义语法到插件开发

Babel是一个JavaScript编译器，主要作用是将新版本的ECMAScript代码转换为兼容的旧版本JavaScript代码，以便新代码可以正常运行在旧浏览器环境中。当然Babel可以做的事情不止于此，这里我们列举一下Babel的部分功能：

2025-09-06 00:29:21 891

原创 JavaScript语法树简介：AST/CST/词法/语法分析/ESTree/生成工具

ESLint会检查代码中的语法错误；Prettier会修改代码的格式；打包工具会将不同文件中的代码打包在一起等等。这些工具都对JavaScript代码本身进行了解析和修改。这些工具是如何实现对代码本身的解析呢？这就要用到一种叫做AST抽象语法树的技术。

2025-08-01 23:38:06 1546

原创清除浮动/避开margin折叠：前端CSS中BFC的特点与限制

BFC 的全称为 Block Formatting Context，含义是块级格式化上下文。第一次了解 BFC 的同学对这个解释肯定一头雾水

2025-07-03 23:26:32 1084

原创让数据“流动“起来！Node.js实现流式渲染/流式传输与背后的HTTP原理

流式是一种传输技术，与非流式的最大区别是，数据或页面不是一次发送给前端，而是使用“流”的方式，分块传输到前端。

2025-06-11 22:50:23 1120

原创聊一下CSS中的标准流，浮动流，文本流，文档流

在网络上关于CSS的文章中，有时候能听到“标准流”，“浮动流”，“定位流”等等词语，还有像“文档流”，“文本流”等词，这些流是什么意思？它们是CSS中的一些布局方案和特性。今天我们就来聊一下CSS中的这些流。

2025-05-22 00:40:02 1020

原创 UVA-12558 埃及分数题解答案代码算法竞赛入门经典第二版

在解决算法竞赛中的一道题目时，作者遇到了一个长期未解决的WA（Wrong Answer）问题。尽管通过了样例和udebug上的大多数测试，但一个未被覆盖的场景导致了错误。问题的关键在于，当计算出的1/x结果因重复或不符合条件而不能作为答案时，应该继续将1/x拆解，而不是终止搜索。作者采用了迭代加深搜索的方法，每次增加一个分数的数量，直到找到答案，并实施了剪枝策略以提高效率。此外，作者还提供了详细的代码实现，包括最大公约数的计算、分数减法、集合比较和数字判断等功能。最终，通过这种方式，作者成功地解决了问题并获

2025-05-10 06:26:36 388

空空如也

空空如也