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

前端 前端每周清单

前端每周清单专注前端领域内容，分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。关注【前端之巅】微信公众号(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格式的模型。

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

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

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

巅峰人生

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

前端之巅

前端之巅是InfoQ旗下关注前端技术的垂直社群，加入前端之巅学习群请关注前端之巅公众号后回复“加群”。投稿请发邮件到 editors@cn.infoq.com，注明“前端之巅投稿”。