前端周报：Vue 3 公开代码库；NPM 发布 6.12.0；Sass 推出模块系统

前端周报专注大前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点，分为新闻热点、深度阅读、开源项目 & 工具等栏目。欢迎关注【前端之巅】微信公众号（ID: frontshow），及时获取前端周报内容。

新闻热点

前端新闻

Vue 3.0 代码仓库公开

Vue 3.0 完全由 TypeScript 编写，目前还处于 alpha 阶段，仓库地址：

https://github.com/vuejs/vue-next

Vue 3 计划于 2020 年第一季度发布，Vue 3 将更小、更快、更易于维护。其重要变化之一是，受 React Hooks 的启发，新的 API 将允许使用基于函数的方式编写组件。用户可以将逻辑封装到“组合函数”中，并在组件之间重用该逻辑。新的 API 与当前语法 100％兼容，并且不会在短期内被弃用。

NPM 发布 6.12.0

现在，npm ci 针对 git 依赖关系运行准备脚本，修复 --no-optional 参数。engine 不匹配将再次显示的警告。

Firefox Preview Nightly 在 Android 和 Pixel 2 中 启用了 WebRender

Mozilla 的 WebRender 技术首次进入 Android。对于 Google Pixel 2 上的 Firefox Preview（Fenix）用户，最近在默认情况下启用了 WebRender。

WebRender 与 Firefox 57 中引入的 Stylo CSS 引擎一样，也来自 Mozilla 的下一代引擎 Servo，并以 Rust 编程语言编写。WebRender 是网页内容的渲染器，其工作方式更像游戏引擎，但针对网页内容渲染进行了优化，因此具有巨大的性能优势。

行业新闻

消息称 TeamViewer 系统后台被黑客组织 APT41 攻破

10 月 11 日，网上流传疑似深圳市网络与信息安全信息通报中心发出紧急通告，指出目前知名远程办公工具 TeamViewer 已经被境外黑客组织 APT41 攻破，提醒企业组织做好防护措施。

通报中心建议各单位采取以下主动防御措施：

• 近期停止使用 TeamViewer 软件。

• 在防火墙中禁止用于 TeamViewer 远程通讯端口 5938。

• 通过 Web 应用防火墙或其它设备禁止单位内主机回连 teamviewer.com 域名。

使用人工神经网络和人工蜂群优化进行语音识别

印度圣雄甘地特派团工程技术学院和杰比信息技术学院的研究人员开发出一种语音识别系统，研究人员在一系列人类语音音频片段上测试了他们的系统，并将其与传统的语音识别技术进行了比较。他们的技术优于其他所有方法，获得了显著的准确性得分。

研究人员开发的系统的独特之处在于使用了 OABC 优化算法来优化 ANN 的层和人工神经元。人工蜂群（ABC）算法旨在模拟蜜蜂的行为，以解决各种优化问题。研究人员在论文中写道：“该方法的灵敏度、特异性和准确性分别为 90.41％、99.66％和 99.36％，比所有现有方法都要好。”将来，语音识别系统可用于在各种环境中实现更有效的人机通信。此外，他们用于开发系统的方法可能会启发其他团队设计类似的模型。

在恐怖活动发生之前进行预测

数据科学家已经开发了一种预警模型，该模型可以基于前 10 次攻击，预测出恐怖组织在未来的致命程度。该模型利用了全球恐怖数据库（GTD）和 RAND 全球恐怖主义事件数据库（RDWTI）公开获得的数据。

深度阅读

介绍 Sass 的模块系统

Sass 模块系统是解决命名冲突的更强大的方案，新增 @use 和 @forward 规则，而 @import 将被 Sass 逐渐放弃。

https://css-tricks.com/introducing-sass-modules/

理解 JavaScript 中的 This, Bind, Call 和 Apply

在本文中，您将了解 this 根据上下文的隐式指向，您将学习如何使用 bind，call 和 apply 方法，明确指定的值 this。

https://www.digitalocean.com/community/conceptual_articles/understanding-this-bind-call-and-apply-in-javascript

实用的 css 自定义属性模式

本文作者一直在使用 CSS Custom Properties 来发现它们的价值，因为浏览器终于支持开发人员在生产中使用它们了。它们是如此有用和强大！

作者将 CSS 变量的用法归类。当然，开发人员可以随意使用 CSS 变量，但是在不同类别中考虑它们可能会帮助您理解使用变量的不同方式。

• 变量：基础知识。例如设置，在 color 任何需要的地方使用的品牌。

• 默认值：例如，默认值 border-radius 可以在以后覆盖。

• 层级覆盖：例如主题样式覆盖。

• 范围规则集：各个元素的有意变化。例如链接和按钮。

• Mixins：规则集旨在将其价值带入新的环境。

• 内联属性：从 HTML 中的内联样式传递的值。

https://css-tricks.com/patterns-for-practical-css-custom-properties-use/

Chrome 78 有哪些更新？

稳定版的 Chrome 78 将在 10 月 22 日发布，普通用户几乎感觉不到变化，但对于开发者而言，会有一些令人兴奋的新功能。

CSS 透明度百分比

opacity 属性当前接受介于 0（完全透明）和 1（完全不透明）之间的值。Chrome 78 还允许百分比从 0％到 100％：

/* identical styles */.style1 { opactity: 0.75; }.style2 { opacity: 75%; }

JavaScript Optional chaining

Optional chaining 是 ES2019 提议，它将节省您数小时的打字和调试工作。

let country = (user && user.address && user.address.country) || undefined;// chrome 78let country = user?.address?.country;

恶意行为限制

浏览器窗口卸载事件 unload、beforeunload 以及类似的 pagehide、visibilitychange 技术上这些事件被用于检查数据是否被保存，或记录用户分析数据。不幸的是，一小部分开发者可以用来添加代码破坏用户体验，从 Chrome 78 开始将不允许：

• 同步的 Ajax 请求 – 可以在 AllowSyncXHRInPageDismissal 策略标志中覆盖此请求，但是该标志还将在版本 82 中删除。

• 使用 window.open() 创建阻止页面关闭的弹窗。

短信接收器 API

短信文本消息通常用于验证电话号码或发送一次性密码，新的 SMS Receiver API 允许 Web 应用程序使用特定的格式约定读取发送给他们的 SMS 消息，以避免手动的用户交互。例如：

if (navigator.sms) {  try {    let { content } = await navigator.sms.receive();    console.log('SMS text:', content);  } catch (e) {    console.log('error', e);  }}

本机文件系统 API

本机文件系统 API 允许浏览器直接与用户本地设备上选择的文件进行交互。它可以用于从客户端 JavaScript 编辑照片、视频或文本文档，而无需上载和下载过程。

屏幕枚举 API

屏幕枚举 API 提供有关连接到用户设备的所有显示器的信息。在应用程序可以使用多个监视器的情况下（例如，提供面向公众的幻灯片和演讲者备注显示的演示文稿），这通常会很有用。

媒体元素 seekto 事件

Chrome 78 引入了一个新的 seekto 动作处理程序，当将播放移至时间轴上的特定点时会调用该处理程序。这可用于进行 DOM 更改，记录分析等。

WebSocketStream

WebSocket 消息到达的速度比浏览器所能应付的更快。在这种情况下，内存缓冲区可能溢出，或者 CPU 使用率将增加到浏览器无响应的程度。

WebSocketStream 取代 WebSocket API。它是基于 promise 的，并且集成了流，因此可以在接收到完整消息之前解析大量数据。

更多关于 Chrome 78 的更新

请访问相关网址查看。

https://developers.google.com/web/updates/2019/09/devtools

工具 & 库 & 资源

【Pokemon Friends】皮卡丘和妙蛙种子，通过 css(scss) 和 html 实现。

https://codepen.io/acupoftee/pen/YzzzYxj

【Parcel-app】parcel 版的 create-react-app。

https://parcelapp.netlify.com/

【moveable】movable 是可拖动、可调整大小、可缩放、可旋转、可扭曲、可捏、可分组、可捕捉的。

https://github.com/daybrush/moveable

【interview_internal_reference】2019 年阿里、腾讯、百度、美团、头条等技术面试题目及答案最新总结，专家出题人分析汇总。

https://github.com/0voice/interview_internal_reference