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

前端每周清单专注前端领域内容，分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单。

国内国外，前端最新动态

• 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 。

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

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

• React 的新引擎— React Fiber 是什么？ ：浏览器中的渲染引擎是单线程的，几乎所有的操作都是在这个单线程中执行——解析渲染 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 格式的模型。