乐趣区

关于前端:湖中剑-前端周刊-11-VSCode插件开发策略模式React-Router-6位运算技巧Nuxt-3打字机效果

jiezi

周刊收集包含前端（但不限于前端）的文章、新闻、开源我的项目、工具等等，每周一更新。

📰 News

Parcel 2

Parcel 2 由 Rust 重写，性能有了很大的晋升，本次更新：

  • 🔌 全新的插件零碎
  • 🌳 默认启用 tree shaking，并反对 ES modules、CommonJS、dynamic imports 和 CSS modules
  • 🚀 微小的性能晋升
  • ✂️ 主动 code splitting
  • 🖼 图片尺寸变动、格局转化以及优化, 反对 AVIF 和 WebP，以及对 JPEG、PNG 无损压缩
  • 等等

更多内容能够查看上面官网布告。

https://parceljs.org/blog/v2/

React Router 6

可能是公布前最初一个 beta 版。

  • 花了不少篇幅为 remix 实现核心配置式路由，<Router> + useRoutes 的组合，Umi 4 已切到这个版本
  • 提供 <Outlet /> 渲染子路由，不能用 props.children 了
  • 全面反对相对路径，子路由不必写父路由门路
  • 用 useNavigate() 进行编程式跳转
  • 不再提供 <Switch />，用 <Routes /> 代替
  • <Route index /> 示意 Index 路由
  • <Route /> 不能被封装，比方封装一个 <PrivateRoute /> 用于权限，取而代之的是 <Route element /> 的形式
  • <Routes /> 能够嵌套，嵌套在 <Route /> 下的 <Routes /> 会基于前者的 path，留神前者的 path 加 * 后缀，否则后者不匹配时会不显示
  • 不再提供 <Redirect />，举荐服务端判断了间接跳，小老本降级也可用 <Navigate replace to="/home" />，毛病是不反对服务端渲染

https://github.com/remix-run/react-router/releases/tag/v6.0.0-beta.7

Nuxt 3 Beta

Nuxt 3 公布了 beta 版本，其中一个要害更新是引入了新的 Server 引擎，能够间接部署现有的多个云平台。

这个版本还反对 Vue3 和 Vite，想理解更多的内容能够方面上面链接。

https://nuxtjs.org/announcements/nuxt3-beta/

📖 文章

新生代农民工也要懂的策略设计模式

俗话说，凡事讲策略。讲策略的时候，咱们往往会思考每种状况的老本。策略同样可体现在咱们的代码之中，正当利用策略模式重构逻辑简单的代码，会使我的项目工程更易保护和扩大。

https://mp.weixin.qq.com/s/nVlZ9V744DQUNiWBP0m8_Q

如何排查 React 中渲染慢的组件?

https://alexsidorenko.com/blog/react-performance-slow-renders/

React 源码中的位运算技巧

https://mp.weixin.qq.com/s/zrfmXGHK4PG8B6pdGYO6Aw

AWS 是如何将 AWS SDK 的 JavaScript 包公布大小减半

https://aws.amazon.com/cn/blogs/developer/how-we-halved-the-publish-size-of-modular-aws-sdk-for-javascript-clients/

JavaScript 开发者都应该晓得的 33 个概念

https://github.com/leonardomso/33-js-concepts

教你用 CSS 实现打字机成果

https://www.sitepoint.com/css-typewriter-effect/

在微前端中加载 Vite 利用

https://mp.weixin.qq.com/s/Pd9jQI6DOKJ16hVbLNKtOA

My Logging Best Practices

log 的最佳实际。

https://tuhrig.de/my-logging-best-practices/

VSCode 语言插件开发入门

VSCode 为何能够反对如此之多的编程语言？如何为一门新语言编写语言插件？又有哪些语言个性能够被利用呢？本次分享为大家介绍了 VSCode 提供的编程语言相干的能力，具体解说了代码高亮原理、languages.* API、Language Server Protocol 等内容。

https://mp.weixin.qq.com/s/Eqb9hAvG-WeseP9rCl_XRg

从 fabric 源码来看如何做好一个 canvas 库

前言，本篇文章能够让你从 0 到 1 疾速理解 canvas，理解 fabricjs 源码库的整体组织和要害外围代码。

https://mp.weixin.qq.com/s/OtKqeE0FnLLxHZUk02dj-w

🛠 工具、软件

react-spring

react-spring 是基于 spring-physics（弹簧物理）的 react 动画库，动画成果更加晦涩、天然。

https://github.com/pmndrs/react-spring

Caroumesh: 轮播组件中展现 3D 内容

https://github.com/Adonis-Stavridis/caroumesh

Nice Modal

Nice Modal 是一个轻量级、零依赖的模态框管理工具。应用 context 来全局长久化模态框的 state，这样的计划能够让你很简略的管制模态框的显示和敞开。

import NiceModal from '@ebay/nice-modal-react';
import MyModal from './MyModal';

//...
NiceModal.show(MyModal, { someProp: 'hello'}).then(() => {// do something if the task in the modal finished.});
//...

demo：https://ebay.github.io/nice-modal-react/

https://github.com/eBay/nice-modal-react

DOOM Rendered via Checkboxes

这是一个很有意思的我的项目，应用 Checkboxes 来渲染 DOOM（《覆灭兵士 4》），让你在网页通过这种形式来玩游戏。

https://healeycodes.com/doom-rendered-via-checkboxes

AnyWebP

一个在线工具，能够把 WebP 转为 JPG/PNG/ICO。

https://anywebp.com/

Animated Backgrounds

CSS 和 JS 实现的带动画背景的成果合集。

https://animatedbackgrounds.me/

Doodle Ipsum

「Doodle Ipsum」是一个以涂鸦作为测试图片产生器的在线工具。

提供各种不同款式的插图素材，用户能够在抉择款式（或随机）、指定大小比例和背景色彩后产生图片链接，就能将产生的图片使用在网页开发原型、登陆页面或是任何无代码工具（No-code tool），例如领有所见即所得成果的网页编辑器。

https://doodleipsum.com/

Sapling：展现 React 组件树形构造的 VS 代码扩大

随着 React 我的项目的大小和复杂性的减少，查看页面组件的构造是个费时费力的事件。Sapling 在 VS Code 侧栏中增加了一个依赖关系树，用于展现组件的依赖书，并提供跳转到文件的性能。

介绍文章：https://www.scien.cx/2021/10/09/introducing-sapling-a-vs-code-extension-for-traversing-your-react-component-hierarchy/

https://marketplace.visualstudio.com/items?itemName=team-sapling.sapling

周刊首发于 GitHub，欢送订阅：

我的周刊

退出移动版