三月初，各大前端公众号开始一波抽奖送书活动，原来是经典的“犀牛书”《JavaScript 权威指南》第七版的中文版面世了，等不到抽奖，迫不及待买了一本，这几天粗读了一遍，先给出结论：本书内容较新，涵盖了 ES2020 之前的全部内容，可以入手。

书变薄了

今天主要是想通过和第六版的对比的形式来看看第七版犀牛书有什么变化。首先最大的变化就是书变薄了！从原来的 1000 多页缩到了不到 600 页，篇幅变小的原因书中也交代了，如今互联网的普及，纸书已经没有必要将参考资料放入其中，直接看 MDN 网站 就可以了。

译者

第二个变化就是译者发生了变化，第七版的作者是拥有十五年技术翻译经验的李松峰，经典的“红宝书”《JavaScript高级程序设计》第 4 版也是出自其手。而第六版当年是淘宝前端团队做的翻译，当时正是 2011 年，十年之间发生了翻天覆地的变化，今天看了译者，无意中发现熟悉的云谦和玉伯二位大佬赫然在列，如今二人已从淘宝到了蚂蚁，大佬们十年前的个人介绍也如此青涩：

在中后台管理类系统中，多页签的需求非常普遍，用户常常需要在多个页签内跳转，比如填写表单时去查询某个列表获取一些字段信息再回到表单页面填写。这样的需求在 Vue 中使用 keep-alive 即可实现，但是在 React 中，React Router 切换路由后就会卸载组件，而本身并没有提供类似 keep-alive 的功能，所以实现多页签的功能就会变得格外困难。我的项目也遇到了同样的问题，在 2019 年左右做了技术调研和选型，最终选择了 react-router-cache-route，并在此基础上实现了多页签的需求，并稳定运行了 2 年的时间。下面我来复盘一下这次的多页签改造。

一、项目简介

本项目是我现在所在部门的项目，是一个企业级中后台管理系统，包括系统管理、角色权限体系、基于 Activiti 的工作流引擎等很多开箱即用的功能。项目包括前后端，后端是我们部门自研的基于 Spring 的企业级 Java 框架，前端是 React 技术栈，当时还是 v15 版本。React Router 还是 v2 版本。

项目主要对象是提供给科技部门有中后台和流程需求的项目组，基于我们项目提供的基线工程，可以快速搭建工程，在此基础上根据需求进行开发。截止到 2019 年 10 月我离开该项目组，本项目已经服务了行内近 50 个系统。

借着掘金“项目复盘”的机会，回顾自己工作的真实项目。本项目是我进入职场的第一个项目。从研三实习开始到第一个部门结束，一直都在做的项目。我们内部将这种项目称作“滚动开发包”，从名字就能看出来，持续滚动开发就是这个项目最大的特点，而从 2015 年 9 月开始，到 2018 年 7 月，将近 3 年的时间，我的主要工作都是围绕这个项目，是我职业生涯的第一个里程碑，在此进行复盘，希望其中的点滴内容能够帮助到希望进入银行软开的同学们。

一、项目简介

本项目是部门的内部项目管理系统，提供了从项目立项、方案评审、实施、上线到结项的全生命周期项目管理，涵盖了项目管理中的资源、进度、成本、质量等关键维度，学过 PMP 的同学们应该都比较熟悉。

• 项目用户：部门中高管、PMO、行员、外包。
• 项目特点：滚动开发包，需求迭代非常频繁，管理侧改革落地基本都基于本系统；内部系统，用户体验方面要求不高；用户量不大，几乎没有高并发场景；
• 项目缺点：技术栈老旧、前后端未分离、需求变化频繁、缺少业务和技术文档、代码臃肿、开发效率低下；
• 项目类型：采购产品，并根据业务需求进行了多年的迭代开发
• 开发团队：10 左右规模，包括行内的项目经理、技术经理和我，其余开发、测试都为外包。

我入职的时候，行员就我一个开发，还有一个项目经理，一个技术经理。后来加入了祥哥作为技术经理，他是 Java 大牛。团队用了快 2 年的时间，将我们的项目从采购系统逐渐转变为了能够真正完全自主掌控的系统。我在这个项目中做过很多的角色，前后端开发、UI 设计、产品经理、项目经理、DBA、运维、运营、客服这些工作都贯穿在我工作的始终，银行软开的小伙伴对这种一人分饰多角的体验应该比较熟悉。我也通过接近两年的努力，将自己强行掰回了 Web 前端的轨道上来，并重归 Web 前端的正轨。

• 原文地址：JavaScript: What is the meaning of this?
• 原文作者：Jake Archibald
• 原文发布时间：2021-03-08
• 本文永久链接：https://github.com/Ivocin/Translation/Blogs/javascript-what-is-the-meaning-of-this.md
• 翻译、校对：Ivocin

搞明白 JavaScript 中 this 的值有时候会很棘手，本文带你彻底搞懂 this。

JavaScript 的 this 往往会成为许多笑话的笑柄，因为它相当复杂。然而，我发现很多开发人员为了避免处理 this，用了更加复杂和特定领域的处理。如果你对 this 还不熟悉，希望本文能帮助到你。下面进入我的 this 指南。

我将从最具体的情况开始，以最不具体的情况结束，本文的结构类似与一个大的 if (…) … else if () … else if (…) … 语句，所以你可以直接跳转到匹配你代码情况的章节。

• 原文地址：ECMAScript 2021: the final feature set
• 原文作者：Axel Rauschmayer
• 本文永久链接：https://github.com/Ivocin/Translation/Blogs/ECMAScript-2021-the-final-feature-set.md
• 翻译、校对：Ivocin

更新于 2021-03-09: 今天，ES2021 候选提案 发布了其最终功能集的版本。如果它能够在今年 6 月的 ECMA 大会上通过，就会成为官方的标准。本文描述了有哪些新的内容。

最近在整理个人博客，之前的博客是基于 Hexo 3.x 版本的，一晃两年多过去了，Hexo 已经升级到了 5.x 版本，新版本带来了一系列新特性，并且性能得到了极大的提升。而个人喜欢的 Icarus 主题也有了大版本的更新，更是带来了赛博朋克的主题，十分惊艳，话不多说，直接看效果。

现在让我们从零开始，快速搭建一个赛博朋克风格个人博客。

• 原视频地址：Next generation frontend tooling with ViteJS ✨ Open Source Friday ✨
• 中英文字幕视频地址（B站）：【译】下一代前端工具 ViteJS 中英双语字幕 - Open Source Friday
• 中英文字幕视频地址（腾讯视频）：【译】下一代前端工具 ViteJS 中英双语字幕 - Open Source Friday
• 英文字幕：听译、YouTube 自动字幕
• 英文校对、翻译：Ivocin
• 视频字幕地址： Vite-Open-Source-Friday
• 原文链接：【译】下一代前端工具 ViteJS 中英双语字幕 - 掘金

关于 Vite，来看看作者本人怎么说。本视频是 Vue 以及 Vite 作者 尤雨溪 在 2021 年 2 月 12 日在 Twitch 上做客 GitHub Open Source Friday 节目的直播视频。在视频里有尤大关于 Vite 的各项功能的详细阐述、大神在线编码、在线 Debug、大佬 diss webpack 以及对 Vite 的哲学思考。本视频很长，接近 70 分钟，下面是视频摘录，大家可以选择自己感兴趣的点自行传送。强烈建议大家观看视频，里面有很多细节相信大家会有收获。

前言

Vite 无疑是当前最火热的项目之一，随着春节后 2.0 版本的发布，越来越多开发者开始关注起了这个项目。这个号称下一代前端构建工具的给我们最大的印象的就是快。日常被缓慢的项目启动时间和 HMR 折磨，有了 Vite 之后，真的不要太爽。虽然 Vite 和框架无关，但应用较多的仍然是 Vue 工程，那么 React 工程是否能够顺利使用呢，这两周在工作之余，就开始了 Vite 2.0 + React 的尝试。当然其中踩了比较多的坑，比如 Antd 的引入带来的一系列问题，别名怎么写，代理如何配置，集成 ahooks 等等，希望能够帮助到使用 React 又想使用 Vite 提升开发效率的同学，少走弯路。当然，我们还可以从实践的过程中直观了解到 Vite 的预打包原理以及性能真实的感受。

本文源码地址在 vite-playgrounds 中，如果阅读中发现问题，欢迎 pr。

本文是在 React 工程的 VS Code 插件及配置 基础上编写的，当时写的时候是 2018 年，至今项目组使用 React 开发已经两年多了，是时候更新一波 Visual Studio Code 插件使用文档了。本文主要以实用为目的，本着不折腾的原则，只挑选平时开发 React 工程用的顺手的插件、主题和字体，也欢迎同学们推荐好用的效率神器。

• 原文地址：Why I Write CSS in JavaScript
• 原文作者：max stoiber
• 译文出自：掘金翻译计划
• 本文永久链接：https://github.com/xitu/gold-miner/blob/master/TODO1/why-i-write-css-in-javascript.md
• 译者：Ivocin
• 校对者：MacTavish Lee, Mirosalva

三年来，我设计的 Web 应用程序都没有使用 .css 文件。作为替代，我用 JavaScript 编写了所有的 CSS。

我知道你在想什么：“为什么有人会用 JavaScript 编写 CSS 呢？！” 这篇文章我就来解答这个问题。