Javascript - Dvorak Chen

09

OCT

更好的 Javascript 运行时 Deno

# 更好的 Javascript 运行时 Deno 本博客介绍了一种更好的 JavaScript 运行时环境——Deno。与目前占据主导地位的Node不同，Deno提供了更好的使用体验。 Deno同样基于V8引擎，但与Node不同的是，Deno默认支持TypeScript，并提供了HTTP服务器等功能，而Node需要通过添加依赖来实现这些功能。在安装Deno后，可以通过在控制台输入`deno -v`来查看Deno的版本。 Deno可以直接运行TypeScript，只需创建一个ts文件并编写代码，然后使用`deno`命令运行。此外，Deno还可以作为服务器使用，它提供了用于构建HTTP服务器的库。只需创建一个新文件并编写代码，然后使用`deno run --allow-net`命令运行即可。需要注意的是，在Deno中，默认情况下网络权限是关闭的，需要使用`--allow-net`参数开启。通过使用Deno，无需安装任何依赖即可运行TypeScript和构建HTTP服务器。想要了解更多关于Deno的信息，请查看[官方文档](https://deno.com/)。--GPT 4

Javascript

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

06

JUL

play sound when piece moved

摘要：这篇博客讲述了在国际象棋网站上添加一个新功能：当棋子移动时播放声音。作者最初认为这是一个很简单的功能，但最终发现并不像想象中那么简单。由于浏览器的自动播放策略，作者无法按照自己的意愿播放声音。浏览器的自动播放策略规定： - 静音自动播放是允许的。 - 有声音的自动播放是允许的，如果： - 用户与该域进行了交互（点击、触摸等）。 - 在桌面上，用户的媒体参与指数已经超过了阈值，这意味着用户之前已经播放过带有声音的视频。 - 用户在移动设备上将该网站添加到了主屏幕或在桌面上安装了渐进式Web应用程序（PWA）。 - 顶级框架可以将自动播放权限委托给其内嵌框架，以允许带有声音的自动播放。因此，在用户与页面进行交互之前，无法播放声音，在用户停止与页面进行交互时也无法播放声音。为了解决这个问题，作者找到了一个绕过限制的方法：循环播放声音并调节音量！在棋子移动时将音量调节为1，棋子移动后将音量调节为0.0001。为什么是0.0001而不是0或静音？因为如果设置为静音或音量为0，将触发自动播放策略的限制，而将音量设置为1或取消静音将在用户停止与页面进行交互时被阻止。但是，如果将音量设置为足够低的值，就不会触发自动播放策略，因为声音仍在播放。在代码中，作者使用了以下方法来实现： ```rust sound.volume = 1; setTimeout(() => { sound.currentTime = 0; sound.volume = 0.0001; }, 500); ``` 当音量为0.0001时，用户听不到声音。需要注意的是，在移动设备上不允许将音量设置为1！因此，在移动设备上可以将音量设置为静音。 ```rust sound.muted = false; setTimeout(() => { sound.currentTime = 0; sound.muted = true; }, 500); ``` --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

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

25

MAY

浅谈 Javascript 事件循环

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

Javascript