前端每周清单第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，注明“前端之巅投稿”。