虽说是GDG分享会,其实前端部分是由成都FCC负责人水歌分享的,感谢各位大佬们的分享!下面献出一张现场照片(反正你们也不知道哪个是我23333)
前言
本次分享水歌主要讲了一下Chrome
要即将更新的75版本
的内容,以及已经提出,但是还未通过或者75版本
不会立即更新的功能,同时里面也有些已经推出但是很少用的功能。我只是个分享会的搬运工~
下面进入正题!
正题
1.Portal标签
Portal
是一个Google
即将推出的新的HTML
标签。在以往,我们如果要嵌套一个网页就会用iframe
操作,但是当iframe
展示页面之后url
并没改变,仍然是父级的url
。Portal
的出现就可以解决这个问题,当点击了Portal
标签跳转的页面之后,url
栏所显示的就是Portal
中展示的页面的url
。想详细了解的小伙伴可以看一下这篇文章:Google launches Portals, a new web page navigation system for Chrome。
2.分享API
Google
将提供自己的分享链接的API,无需再使用其他插件。
if(navigator.canShare())
navigator.share({
title: document.title,
text: '掘金',
url: 'https://juejin.im/timeline',
});
复制代码
canShare
是Navigator
的一个interface
,返回布尔类型值,如果返回值为true
那么就可以执行share
函数。share
函数中就是一个Objet
,内有text
、url
和title
三个字段,返回结果为一个Promise
对象。
3.形状检测API
Google
也将会推出各种形状检测API
比如TextDetector
、FaceDetector
等。其实去年FaceDetector
已经在Android
推出了只不,但是接下来也将会在浏览器推出相应接口。
4.原生类的增强
对整数类型进行了增强,比如多了BigInt
来处理长整型溢出问题,数字后面加上n
来表示短整型,同时还有推出了可以人为分割数字的功能:
// 解决了数位数的问题
const integer = 1_0000_0000;
console.log(integer); // 100000000
复制代码
5.全局对象
事实上,在不同的 JavaScript
环境中拿到全局对象是需要不同的语句的。在 Web
中,可以通过 window
、self
或者 frames
取到全局对象,但是在 Web Workers
中只有 self
可以。在 Node.js
中,它们都无法获取,必须使用 global
。在松散模式下,可以在函数中返回 this
来获取全局对象,但是在严格模式下 this
会返回 undefined
。
globalThis
提供了一个标准的方式去获取不同环境下的全局对象。它不像 window
或者 self
这些属性,而是确保可以在有无窗口的环境下都可以正常工作。所以你可以安心的使用 globalThis
,不必担心它的运行环境。使用如下:
if (typeof globalThis.setTimeout !== 'function') {
// no setTimeout in this environment!
}
复制代码
6.国际化API
国际化API主要是处理数据的格式化,比如:时间、金额、物理单位等。比如:
const name = ['Thoughtful valiant.', 'niuniu', 'George'];
const and = new Intl.ListFormat('zh-CH', {type: 'conjunction'}),
or = new Intl.ListFormat('zh-CN', {type: 'disjunction'});
console.log(`U can call me ${and.format(name)}`);
// U can call me Thoughtful valiant.、niuniu和George
console.log(`U can call me ${or.format(name)}`);
// U can call me Thoughtful valiant.、niuniu或George
复制代码
7. Promise新方法
我们常用的Promise.all()
和Promise.race()
其实并不全面,一个是全部resolve
返回结果,而另一个是不管resolve
还是reject
有结束的立马返回结果。
为了弥补不足,又添加了Promise.allSettled()
和Promise.any()
,前者是所有的结束之后返回结果(不论resolve
还是reject
),后者是只返回第一个resolve
的结果。
同时,我们现在在使用await
时必须嵌套在async
内,在更新之后,我们可以直接使用await
一个Promise
对象,不用再像下面一样再嵌套一个IIFE
:
(async function() {
await ...
}
)()
复制代码
8. 增加了弱引用类型
在现有的WeakMap
和WeakSet
等弱引用类型的基础上,又增加了WeakRef
和FinalizationGroup
来优化垃圾回收。
结语
今天水歌讲的大致就这些(删减了一些),就分享给大家!再次感谢各位大佬今天的分享,Respect!
Chrome Beta版本链接:Chrome-Beta;
同时大家可以从这里查看75版本
的Chrome Dev Tool新特性!