Front - Dvorak Chen

01

SEP

Create your own simple reactivity front-end framework

创造你自己的简单响应式前端框架本文介绍了如何创建一个简单的响应式前端框架。作者对Angular、Vue和React这三个主流前端框架进行了评价，并提到了自己对它们的喜好和不喜欢之处。作者决定尝试创建自己的响应式前端框架，类似于Solid并使用Signal。首先，作者决定使用函数组件而不是类组件。作者展示了一个函数组件的例子，并介绍了如何通过编译器将jsx转换为普通的JavaScript代码。作者提到了SWC作为一个可用于转换JavaScript/TypeScript和支持jsx/tsx的工具，并提供了SWC playground用于查看jsx/tsx转换为JavaScript的过程。接下来，作者讨论了响应式的实现。作者提到了Angular通过绑定变量、React通过虚拟DOM以及Solid使用Signal来实现响应式。作者决定使用Signal，并展示了如何使用createSignal创建一个信号，并在HTML中使用该信号的值。作者还展示了如何实现一个自定义的useSignal函数。然后，作者讨论了如何在Dvorak.createElement函数中实现订阅值的逻辑。作者展示了如何在createElement函数中绑定属性值，并订阅相应的发布者。作者还展示了如何处理元素的子节点，并通过一个reactiveChildren函数实现了子节点的响应式。总结起来，本文介绍了如何创建一个简单的基于Signal的响应式库。阅读全文可以了解更多细节和实现方法。摘要：本文介绍了如何创建一个简单的响应式前端框架。作者讨论了Angular、Vue和React这三个前端框架，并决定尝试创建自己的框架。作者展示了如何使用SWC转换jsx/tsx为JavaScript，并介绍了Signal作为响应式的实现方式。作者还展示了如何实现一个简单的useSignal函数和reactiveChildren函数。阅读全文可以了解更多细节和实现方法。--GPT 4

Javascript

28

DEC

组件化-组件的兼容性

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

Javascript

24

DEC

组件化-使用 Cypress 测试组件

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

Javascript

23

DEC

在前端开发中使用 Mock

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

Javascript

18

DEC

CSS 编写赛博效果的 LOGO

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

css

08

SEP

React 单元测试

这篇博客主要介绍了如何对React组件进行单元测试。首先，使用`@testing-library/react`的`render`和`fireEvent`方法模拟组件的加载和点击事件。然后，通过`getByTestId`和`queryByRole`方法获取元素，进行断言判断。此外，博客还介绍了如何使用`vitest`和`msw`库进行mock测试，以及如何解决多次测试时的组件重复加载问题。博客的最后部分提供了完整的测试代码示例和参考资料链接。这篇博客不仅教你如何进行React组件的单元测试，还引导你思考如何优化测试流程，提高测试效率。你是否有过在进行React组件测试时遇到困难的经历？对于博客中介绍的方法，你又有哪些自己的见解和改进意见呢？--GPT 4

Javascript

08

SEP

如何开发npm包并使用rollup打包

这篇博客主要讲述了如何开发npm包并使用rollup打包。首先，假设你已经熟悉了npm、ts以及有一些React开发经验。文章中详细介绍了打包工具rollup的使用，包括它的优势、官网链接、如何使用配置文件方式运行rollup等。接着，通过一个实例展示了如何使用rollup打包一个React组件，包括相关配置、代码示例等。文章还详细讲述了如何发布npm包，包括发布条件、如何发布、发布后的问题、如何解决这些问题等。最后，文章介绍了如何使用rollup打包工具，包括安装、配置、插件使用等。文章最后提出了一个问题：rollup还有哪些其他的用法和插件？你可以在rollup官网上找到答案。--GPT 4

Javascript

29

MAY

为什么我在css里使用功能类优先

此篇博客主要探讨了在编写CSS时，为什么作者会选择功能类优先而非语义类优先的写法。首先，作者指出语义类和功能类是CSS的两种写法，其中语义类将CSS语法写在选择器中，再将选择器名写在HTML的class属性中，而功能类则是直接在HTML的class属性中写上代表CSS语法的名字。虽然语义类看似简单易懂且可重用，但实际上由于前端页面的复杂性，往往无法做到真正的重用。因此，作者选择了功能类优先的写法，这种写法不仅减少了CSS文件的数量，使得HTML的样式实现更直观，而且完全消除了style的写法，使代码变得更加统一美观。然而，这并不意味着语义类就无用处了，对于那些真正能够达到重用效果的CSS，如全局的设置和button类的设置，使用语义类写法还是非常推荐的。总的来说，功能类和语义类的选择应视具体情况而定，而不是一概而论。你是如何看待这两种写法的呢？--GPT 4

css

25

MAY

浅谈 Javascript 事件循环

本篇博客主要探讨了Javascript中的事件循环机制，包括宏任务队列和微任务队列的工作方式，以及如何通过理解这些机制优化代码，提高页面渲染效率。我们首先了解了宏任务队列和微任务队列的基本概念，以及它们在事件循环中的作用。然后，我们通过一个实际的例子，解释了如何通过利用setTimeout函数，将一个耗时的任务分解成多个宏任务，从而充分利用浏览器的渲染机制，提高页面渲染效率。最后，我们还讨论了一种劣质的优化方法，通过对比，我们可以更深入理解事件循环的工作机制。那么，在你的实际编程中，你又会如何利用这些知识来优化你的代码呢？--GPT 4

Javascript

Dvorak Chen

Front Something about Front End