diff --git a/docs/2024/09/52/index.md b/docs/2024/09/52/index.md new file mode 100644 index 0000000..c2c7c96 --- /dev/null +++ b/docs/2024/09/52/index.md @@ -0,0 +1,196 @@ +--- +template: main.html +--- + +# ryanwang's weekly 第52期 + +![](https://bigdreamerblog.oss-cn-beijing.aliyuncs.com/nextBlog/zoxTIM.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_90/format,webp){ loading=lazy } + + +(封面图片来源于:基于 `CC0` 协议的 [shopify](https://www.shopify.com/stock-photos/photos/person-sits-looking-out-towards-still-water)) + +------ + +!!! tip hint important "温馨提示" + + 周刊中所有高亮的内容都可以点击到指定内容的链接~ + +--- +> 如果您正处在微信公众号,请直接滚动至底部👉阅读原文🫶 + +--- + +**关键词:** *`内存泄漏`*、 *`Unit Tests`*、 *`volta`* + +## FE News + +### 1. [JavaScript 中内存泄漏的常见原因](https://www.trevorlasn.com/blog/common-causes-of-memory-leaks-in-javascript) +> 相关地址:https://www.trevorlasn.com/blog/common-causes-of-memory-leaks-in-javascript + +文中详细介绍了 `node` 和 `浏览器` 端的内存泄漏的场景,以及如何去排查解决。 + +> 内存泄漏:当您的应用程序分配内存,但在不再需要时未能释放时,就会发生内存泄漏。随着时间的推移,这些未释放的内存块会累积起来,导致内存消耗逐渐增加。 + +这里暂时只列举 `JavaScript` 中的内存泄漏场景: + +- 变量管理不当 + +```typescript +let cache = {}; + +function storeData(key, value) { + cache[key] = value; +} + +// Simulating the function being called multiple times +storeData('item1', new Array(1000000).fill('A')); +storeData('item2', new Array(1000000).fill('B')); + +// Memory leak: data stored in 'cache' is never released + +``` + +- 持久全局对象 +```typescript +global.config = { + settings: new Array(1000000).fill('Configuration') +}; +// Memory leak: 'config' is global and remains in memory for the entire application lifecycle + +``` +- 事件监听器未移除 + +```typescript +const EventEmitter = require('events'); +const myEmitter = new EventEmitter(); + +function listener() { + console.log('Event triggered!'); +} + +// Adding event listeners repeatedly +setInterval(() => { + myEmitter.on('event', listener); +}, 1000); + +``` + +- 闭包捕获变量 + +```typescript +function createClosure() { + let capturedVar = new Array(1000000).fill('Data'); + + return function() { + console.log(capturedVar[0]); + }; +} + +const closure = createClosure(); +// The closure holds onto 'capturedVar', even if it's not used anymore. + +``` + +- 非托管回调 + +```typescript +function fetchData(callback) { + let data = new Array(1000000).fill('Data'); + + setTimeout(() => { + callback(data); + }, 1000); +} + +function handleData(data) { + console.log(data[0]); +} + +fetchData(handleData); // The 'data' array remains in memory. + +``` + +- bind() 的错误使用 + +```typescript +function MyClass() { + this.largeData = new Array(1000000).fill('leak'); + + window.addEventListener('click', this.handleClick.bind(this)); +} + +MyClass.prototype.handleClick = function() { + console.log('Clicked'); +}; + +// If MyClass instance is destroyed, but the event listener is not removed, +// the bound function will keep the instance alive in memory. +``` + +- 循环引用 + +### 2. [使用 React 测试库编写单元测试的技巧](https://spin.atomicobject.com/react-testing-library-unit-tests/) +> 相关地址:https://spin.atomicobject.com/react-testing-library-unit-tests/ + +文章中关于 `RTL` 介绍的内容并不是很多,但是核心的内容主要偏向于 `dom` 测试。 + +### 3.[volta 2.0](https://github.com/volta-cli/volta/releases) +> 相关地址:https://github.com/volta-cli/volta/releases + +可能大家对于 `volta` 很陌生,但是根据我对于 `volta` 的使用经验和体验来看,还是蛮不错的。 + +简单介绍下: + +> 快速:快速无缝地安装和运行任何 JS 工具!Volta 采用 Rust 构建,并以快速静态二进制文件的形式发布。 + +> 可靠:确保项目中的每个人都拥有相同的工具——而不会干扰他们的工作流程。 + +> 通用:无论是包管理器、Node 运行时还是操作系统,您只需要一个命令:volta install。 + +总结一下,一个比 `nvm` 更强大的 `nvm plus`。 + +------ + +以下是 `2.0` 主要的更新内容: + +- 🚨(突发)🚨 我们升级了用于构建 Volta 的 Rust 版本,从而不再支持旧版本的 glibc 和 Linux 内核。有关受支持版本的详细信息,请参阅2022 年 8 月的 Rust 公告。值得注意的是,这意味着我们不再支持 CentOS 6(#1611) +- 🚨(突发)🚨 由于成本和代码签名流程的变化,我们已放弃 Windows 安装程序的代码签名。我们现在建议使用winget在 Windows 上安装 Volta(#1650) +- 🎉(新)🎉 我们现在为 ARM Linux 和 ARM Windows 提供预构建的二进制文件(#1696、#1801) +- Volta 不再需要在 Windows 上启用开发者模式(#1755) +- volta uninstall现在提供更好的帮助和错误消息来描述其使用和局限性(#1628,#1786) +- Volta 现在将在 Mac 上使用通用二进制文件,而不是单独的 Intel 和 ARM 特定版本(#1635) +- 切换到.zshenv默认安装配置文件脚本,而不是.zshrc(#1657) +- 为该命令添加了一个默认垫片,它是( #1670 )yarnpkg的别名yarn +- 添加了一个新--very-verbose标志以启用更多日志记录(注意:我们尚未实现太多额外的日志记录)(#1815) +- 简化了获取过程以删除多余的网络请求并解决挂起问题(#1812) +- 一些依赖项升级和清理重构来自@tottoto + +### 4. [Float UI](https://floating-ui.com/) +> 相关地址:https://floating-ui.com/ + +一个用于制作 `Modal` 、`Tooltip` 、`Dropdown` 等浮动元素的利器。 + +- 兼容性:底层的核心库兼容到 `ie11`。博主也将其运用于生产中,目前没什么问题反馈。 +- 实用性:内部的功能都是以插件形式加载,一些常见的问题在官网的模块中已经做了解答。 + +造有用的轮子之用轮子。 + +### 5.[关于 TypeScript 的50个细微的错误](https://bigdreamerblog.oss-cn-beijing.aliyuncs.com/nextBlog/50-ts.pdf) +> 相关地址:https://leanpub.com/bookstore?type=all&category=computer_programming + +一本电子书,但是可以免费下载,本周刊已经提供了下载路径。 + +### 6.[一个零依赖的日志库](https://github.com/dahlia/logtape) +> 相关地址:https://github.com/dahlia/logtape + + + + + +## End + +!!! pied-piper "交个朋友吧~" + + 我是不换(书生),"浪子回头金不换"的**不换**,"百无一用是书生"的**书生**,热爱工作,同时在工作之余也热爱开源。 + +本期周刊到这里就结束了,我们下期再见👋~ diff --git a/mkdocs.yml b/mkdocs.yml index db6966f..f78cd2c 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -211,6 +211,9 @@ nav: - 第49期: ./docs/2024/07/49/index.md - 第50期: ./docs/2024/07/50/index.md - 第51期: ./docs/2024/07/51/index.md + - 九月: + - 第52期: ./docs/2024/09/52/index.md + - 声明: ./DECLARATION.md - 里程碑: ./LANDMARK.md