Dvorak
Dvorak

Dvorak Chen

All Posts in 2023.12


组件化-组件的兼容性

本篇博客主要探讨了组件化开发中的一个重要问题:组件的兼容性。首先,博客讲解了组件化的概念和其在前端框架如React中的实现,以及传统HTML编程中的局限性。然后,博客讨论了在组件化开发中,如何通过暴露接口和受父级元素的限制,提高组件的兼容性,使得组件在各个环境中有稳定和灵活的表现。同时,博客也指出了在编写组件样式时需要注意的问题,如CSS属性的设置和计算方式等。这篇博客的讨论,对于想要在组件化开发中提高代码质量和开发效率的开发者来说,具有很高的参考价值。你是否也遇到过类似的问题?又是如何解决的呢?--GPT 4

Javascript

组件化-使用 Cypress 测试组件

这篇博客详细介绍了如何使用 Cypress 进行组件测试的全过程。首先,作者解释了为什么在开发组件库时,采用 Cypress 这样的可视化测试套件是一个好选择。接着,作者详细演示了如何安装和配置 Cypress,包括如何选择前端框架和打包工具,如何安装所需的包,以及如何在 Cypress 的窗口中进行配置。之后,作者详细介绍了 Cypress 的查询和断言功能,以及如何使用它们进行组件测试。作者还分享了 Cypress 的一些最佳实践,如不要使用变量存放查询到的组件,不要使用查询元素、类名、ID来获取组件等。这篇博客是一篇很好的 Cypress 组件测试教程,无论你是初学者还是有经验的开发者,都能从中学到很多。那么,你准备好尝试使用 Cypress 进行组件测试了吗?--GPT 4

Javascript

在前端开发中使用 Mock

本篇博文主要讲述了在前端开发中如何使用 Mock 技术来模拟 API 的请求和响应。文章首先解释了 Mock 技术的定义,即用于拦截请求,并可以使用 mock 定义的响应数据来返回,常用在开发、测试环境中。接着,作者详细介绍了如何安装和配置 msw,一个用于 mock 的工具。其中包括新建 mocks 文件夹,编写 handlers 文件以定义哪些接口需要 mock,以及如何返回假数据。然后,文章描述了如何拦截浏览器的请求,并在项目启动时启动 mock 服务。最后,作者通过一个实际的例子,演示了如何在应用中发送请求并获取 mock 的数据。这篇文章对于想要在前端开发中使用 mock 技术的读者来说,是一篇很好的指导文章。你是否了解过 Mock 技术?你是否知道如何在前端开发中使用它来模拟 API 请求和响应?你知道如何配置 msw 来定义哪些接口需要 mock 吗?阅读全文,你将找到答案。--GPT 4

Javascript

CSS 编写赛博效果的 LOGO

这篇博客主要讲述了如何使用CSS和SVG来创建一个赛博风格的Logo。作者首先通过一段SVG代码创建了一个基本的Logo形状,然后通过CSS的绝对定位和透明度调整,将三张Logo图像叠加在一起,从而达到边缘效果。然后,作者通过调整SVG的fill属性以改变颜色,并使用CSS的`mix-blend-mode`属性来指定图像的混合模式,使得颜色更加丰富。最后,作者通过CSS动画实现了颜色的循环变化,使得Logo动态起来。你能否想象出这个Logo的最终效果?或者,你可以尝试使用这种方法来创建自己的Logo吗?--GPT 4

css