策划｜秦云

前端周报聚焦大前端领域内容，帮助开发者了解本周前端热点； 分为新闻热点、开发教程、工程实践、深度阅读、开源项目等栏目。 欢迎关注【前端之巅】微信公众号（ID：），及时获取前端周报。

以下提到的所有文章全文均可在文末阅读原文或点击以下链接（点击带下划线的文字可跳转）：

新闻热点

国内外，最新前端动态

：7月11日，微信公开课微信小程序技术专场在微信举办。 会上，微信公布了面向开发者的技术计划。 三个方面。

未来的计划主要是：

：7 月 12 日，黑客入侵了维护者的 NPM 帐户，并将带有病毒的 -and- 包发布到 NPM 注册表。 当恶意软件包被安装后，计算机会自动下载并执行代码，然后发送. 包含攻击者的 NPM 访问令牌的文件。

该事件的起因是，受感染帐户的维护者在其他几个站点上设置了与 npm 相同的密码，并且未在其 npm 帐户上启用双因素身份验证。

恶意包包含在-@3.7.2和--@5.0.2中，目前这两个包已从npm中删除，这些包中的链接也已被删除。 npm 还撤销了 2018 年 7 月 12 日 12:30 UTC 之前颁发的所有访问令牌。 因此，受此攻击影响的所有访问令牌都不再可用。

：不久前，团队刚刚宣布放弃使用，而不到一个月后，在线教育机构移动团队也于近期宣布从App中移除使用开发的最后一批功能。 6月中旬，宣布RN将进行大规模重构。 这一系列的事件让很多正在使用的开发者心惊胆战，陷入恐慌。

在这篇文章中，团队将告诉大家它们的使用历史以及放弃它们的原因，也希望能给一些开发者一些参考和启发，看看它们是否适合使用。

开发教程

循序渐进，掌握基本功

如何使用 和 一起构建更好的应用程序将大大改善开发体验。

允许您以类型接口的形式定义复杂的定义。 当您想要在应用程序中使用复杂类型（例如具有其他属性的对象）时，严格审查可以减少出错的可能性。

在本文中，作者将向您展示如何使用代码来改进您的应用程序。

16中如何使用错误边界：16于2017年9月26日正式发布。16中可以使用错误边界这个新功能，它是一个组件。 它和它的子组件形成一个树形结构，可以捕获所有位置的错误，记录错误，并显示回退界面，避免让用户直接看到组件树的崩溃信息。 本文作者告诉您如何开始使用错误边界。

代码清理：如何重构和使用类：在较小的项目中，将所有组件方法保留在组件本身中效果很好。 在中型项目中，您可能会发现自己想要从组件中获取这些方法并成为“助手”。 在本文中，作者向您展示了如何使用类而不是导出单独的函数和变量来组织代码。

工程实践

立足实践，提示实际水平

：UI自动化测试，即通过模拟用户UI界面的手动操作，在代码中实现自动操作和验证的自动化测试方法。 十年前，PC Web 仍然是当时的世界，驱动 Web UI 的自动化测试仍然是主流。 五年前开发微信小程序用到什么技术，当测试人员逐渐熟悉API来编写UI自动化用例时，互联网的主战场已经逐渐从Web端转向了App端。 现在，App的UI自动化框架已经比较成熟了，比如、、、、等等。

框架如何避免或减少UI问题？ 笔者认为：

：随着移动互联网的快速发展，移动应用越来越注重用户体验。 最重要的元素之一是页面的加载速度。 如果冷启动时间过长、页面渲染时间过长、网络请求过慢等，都会直接影响用户体验。 因此，如何监控整个项目的加载速度成为一个重要的挑战。

随着美团业务的快速迭代，新的页面越来越多，业务逻辑越来越多，代码改动也越来越多。 这些不确定性会导致他们的测速部分的代码耦合到业务逻辑中。 并且需要人工维护，增加了成本和风险。 于是通过参考之前的一些解决方案，分析他们存在的问题，结合自身的特点，实现了一套不需要业务代码侵入的自动页面测速插件。 本文将对其原理进行解释和分析。

阮一峰教程（Demo合集）：是一个为浏览器构建模块脚本的前端工具。 它非常相似，但可以做更多的事情。 本文内容包括：安装指南、入口文件、多个入口文件、-、CSS-、、插件系统、如何加载第三方插件、环境变量、代码分离等15个demo。

深度阅读

深度思考，升华发展智慧

Vue手册：全面了解Vue：Vue可以说是今年最火的前端框架。 由于其简单性和良好的性能，逐渐受到很多开发者的青睐。 本文介绍了Vue的基本特性、如何构建Vue应用程序、深入理解Vue CLI、Vue组件、使用Vuex管理状态、使用Vue处理URL等20多个内容，Vue初级开发者可以点击进入 Pick 的原始链接。

Node前端指南：本指南主要针对了解Node但还不熟悉的前端开发人员。 本文包括Node版本选择、回调样式、模块系统、环境变量等10项内容。

开源项目