28
DEC
组件化-组件的兼容性
文章讨论了组件化开发中兼容性设计的重要性，指出传统HTML思维与组件化思维的区别，并提出通过暴露必要接口和依赖父级元素限制大小来提高组件兼容性的方法。文章强调样式编写需细致，如设置`box--sizing: border-box;`以避免尺寸计算问题，总结UI开发需注重声明式写法的稳定性和灵活性。--DeepSeek
Dvorak Chen
All Posts in 2023.12
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