前端每周清单第 36 期：深入 Vue 2.5 类型增强、Puppeteer 端到端测试、PayPal 跨域套装

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

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

新闻热点

国内国外，前端最新动态

• MSDN 将 7700 余份文档重定向到 MDN: 为了更好地协同维护 Web 开发相关的文档，微软决定将 MSDN 上 7700 余份 Web 开发相关的文档重定向到 MDN；MDN 是 Mozilla 开源共享的核心部分，来保证 Internet 资源的开放性与可用性，从而帮助开发者更快地学习与成长；微软也长期致力于维护 MDN 上相关地开发文档，包括整个 Microsoft Edge 的 Web API 接口也是完全构建在 MDN 上。

• Expo SDK v22.0.0 发布：Expo SDK v22.0.0 基于近日发布的 React Native 0.49 版本，进行了一系列的功能特性提升与优化。现在，Snacks 可以支持多文件与多资源拖动上传，并且能够将自定义的 Snacks 持久化保存到个人文档中；该版本还优化了 Android 中使用的 JavaScriptCore 以及 ARKit，同时增强了 Splash Screen API, WebBrowser.openAuthSessionAsync 等接口。

• Chrome 62 发布：本周发布的 Chrome 62 版本针对调试工具中的 Network Information API 进行了重大升级，其提供了更多的性能评测信息，而不再仅仅是统计结果；除此之外，该版本还开始支持 OpenType Variable Fonts 以及 DOM 元素中进行 Media 捕获。另一个有趣的地方在于 Chrome 62 的 iOS 版本提供了 Payment Request API，尽管 iOS Webkit 本身都没有提供这个功能；这也为自定义浏览器中希望添加 Payment Request API 的支持提供了思路。

开发教程

步步为营，掌握基础技能

• 基于 Puppeteer 的端到端测试：Chrome 在 59 版本时推出了 Headless Chrome(无界面 Chrome)，可用于自动化测试和不需要可视化用户界面的服务器；Puppeteer 就是 Chrome 团队推出的基于 Headless Chrome 开发的自动化工具，它可以用来做 UI 自动化测试。本文即是对如何利用 Jest 与 Puppeteer 进行界面的端到端测试进行介绍，本文首先讨论了何为端到端测试及其在项目开发流程中的意义、如何使用 Puppeteer 编写测试用例、如何在 Jest 中运行这些用例，文末还给出了数个编写端到端测试用例的建议。如果有对于 Puppeteer 还不了解的同学也可以阅读前端之巅专栏本周推荐文章：使用 Puppeteer 玩转 Headless Chrome；更多 Puppeteer 相关资料参考这里。

• Angular JWT 权限验证完整指南: 本文循序渐进地介绍如何设计与实现 Angular 应用中基于 JWT 的权限验证部分；本文不仅仅聚焦于如何写代码，而是希望能够带领读者一起来考虑如何设计基于 JWT 的权限验证，我们应该关心哪些设计要点并且如何将它们应用到具体的开发实践中。本文首先讨论了登录页的设计、JWT 机制原理，然后 利用 node-jsonwebtoken 来创建基于 JWT 的用户 Session，接下来讨论了如何将 JWT 返回给客户端并且选择合适的存放位置，最后分析了如何在客户端中将 JWT 返回给服务端并且验证用户是否合规。更多 Angular 相关资料参考这里。

• Vue.js 中高级概念介绍: Vue.js 毫无疑问是简单易上手的框架，本文则 长篇大论地对 Vue.js 中一些高级概念的理解与使用进行深入介绍，包括 Mixins、Custom Directives、Filters、Transitions、状态管理、服务端渲染等。本文依次介绍了如何使用 Mixins 实现代码复用、如何创建自定义的指令、如何使用 Filters 来对展示信息进行过滤、如何使用 Transitions 创建动画、如何使用 Vuex 进行状态管理等内容。更多 Vue.js 相关资料参考这里。

• Flexbox 与 CSS Grid 系列教程: 本系列文章是对于 CSS 布局中常用的 Flexbox 与 CSS Grid 进行深度介绍，首篇文章是对于 Flexbox 与 CSS Grid 的概念进行详细介绍与对比；Flexbox 是面向一维布局设计，适合于单纯的行布局或者列布局；而 CSS Grid 则面向二维布局设计，能够同时在行或列上进行元素排布。更多 CSS 布局相关资料参考这里。

工程实践

立足实践，提示实际水平

• 来自 PayPal 的开源跨域 JavaScript 套装: PayPal 的工程师们编写了很多运行于不同网页、不同域名下的 JavaScript 代码，并且还为很多的第三方网站提供了便捷的代码嵌入方式，不过这样也就导致了 PayPal 面临着极为复杂的跨域问题：既需要提供跨浏览器的兼容方案，也不能强制性的让所有的后端接口允许 CORS 跨域请求等，本文即是 PayPal 对其 日常业务中使用的跨域相关工具进行深度介绍，譬如有基于 Listener/Client 模式的客户端跨域通信工具、跨域 React 组件、跨域的安全 WeakMap、基于 iFrame 的 fetch 请求代理等等；更多跨域相关讨论参考这里。

• 访谈：Bustle 的 GraphQL 实践：Facebook 将 GraphQL 定义成“一门 API 查询语言以及一个支持查询现有数据的运行时”。REST 通过向 REST 端点发送请求获取数据，而 GraphQL 允许客户端指定它们想要的数据。当 Facebook 公司内部开始大规模使用 GraphQL 时，社区才刚刚开始使用 GraphQL。InfoQ 采访了来自 Bustle 的工程总监 Steve Faulkner，谈论了 GraphQL 的相关问题以及 Bustle 如何使用 GraphQL，并为想要采用 GraphQL 的团队提供了一些建议。更多 GraphQL 相关资料参考这里。

• 现代 JavaScript 技术栈: 本文是对于现代 JavaScript 技术栈的高屋建瓴的盘点，希望能够为那些还停留在旧时代的开发者提供完整的 2017 年 JavaScript 技术概念。本文首先阐述了所谓传统开发方式的面貌，然后依次介绍了包管理器 npm、JavaScript 模块打包工具 Webpack、代码语法转换工具 Babel、任务运行工具 Npm Scripts 等；更多 JavaScript 相关资料参考这里。

深度阅读

深度思考，升华开发智慧

• 深入 Vue.js 2.5 类型支持: Vue.js 2.5 着重提升了 TypeScript 的类型支持，使得开发者不仅仅能通过类组件接口来获得正确的类型定义，还能直接从内置的接口中获取类型，本文则是对于 Vue.js 2.5 中的类型支持进行详细阐述，展示了 TypeScript 中强大的类型系统是如何被用于流行的框架。本文依次讨论了 this 对象、Mapping Computed、PropTypes 以及兼容性等内容；更多 Vue.js 相关资料参考这里。

• Napa.js: Napa.js 是 Microsoft 开源的基于 V8 的多线程 JavaScript 运行时，其最初被用于解决 Bing 中高 CPU 占用的服务。随着该项目的不断发展，开发团队发现其同样能够被用于解决 Node.js 中 CPU 密集型的任务，即将 JavaScript 代码运行在多个隔离的 V8 运行时中，并且为不同运行时之间提供数据通信服务。Napa.js 能够像普通的 Node.js Module 一样被引入到项目中，同时也能不依赖于 Node.js 而被嵌入到某个宿主进程中。更多 JavaScript 相关资料参考这里。

• Key Reinstallation Attacks: 本周，所谓的 KRACK 攻击占据了新闻头条，其能够突破大部分 WiFi 硬件设备上使用的 WPA2 加密体系，窃听用户机密；虽然很多的设备商已经更新了他们的系统或者提供了软件更新，这起事件也为我们敲响了警钟。在本次事件中使用 HSTS 预加载的网页并没有受到影响，也提醒了我们应该考虑是否将该头部声明添加到网站中。

开源项目

乐于分享，共推前端发展

• accessibilityjs: accessibilityjs 是由 GitHub 开源的界面可访问性错误扫描工具，其被用于了开发与生产环境下页面中不可访问的元素发现。accessibilityjs 会将那些不可访问的元素添加错误标识，包括了 ImageWithoutAltAttributeError, ElementWithoutLabelError,LinkWithoutLabelOrRoleError, LabelMissingControlError, InputMissingLabelError, ButtonWithoutLabelError, ARIAAttributeMissingError。

• design-blocks: 基于 Bootstrap 构建的超过 170 个设计块，能够帮助设计师快速设计现代网站；design-blocks 主要包括了响应、通讯录、内容、特性、页脚、表单、页头、价格、团队、证明书等等组件。

• Electron Webpack Dashboard：Electron Webpack Dashboard 对于 Webpack Dashboard 的扩展，为了方便各个平台的用户都能稳定、便捷地使用美观的 Webpack 控制台。Electron Webpack Dashboard 1.0 版本能够稳定支持 Webpack 2 与 Webpack 3，同时修复了早前版本存在的一些问题；而下一步 Electron Webpack Dashboard 将会专注于提供单机多实例并发的功能，同时针对 macOS 提供多 Tab 页，针对 Linux 与 Windows 提供多窗口的支持。

• Smooth Scrollbar: Smooth Scrollbar 允许我们自定义跨浏览器的高性能滚动条，它使用 CSS3 的 translate3d 属性来实现惯性滚动。Smooth Scrollbar 还提供了丰富的插件系统与易用的插件接口，方便开发者根据自身地业务需要灵活定制。

巅峰人生

• 程序员是手艺人，如何让自己的技能变现？: 本文摘自陈皓(左耳朵耗子)在极客时间 App 开设的付费专栏“左耳听风”，是他对自身技术成长道路的分享。本文聚焦于如何让自己的技能变现，从千里之行基于跬步、关注有价值的东西、找到能体现价值的地方、动手能力很重要、关注技术付费点、提升自己的能力和经历、找到有价值的信息源等几个方面进行考虑。

前端之巅

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