28
DEC
组件化-组件的兼容性
文章讨论了组件化开发中兼容性设计的重要性，指出传统HTML思维与组件化思维的区别，并提出通过暴露必要接口和依赖父级元素限制大小来提高组件兼容性的方法。文章强调样式编写需细致，如设置`box--sizing: border-box;`以避免尺寸计算问题，总结UI开发需注重声明式写法的稳定性和灵活性。--DeepSeek
Dvorak Chen
All Posts in 2023
24
DEC
组件化-使用 Cypress 测试组件
Cypress是一款强大的端到端和组件测试框架，支持React、Vue等前端框架的组件级测试。通过安装cypress及其Bundler插件（如vue-cypress-components或react-cypress），开发者可轻松编写组件测试用例，并在可视化界面中实时查看执行结果。测试时需处理常见问题如类型错误和打包影响，并掌握查询API（如cy.get()）与断言库Chai的使用，以确保测试稳定性和可靠性。最佳实践包括避免存储查询结果、不依赖易变属性，而推荐通过data-cy属性定位元素。--DeepSeek
23
DEC
在前端开发中使用 Mock
这篇文章介绍了在前端开发中使用Mock技术的方法，重点讲解了如何通过`msw`库实现对HTTP请求的拦截和模拟。文章首先阐述了Mock技术的重要性及其应用场景，随后详细讲解了如何通过npm安装`msw`库，并配置相关依赖。接着，作者分步骤说明了如何在项目中创建`handlers`文件来定义需要拦截的请求及其响应逻辑，以及如何设置浏览器端的`Service Worker`来实现对实际HTTP请求的拦截。此外，文章还展示了如何在React项目中集成Mock服务，并通过一个简单的按钮点击示例验证了Mock功能的有效性。 作者强调了Mock技术在开发和测试阶段的重要性，尤其是在接口未完成的情况下，可以通过Mock模拟真实数据来确保前端功能的正常开发与测试。最后，文章提醒读者注意在非开发环境下禁用Mock服务，以避免影响实际应用的功能。 这篇文章适合对前端开发有一定经验的开发者阅读，特别是那些希望在项目中集成Mock技术以提升开发效率的人。通过本文，读者可以快速掌握如何使用`msw`库来实现请求拦截和数据模拟，从而为项目的顺利进行提供有力支持。--DeepSeek
18
DEC
CSS 编写赛博效果的 LOGO
在创建动态渐变文字效果时，首先使用Base64编码的SVG作为基础形状，并叠加两个错位的副本以产生层次感。通过调整透明度和设置`mix-blend-mode: lighten`，可以实现颜色的混合叠加。进一步利用CSS动画，定义不同关键帧的颜色变化，从而生成流动的动态效果。最终，结合这些技术，可以实现一种视觉吸引力强且色彩丰富的文字渐变动画效果。--DeepSeek
08
SEP
React 单元测试
文章讲述了使用React Testing Library和Vitest进行组件测试的过程，重点介绍了如何处理多次测试用例导致的虚拟DOM环境残留问题。首先，在两个测试用例中分别点击灰色按钮和黄色按钮并检查预期结果，但在运行时发现错误：`getByTestId("yellow")`方法获取到多个元素实例，这违反了唯一性原则。经过分析，问题出在每次测试后未清理渲染的组件，导致虚拟DOM中累积了多个实例。通过引入Vitest提供的`afterEach()`钩子，在每个测试用例结束后执行`cleanup()`方法，成功解决了残留问题，确保每次测试都在干净的环境中运行。最终提供了完整的测试代码示例，并列出了相关参考文档。--DeepSeek
08
SEP
如何开发npm包并使用rollup打包
本文介绍了如何发布npm包并使用Rollup进行打包优化。首先，通过初始化项目、编写代码、配置package.json文件等基本操作完成基础准备工作。接着，通过清理无用文件和安装所需依赖为后续打包做好准备。随后，创建.gitignore文件并将源代码推送到GitHub仓库以管理版本。在测试包的正确性后，使用npm publish命令将包发布到npm注册表。文章还详细介绍了Rollup的作用和配置方法，包括插件的选择与顺序、输出格式设置等，最终通过Rollup将源代码打包成混淆优化后的格式，提升性能并减少文件体积，成功实现React组件库的构建与发布流程。--DeepSeek
31
JUL
石头雨 - 其一
这篇文章描绘了一个人物A在一天中的状态，从早晨的挣扎起床到下午的取消外出计划，再到夜晚的难以入睡。A在这一天中经历了身体的无力感和精神上的疲惫，尽管他试图通过看视频、玩游戏等方式打发时间，却始终无法摆脱内心的空虚与焦虑。文章通过对A的行为细节和心理活动的细腻刻画，展现了现代人面对生活时可能经历的懒散、拖延以及对自我意志的反复斗争。结尾处的无力感和倦意更是让人深思：当一个人的身体和心灵都陷入疲惫，我们该如何重新找回生活的动力？--DeepSeek
22
JUL
任何障碍都能够摧毁我
生命的意义究竟何在？当生存不再是唯一的本能追求，人类开始追问：为何而活？从为生存而退化无关技能的生物，到建立起丰富物质社会的智慧生命，人类仿佛从水里爬上岸的鱼，在科技与物质的浪潮中迈出了新的一步。当生存欲望减弱，我们是否正在经历一场精神上的进化？科技的进步是否让人类在追求物质的过程中，逐渐丧失了对自身存在价值的思考？作者指出，虽然科技丰富了物质生活，却无法填补生物本能与精神需求之间的鸿沟。这种矛盾使得现代人陷入一种悖论：越是依赖科技生存，越可能失去对生命意义的感知。而这种困惑是否恰恰证明了人类的伟大？在这个紧密相连的世界里，我们是否正在经历一场前所未有的存在主义危机？当科技成为延续生命的唯一寄托时，人类是否也正在放弃思考生命本身的真正价值？或许，答案就藏在每个人内心深处：当我们不再为生存奔波，我们是否还有勇气去追寻那个更为本质的问题——为何而活？--DeepSeek
12
JUL
上班是在浪费生命
这篇文章探讨了现代社会中“上班是在浪费生命”这一观点背后的深层逻辑。作者指出，在雇佣关系中，人们虽然通过劳动创造价值，但这些价值却并不真正属于劳动者本身，而是被剥夺并归属于公司或雇主。这种剥夺不仅仅是对劳动成果的占有，更是对人创造价值能力本身的否定，使得人在本质上不再被视为一个“有价值”的存在。文章进一步分析了这一矛盾的本质：一方面，公司作为价值的最终拥有者，通过支付工资试图补偿劳动者出卖价值能力的行为；另一方面，这种补偿本质上是不平等且无法真正恢复人的价值创造力的。这种对立构成了雇佣关系中不可调和的根本矛盾。 文章引发我们思考：在现代社会中，人与自身创造的价值之间究竟存在着怎样的割裂？当人们将生命投入到工作中时，是否真的只是在“浪费生命”？这一现象背后反映了什么样的社会结构与价值观？这篇文章不仅揭示了现代职场中的深层矛盾，更促使我们反思：在这个价值被不断剥夺的世界里，如何才能真正实现自我价值？当我们谈论劳动的意义时，是否也应该重新思考人与价值之间的关系？ 这些问题的答案或许就藏在你的日常生活中。当你每天投入工作时，你是在创造价值，还是在出卖自己的价值能力？这种割裂是否真的无法调和？也许答案就在我们每个人的体验中，值得每个人去深入思考并寻找属于自己的解答。--DeepSeek
22
JUN
在 Rust 中使用 Actor 模型
这篇博文探讨了在 Rust 中使用 Actor 模型来解决多线程共享变量的线程安全问题。文章首先介绍了在 Rust 中通过 `Mutex` 和 `HashMap` 来管理多个客户端连接的方式，但指出这种做法会导致阻塞问题，因为 `Mutex` 锁住 `HashMap` 期间其他线程无法访问资源。作者尝试优化代码以绕过生命周期检查，但这种方法不安全且不符合 Rust 的最佳实践。 随后，文章引入了 Actor 模型作为解决方案。每个客户端被建模为一个独立的 Actor，持有自己的 `TcpStream` 和消息队列（Inbox），通过消息传递来触发行为，从而避免了全局变量和原始指针的使用。这种设计不仅提高了代码的安全性和可维护性，还提供了一个干净且高效的多线程解决方案。 文章最后总结了 Actor 模型的优势，并鼓励读者探索其在类似场景中的应用。作者提供了示例代码仓库链接，方便读者进一步学习和实践。--DeepSeek
29
MAY
为什么我在css里使用功能类优先
这篇文章讨论了在前端开发中选择使用语义类还是功能类的问题，并提出了“功能类优先”的方法。作者指出，由于HTML结构的不同会影响CSS的表现，使得很多情况下无法有效重用语义类，因此更推荐使用功能类写法。功能类将原本在CSS文件中的样式直接写入到HTML的class属性中，减少了对CSS文件的依赖，并使代码更加直观和易于调试。作者还提到，对于能够充分发挥其重用效果、与HTML结构无关的地方（如全局设置和按钮），语义类仍然适用。文章最后推荐了Tailwind CSS作为实现功能类优先写法的有效工具，并解答了一些常见的疑问，例如功能类是否会增加阅读难度、是否必须使用第三方库等。--DeepSeek
26
MAY
KMP 算法
文章介绍了KMP（Knuth-Morris-Pratt）算法在字符串匹配中的应用。首先通过构建`next`数组来记录模式字符串的最长前缀后缀匹配长度，避免重复比较字符以提高效率；然后利用该数组在目标字符串中查找子串。`getNext`函数采用双指针技术构建`next`数组，时间复杂度为O(n)，其中n为模式字符串的长度。主函数`strStr`通过遍历目标字符串并结合`next`数组调整匹配位置，最终实现高效查找，避免暴力搜索的时间浪费。--DeepSeek
25
MAY
浅谈 Javascript 事件循环
这篇文章通过优化一个原本会导致页面卡顿的JavaScript函数foo()，详细讲解了如何利用事件循环和宏任务队列来实现页面渲染的优化。作者首先解释了原始版本的foo()函数是如何导致长时间卡顿的原因，然后展示了如何将一次性渲染大量元素的操作改为分批处理，并通过setTimeout将每一批的任务安排到宏任务队列中执行。这种方法使得每次渲染的数量减少，从而让浏览器有时间执行其他重要的操作如渲染和用户交互，最终实现了页面的流畅显示。 文章进一步分析了事件循环的工作原理，包括宏任务队列、微任务队列以及渲染阶段的执行顺序，并通过具体的代码示例展示了如何将一个可能引发卡顿的操作拆分成多个可管理的任务。作者还讨论了劣质优化方法的潜在问题，比如一次性向宏任务队列中塞入过多任务可能导致其他关键操作被延迟执行，从而影响用户体验。 通过这篇文章，读者可以理解到事件循环在JavaScript中的重要性，以及如何合理利用宏任务和微任务来优化代码性能。作者强调，优化的目标不仅是减少代码量，更是要理解并利用浏览器的工作机制，以实现更流畅的用户体验。--DeepSeek
24
MAY
鸣谢
这篇博客通过对Anduin Xue的感谢与祝福，展现了合作与支持在创作过程中的重要意义。作者不仅表达了对合作伙伴的感激之情，还通过提及身体健康这一细节，引发了关于创作背后个人状态与作品质量之间关系的思考。这篇文章提醒我们，在关注最终成果的同时，也要重视背后默默付出和支持的力量，同时也让我们思考：一个人的身体健康如何影响其创造力与贡献？这种支持是否会对整个项目的发展产生深远的影响？这些问题促使读者进一步反思合作在创作过程中的重要性以及个人状态对集体成就的潜在影响。--DeepSeek