vue3.0都支持ES6了，你还对前端新特性没有了解吗？(一)

ok,今天乘着我学习总结的这个机会，主要是为我自己总结一下这些新特性，欢迎留言指教(注意本文并不全面)

HTML5新特性

首先就是近俩年小伙伴发现的，暧!怎么最近不见FLASH插件了，浏览网页可以用HTML5播放器了，没错了，这个就是新特性之一

1.1 视频格式

浏览器支持的视频格式有：MP4、WebM、OGG

浏览器	MP4	WebM	OGG
Internet Explorer	Yes	NO	NO
Chrome	Yes	Yes	Yes
Firefox	NO	Yes	Yes
Safari	Yes	NO	NO
Opera	NO	Yes	`Yes

1.2 音频格式

浏览器支持的音频格式：mp3、wav、ogg

浏览器	MP3	WAV	OGG
Internet Explorer	Yes	NO	NO
Chrome	Yes	Yes	Yes
Firefox	NO	Yes	Yes
Safari	Yes	YES	NO
Opera	NO	Yes	`Yes

这是一个简单的弹幕功能代码

2.全屏API

全屏API用于控制某个HTML Element占满整个屏幕。

• 进入全屏模式

//W3C建议
HTMLElement.requestFullscreen()

//Chrome、safari、Opera浏览器
HTMLElement.webkitRequestFullScreen()

//Firefox
HTMLElement.mozRequestFullScreen()

//Internet Explorer/Edge
HTMLElement.msRequestFullscreen()

兼容浏览器的写法：

function enterFullscreen(element){
	if(element.requestFullscreen){
    	element.requestFullscreen()
    } else if(element.webkitRequestFullScreen){
        element.webkitRequestFullScreen()
    } else if(element.mozRequestFullScreen){
        element.mozRequestFullScreen();
    } else if(element.msRequestFullscreen){
        element.msRequestFullscreen();
    }
}

• 退出全屏模式

//W3C建议
document.exitFullscreen()

//Chrome、safari、Opera
document.webkitExitFullScreen()

//Firefix
document.mozCancelFullScreen()

//Internet Explorer/Edge
document.msExitFullscreen()

兼容浏览器的写法：

function exitFullscreen(){
    if(document.exitFullscreen){
		document.exitFullscreen();
    } else if(document.webkitExitFullScreen){
		document.webkitExitFullScreen();
    } else if(document.mozCancelFullScreen){
        document.mozCancelFullScreen();
    } else if(document.msExitFullscreen){
        document.msExitFullscreen();        
    }
}

3.Canvas

这是一个画布

3.1SVG

代表可缩放矢量图形
SVG用于为Web定义图形
SVG是W3C的建议

SVG与Canvas区别

SVG适用于描述XML中的2D图形的语言
Canvas随时随地绘制2D图形(使用JavaScript)
SVG是基于XML的，这意味着每个元素在SVG DOM中都可用。你可以为每个元素添加JavaScript事件处理程序
在SVG中，每个绘制的形状都会被记忆为一个对象。如果SVG对象的书香发生变化，浏览器可以自动重新渲染形状。
Canvas是一像素一像素地渲染。在画布中，一旦图形绘制好了，就会被浏览器遗忘。如果你想改变某一个的位置，整个场景都需要重新绘制，包括可能已经被图形覆盖的任何对象

4.Drag

拖放是HTML5的新特性，即将对象从一个位置抓取到另外的一个位置，在HTML5任何元素都可以拖放。

为解决浏览器的兼容性，建议在被拖放的对象上添加draggable="true"属性。

DragEvent事件接口

DragEvent是表示拖、放事件的接口，该接口继承自MouseEvent和Event接口。

语义化标签

5.Input新属性

师哥讲的详细

1.Multer中间件

Multer中间件可以实现处理<input type="file">类型的表单数据。

2. UUID

UUID（Universally Unique Identifier）,通用唯一标识符，其目的是为了让分布式系统中所有的元素都能存在唯一的标识信息（主要指文件名称）。

UUID是一组由32位的16进制数字组成的字符串，以短横线进行分隔，形式为`8-4-4-4-12

3. FormData 对象

FormData对象提供用键/值对表示的表单数据，经过它的数据可以用AJAX提交

4. DataTransfer`对象

• files属性

当页面中不存在<input type="file">时，可通过DataTransfer对象的files 属性来获取被拖放的文件对象，其返回FileList的对象

FileList DataTransfer.files

• FileList对象

FileList对象通过来源于HTML 表单的<input type="file">元素，也可能来源于用户的拖放操作。

重要的来了

1.WebStorage

web storage提供了一种比cookie更加直观方式来存储数据，其结构为键/值对

web storage中提供两种存储机制：

localStorage，为每个指定的源维护一个独立的区域，该区域中的数据即使在浏览器关闭后仍然存在，除非人为手动清除。

sessionStorage，为每个指定的源维护一个独立的区域，该区域中的数据只在浏览器的会话期间有效。

这两种机制可以通过window.sessionStorage和window.localStorage进行访问。

2.websocket

简单来说它是一种及时通讯协议，做聊天室啊，疫情动态图需要用到它
详情请见官方文档

疫情动态图

3.webworker

简单介绍一下什么是web worker。我们都知道在浏览器中javascript的执行是单线程的，页面上的javascript在执行时会阻塞浏览器的响应，这非常影响用户体验，所以ajax应运而生了。ajax的出现使得页面在等待服务器响应的这段时间内不再发生阻塞，但是这仍然没有改变代码单线程执行的本质，这也意味着我们依旧不能把耗费时间的复杂运算放在页面上执行。而web worker的出现弥补了这个缺点。

页面上单线程执行的javascript是主线程（我们通常写的javascript都在主线程中执行），new出来的web worker对象为子线程，只有主线程中的代码执行时会导致阻塞，子线程则不会，这表示部分耗费时间的复杂运算完全可以从后台挪到前台来完成。
深入了解戳这里