前端每周清单第 32 期：React 开源协议更新、JS 完整编年史、Vue 组件通信

作者：王下邀月熊 编辑：徐川

前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID：frontshow)，及时获取前端每周清单。

新闻热点

国内国外，前端最新动态

• Facebook 宣布重置 React，Jest，Flow 与 Immutable.js 的开源证书：自宣布保留 React 等开源项目附带专利要求的开源协议之后，社区反馈了极大的不满与怀疑，包括 WordPress 在内的许多开源项目也宣布即将切换技术栈；鉴于此，Facebook 宣布将在下周统一地重置 React，Jest，Flow，Immutable.js 为 MIT 开源协议。亡羊补牢，为时未晚，希望 React 整个社区能够继续蓬勃发展。

• CoffeeScript 2 发布：新版本的 CoffeeScript 能够直接编译为现代 JavaScript 语法，从而弥合了与 JavaScript 之间的隔阂；新版本中会将 => 输出为 =>，将 class 关键字也是直接输出为 class。此外，CoffeeScript 2 还添加了对于 async 函数的支持，未来同样会加入对象解耦与 JSX 等特性；而在带来许多新特性的同时，CoffeeScript 2 同样尽可能地保证了后向兼容性，以保证现有项目地平滑升级。

• Chrome 将会默认为 .dev 域名预置 HSTS 以强制 HTTPS 连接：在 Chromium 的这次提交之后，Chrome 将会通过 HSTS 强制所有的域名启用 HTTPS。对于普通开发者而言，如果我们在本地的域名映射中设置了 .dev 结尾的域名，那么需要将其修改为 .test 等其他域名，避免在 Chrome 中无法打开。

• Expo SDK 21.0.0 发布：近日 Expo SDK 发布了 21.0.0 版本，其基于 React Native 0.48，提供了更加丰富的功能与更优秀的性能表现；新版本中优化了 AppLoading 的使用与容错机制，引入了新的 Splash 使用方式，提升了地理位置编码、Camera、SecureStore 等接口的性能与使用。

开发教程

步步为营，掌握基础技能

• 从零构建 Angular 项目：本文旨在不使用 Angular CLI 等辅助工具，从零开始构建全特性的 Angular 项目；初学者经过这样的过程能够了解到完整的 Angular 应用组成，包括如何引入需要的 Angular 发布包，搭建 TypeScript，配置自定义的模块加载器，启动应用的主入口模块等。更多 Angular 相关资料参考这里。

• 现代 JavaScript 语法清单：本文涉及到了现代项目开发中常用的 JavaScript 语法使用以及示例代码的清单 ；本指南并不打算从零介绍 JavaScript，而是对于那些有一定基础知识的开发者提供便捷的工具手册。本文依次介绍了变量声明与使用、箭头函数、默认参数、对象解耦、数组使用、扩展操作符、对象属性、Promise、字符串、模块、类、异步编程等内容；更多 JavaScript 相关资料参考这里。

• 编写无障碍网页的 CSS：本文是作者在多年提高网页的无障碍性方面的实践分享，侧重于如何编写合适的 CSS 以提高网页的无障碍性与可用性。本文依次介绍了从清晰的文本到高可读性文本、慎用伪元素内容、屏幕并非唯一的媒介、属性值兼容、多种内容隐藏方式等内容；更多 JavaScript 相关资料参考这里。

• Vue.js 组件通信：Vue.js 开发学习中常见的问题之一就是如何进行组件间通信，本系列文章则依次介绍了单组件、父子组件、跨级组件之间的通信技巧。第一篇文章着眼于单组件中的通信技巧，包括了事件中的参数传递、指令中的数据传递等内容；第二篇则介绍了父子组件间的通信，首先讨论了常见的反模式，然后介绍了 Props、Refs、Events、v-model 等数据传递的方式。更多 Vue.js 相关资料参考这里。

工程实践

立足实践，提示实际水平

• 如何优雅的编写 JavaScript 代码：对于工程师而言，提高自身的编码能力和编写易于阅读和维护的代码，是提高开发效率和职业生涯中必做的事情；另一方面，制定良好的编码规范并落到实地，是保障产品质量的基石，每个人都应该有自己的或者团队的编码规范。本文即是作者根据自身的经验总结分享的 JavaScript 编程规范。更多 JavaScript 相关资料参考这里。

• 基于 Webpack 的自动化关键 CSS 提取：Google 性能指南中重要的一条建议就是，尽可能减少会阻塞渲染的 JavaScript 与 CSS 代码；我们网页优化中重要的手段也是进行首屏加载需要的关键 CSS 代码提取。本文则着眼于介绍如何利用 Webpack 进行自动化的关键 CSS 提取，依次探讨了阻塞渲染的含义以及 Critical CSS 的定义，然后讨论了如何通过代码编程来识别 Critical CSS，最后介绍了如何将抽取这一步集成到 Webpack 的工作流中。更多 Webpack 相关资料参考这里。

• 一次前后端分离的实践: 前后端分离的问题，不仅仅是技术上的选型问题，还涉及到整个团队在认知、职责、流程上面重新定义的问题，这也是为什么前后端分离概念看起来简单易懂，但真正团队在落地的时候，一不小心，往往鸡飞狗跳，甚至最终放弃"治疗"。本文是作者基于自己之前的对一个团队前后端分离改造的实践经历，介绍一下如何打造一个前后端分离的技术团队。更多 Web 项目架构相关资料参考这里。

深度阅读

深度思考，升华开发智慧

• JavaScript 完整编年史：JavaScript 在近几年取得了长足的发展，其语法特性与实践技巧都在不断地迭代更新；本文则是对于自面世以来的 JavaScript 发展历史进行了盘点 ，对于每个时代面临的问题、创新与发展以及主流的浏览器技术进行了介绍。本文将 JavaScript 的发展历史分为了解决基础 DOM 操作与用户交互的原始时代、解决跨浏览器支持度的 jQuery 时代、SPA 时代与现代这几个区间；更多 JavaScript 相关资料参考这里。

• 类型与否：量化 JavaScript 中可检测的错误：在团队的技术选型时我们常常会考虑是否需要引入静态类型检测，是否应该使用 Flow 或者 TypeScript 这样的工具，是否能够有效地辅助发现问题。本文则是以问答的形式给出了作者的答案，本文首先讨论了静态类型与动态类型各自的优劣，给出了常见的 JavaScript 动态类型导致的问题示例，然后通过自身所在团队的实践分享了引入静态类型之后捕获的错误数量。更多 JavaScript 类型系统相关资料参考这里。

• 构建简单的类 React 框架：本文中作者会循序渐进地介绍如何自己构建简单的类 React 框架。作者首先讨论了 React 与 Angular 各自设计思想理念的对比，然后介绍了 DOM 树的表示以及 JSX 解析函数的实现，接下来讨论了组件类的实现与 Props、State 属性的支持，最后还简述了 React Stack 与 Fiber 调和算法。更多 React 相关资料参考这里。

• freeCodeCamp 编程指南：著名的免费在线编程教学与练习网站 freeCodeCamp 近日发布了 freeCodeCamp Guide，涵盖了从编程语言基础、Web 编程、数据结构与算法、机器学习等多领域的经验知识分享。freeCodeCamp Guide 提供了便捷的搜索功能，希望能够为那些繁忙的开发者提供最快速的知识检索与问题解决服务。

开源项目

乐于分享，共推前端发展

• Franchise：提供了类似于 Notebook 操作界面的 SQL 工具，其内置集成了 js-xlsx、sql.js，支持连接 PostgreSQL、MySQL、BigQuery 等多种类型的数据库。使用者克隆项目后直接使用 yarn start 即可以启动开发服务器。

• Flutter: Flutter 是新一代的移动应用开发 SDK，其能够帮助开发者快速构建 iOS 与 Android 应用。Flutter 提供了热加载等开发特性，加速开发调试的效率、内置了众多 Material Design 与 Cupertino 风格的控件、允许开发者使用函数响应式框架来进行状态管理、允许调用原生接口或者集成第三方 SDK。

• luma.gl: luma.gl 是 Uber 开源的高性能 WebGL2 组件，其能够利用 GPU 进行数据可视化呈现与计算操作。luma.gl 能够充分利用 GPU 的即时渲染、变换反馈等特性，同时能够模块化地渲染着色，相较于传统的框架性能有着极大提升。

• ngraph.path：ngraph.path 是面向任意图结构的任意两点之间最快路径搜索算法与实现，与传统的贪婪算法、Dijkstra 等算法相比，ngraph.path 能够在准确率与性能之间达成较好的平衡。作者使用了面向于路径查找的专用堆优先队列，并且重构了双向搜搜算法，以提高算法的性能。

前端之巅

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