前端每周清单第 24 期：React 16 中异常处理与 Fiber 实战Vue 图表与 jQuery 插件

Posted 2021-04-08 前端之巅

重要的事情要特意提醒： 由于微信不支持外链（注意是外链），查看本文带链接版请点击 阅读原文。

新闻热点

国内国外，前端最新动态

• Adobe 宣布将在 2020 年底停止发布与更新 Flash Player：该消息的发布意味着属于 Flash 的时代即将最终落幕；Flash 以及包含的 ActionScript、Flex、AIR 等技术方案对于现代 Web 发展起到了巨大的引导与推动作用。在即将功成身退的时候，我们也对于他们致以崇高的敬意，Firefox、 Facebook、 Chromium 等也纷纷表示了对于 Flash 的感激与未来的迁移路线图。

• 阿里巴巴即将开源 Angular 组件库 NG-ZORRO：Zorro 的外观设计由 Ant-Design 团队担纲，而且和其它组件库共享了一致的风格和动画效果。Zorro 已经在阿里云团队内部使用，无论是组件的数量，还是代码质量，包括外观设计，都非常值得大家期待！对于 Angular 社区来说，这是一个重大的消息，Zorro 的发布将会进一步提升 Angular 在企业应用方面的巨大优势。

• React 16 Beta 正式发布：近日 React 16 Beta 版本正式发布，该版本是 React 核心重构以来的首个发布。该版本尽量保证了从 15.x 到 16.x 的平滑升级，并且在引入了新的异常处理机制，允许编写专用的异常处理组件、引入了新的调度与生命周期接口、重构了服务端渲染模块，引入了新的流模式；更多特性介绍请查看原文。

• Webpack 3.4.0 发布：近日发布的 Webpack 3.4.0 版本中包含了多个插件的性能优化与错误修复；目前 NamedModulesPlugins 与 HashedModuleIdsPlugin 能够正常地与 DllReferencePlugin 协同使用，新增了 --config-name 参数以动态指定部分配置参数、提升了 ModuleConcatenationPlugin 的错误显示，并且更新了大量的项目自身依赖版本。

开发教程

步步为营，掌握基础技能

• React 16 中的错误处理：在 React 15.x 及之前的版本中，组件内的异常有可能会影响到 React 的内部状态，进而导致下一轮渲染时出现未知错误。这些组件内的异常往往也是由应用代码本身抛出，在之前版本的 React 更多的是交托给了开发者处理，而没有提供较好地组件内优雅处理这些异常的方式。在 React 16.x 版本中，引入了所谓 Error Boundary 的概念，从而保证了发生在 UI 层的错误不会连锁导致整个应用程序崩溃；未被任何异常边界捕获的异常可能会导致整个 React 组件树被卸载。更多 React 相关资料参考 https://parg.co/bM1 。

• 使用 Vue.js 与 Chart.js 构建漂亮的图表：图表是现代网站与应用的重要组成，它们能够帮助你更有张力地呈现数据；本文即是介绍如何利用 Chart.js 与 Vue.js 来有效地，针对不同格式的图表进行可视化数据呈现。本文首先介绍了使用 vue-cli 构建基本的项目骨架，然后引入了 vue-router 进行路由划分，接下来介绍了利用 vue-chartjs 库依次构建常见的线型图、饼图、气泡图、柱状图等常见的图表；更多 Vue.js 相关资料参考 https://parg.co/byL 。

• Angular 中利用新的动画特效（v4.3+）优化路由变换：本文着眼于介绍 Angular 应用开发中，如何利用新的动画特效，来为路由切换添加动画效果。本文首先介绍了如何从独立的依赖中引入动画模块，与为应用添加路由配置以及简单的路由动画；然后介绍了 Angular 动画接口，如何定义动画、如何添加参差效果等内容，最后介绍了如何将这些整合为独立的应用。

• 循序渐进地利用 Express.js、Apollo Server 与 Webpack 创建可热加载地结构化 GraphQL 接口：GraphQL 是 Facebook 在 2015 年提出的利用强类型的查询语言构建接口新方式，GraphQL 正逐步被 Twitter、Github 这样的大型互联网公司所接纳实践。本文则着眼于介绍如何利用 Express 与 Apollo Server 构建 GraphQL 接口，并且如何去结构化管理 Schema 以保证其可管理性；除此之外还介绍了如何为开发环境添加热加载特性，更多 GraphQL 相关资料参考 https://parg.co/b1e 。

• 基于 Node.js 与 html5 的视频流：本文一步一步地介绍如何构建基础的 Node.js 接口，并且添加某个路由从而将视频文件发送给前端。本文首先介绍了 Node.js 中流的基础概念与如何获取文件体积、从文件创建流并且获取块的大小等基本 API，然后介绍了如何搭建服务器并且添加合适的路由以返回视频流，最后介绍了前端如何利用 HTML5 的 video 标签实现视频播放与控制；更多 Node.js 相关资料参考 https://parg.co/be0 。

工程实践

立足实践，提示实际水平

• javascript 设计模式学习：本书是 Addy Osmani 著作的开源书籍，主要介绍面向 JavaScript 语言的经典与现代的常用设计模式。所谓设计模式即是软件设计中常见问题的可复用解决方案，对于任何一门编程语言都是非常值得探索的话题。本文首先概述了设计模式的基础理论，然后介绍了 JavaScript 中常见的十余种类与对象的设计模式，接下来介绍了 JavaScript 界面设计相关的 MV* 设计模式，然后还介绍了 JavaScript 模块化设计以及 jQuery 中的设计模式等内容；更多 JavaScript 设计模式相关参考 https://parg.co/bIO 。

• Vue.js 中安全地使用 jQuery 插件：实际上我们并不推荐在界面中同时使用 jQuery 与 Vue.js，不过在项目开发中有时候我们无法避免地需要同时使用，本文即是讨论如何安全地使用 jQuery 插件。本文以某个时间日期选择插件为例，首先讨论了引入 jQuery 存在的潜在风险，然后一步步地介绍了初始化插件、将插件包裹在 Vue.js 组件内、如何在插件与组件之间进行数据交互等内容；更多 Vue.js 相关资料参考 https://parg.co/byL 。

• Angular 开发者常犯的错误枚举：本文作者从自己团队的 Angular 开发经验与 Code Review 中总结出了开发者常犯的错误，并且提出了解决方案。这些错误包括对于 Angular、Angular 2、Angular 4 等各个版本的误解、ngOnChanges 与 ngDoCheck 对比、僵尸订阅、冗余订阅、不同模块的 providers 误用、直接操作 DOM 结点、重复声明组件等方面。

• Node.js 微服务实践：微服务架构目前正在大行其道，不过作者发现由于很多人有自己独到的见解，微服务架构的变种与复杂度在持续增加；作者则希望通过本文使初学者快速地利用 Node.js 开发出简单的微服务。本文首先介绍了微服务出现的背景以及微服务的五个原则：零配置、高冗余、可容错、自我修复、自动发现；然后介绍了使用 cote 这个微服务库一步一步地实现 Node.js 微服务集群，依次创建 Requester、Responder 等基础组件以最终实现系统中的几个相互依赖的模块。更多 Node.js 相关资料参考 https://parg.co/be0 。

• 渐进式 CSS 布局：从 Floats 到 Flexbox 到 Grid：随着各大现代浏览器逐步支持 CSS Grid 布局，越来越多的开发者在尝试使用这种新型的布局方式。不过鉴于目前还存在着大量的老版本浏览器，作者在本文中重点讨论了如何利用渐进式 CSS 布局增强的方式来应对不同浏览器环境下的布局解决方案，并且根据运行环境来渐进增强；更多 CSS/SCSS 相关资料参考 https://parg.co/baH 。

深度阅读

深度思考，升华开发智慧

• V8 新的 Turbofan JIT 编译器带来的性能特性概述：V8 JavaScript 引擎最早是 Google 为 Chrome 浏览器开发的 JavaScript 虚拟机，其设计的初衷就是为了让 JavaScript 能够高速运行；而这种性能优化的保障就是所谓 JIT 编译器。本文着眼于介绍 V8 新的 Turbofan JIT 编译器提供的新的性能特性能够为应用带来的优化；本文依次介绍了使用 delete 操作符与设置为 undefined 这两种不同的去除对象属性的方式在新的编译器下的表现差异、对于 Arguments 参数不同操作的对比、柯里函数与 bind 操作符的优化，以及对象遍历、对象创建和对于新旧引擎中对于常见的 Winston 等日志框架的性能对比等内容。更多 JavaScript 引擎相关知识参考 https://parg.co/bgp

• JavaScript 之路：本书希望为任何对 JavaScript 有兴趣的开发者提供 JavaScript 的多领域知识，其兼具了入门简单、对初学者友好、使用 ES2015 语法以及规范的样式指南等特点。本书主要包含以下章节：JavaScript 语法基础、利用 DOM 接口创建交互性的网页、构建完整的 Web 应用等内容；更多 JavaScript 相关资料参考 https://parg.co/bMI 。

• ：本篇不是一篇讲面试题的技术贴，而是来自一位技术面试官的深层思考。本文作者从面试官与面试者两个角度来聊聊面试的事情；对于面试官，作者讨论了如何理性对待、如何基于行为面试法对技术知识进行考核、应该尊重并且感谢候选人等。而从面试者的角度，笔者对于面试中所谓正确的答案，以及如何准备知识与简历进行了讨论。

• 2017 Web 开发趋势：Web 开发在 2016 年里得到了长足的发展与进步，而本文则高屋建瓴地分析了 2017 年中 Web 开发可能面临的机遇与挑战。作者首先讨论了人工智能的前景以及 Web 与之相结合的案例，然后讨论了物联网行业中 Web 相关的开发案例；接下来作者分析了崛起的 JavaScript 以及目前流行的项目，然后又从静态网站生成器、虚拟现实、GIFs、Bots 等角度讨论其他的发展方向。

• ：浏览器中的渲染引擎是单线程的，几乎所有的操作都是在这个单线程中执行——解析渲染 DOM Tree 和 CSS Tree，解析执行 JavaScript ——除了网络操作。这个线程就是浏览器的主线程。单线程意味着，一段时间只做一件事，所以浏览器在同一时间内，其主线程只能关注于一个任务。React 核心团队很早之前就预知这样的风险的存在，并且持续探索可解决的方式。基于浏览器对 requestIdleCallback 和 requestAnimationFrame 这两个 API 的支持，以及其他团队对者两个 API 的实现，如 React Native 团队。React 团队实现新的调度策略 -- Fiber reconcile；更多 Fiber 相关资料参阅 https://parg.co/bgO 。

开源项目

乐于分享，共推前端发展

• vue-3d-model：一个展示三维模型的 Vue 组件，支持模型操作和模型点击事件，能自动缩放模型到合适大小并校正偏移，目前支持 obj、stl、dae 和 json 格式的模型。

• Chromeless：Chromeless 是非常优秀的 Chrome 自动化控制库，能够同时运行在本地与 AWS 中。Chromeless 能够同时运行千余个浏览器集成测试、能够被用于进行网页抓取与自动截图、能够编写需要真实浏览器的机器人等等；可以在这里进行在线试验。

• react-tiny-virtual-list：零依赖的轻量级 React 列表虚拟化库，能够渲染数百万的项目而不会有什么卡顿；同时 react-tiny-virtual-list 还支持指定项目的高度、手动控制滚动到某个项目下标处、设置初始化滚动偏移、支持水平列表等等特性。

• trust：挺有意思的博弈论交互式指南，通过简单的小游戏来介绍竞合关系。除了能了解简单的博弈论知识之外，笔者觉得该指南的动画效果还挺有意思的，值得一看。

巅峰人生

：本文是 InfoQ 对于 Linus Torvalds 的专访；十五年来，Linus Torvalds 一直坚持在技术第一线，开发了 Linux 和 Git 两个项目，并深刻影响了软件行业。Linus Torvalds 极度热爱技术，但并不是泛 IT 技术的追随者，他从来没有写过 web 程序、不会设置 FTP 服务器的他有着很聚焦的技术关注点。但是，他并不是一根筋的洁癖开源理想者，很早他就思考了商业对开源的作用；他很开心也很感激商业公司和基金会帮他处理所有那些他不愿意处理的事情，并且可以做到完全放权、不管不问。

前端之巅

「前端之巅」是 InfoQ 旗下关注前端技术的垂直社群。投稿请发邮件到 [e-mail]，注明“前端之巅投稿”。

号外：

扫描下方二维码，极客（即刻）试用！