项目开发常用es6介绍

 

1、块级作用域 let const

 

2、箭头函数及this指向

 

3、promise、asnyc await语法

 

4、模块化 module export和import

 

5、解构赋值、字符串模板

 

……

 

Module

 

Module即模块的意思，在一些小项目中可能用不到这个概念。但是对于一些大型的、复杂的项目尤其在多人协作的情况下几乎是必须的。

 

在 ES6 之前，最主要的有 CommonJS 和 AMD 两种模块化解决方案。前者用于服务器，后者用于浏览器。ES6 的出现实现了模块功能，而且实现得相当简单完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

 

简单的说ES6 模块是通过export命令指定输出的代码，再通过import命令导入

 

下面我们直接通过代码来演示：

 

<!

 

DOCTYPE html

 

>

 

<

 

html

 

>

 

<

 

head lang

 

=

 

"en"

 

>

 

<

 

meta charset

 

=

 

"UTF-8"

 

>

 

<

 

title

 

></

 

title

 

>

 

</

 

head

 

>

 

<

 

body

 

>

 

<

 

script type

 

=

 

"module"

 

>

 

//index.html

 

import

 

*

 

 as util from 

 

"./js/scrpit.js"

 

;

 

//用星号（*）指定一个对象，所有输出值都加载在这个对象上面

 

 util

 

.

 

func1

 

()

 

//1

 

 util

 

.

 

func2

 

()

 

//2

 

 console

 

.

 

log

 

(

 

util

 

.

 

a

 

==

 

3

 

)

 

//true

 

</

 

script

 

>

 

</

 

body

 

>

 

</

 

html

 

>

 

//script.js

 

export

 

function

 

 func1

 

()

 

{

 

 console

 

.

 

log

 

(

 

1

 

)

 

}

 

export

 

function

 

 func2

 

()

 

{

 

 console

 

.

 

log

 

(

 

2

 

)

 

}

 

export

 

var

 

 a 

 

=

 

3

 

;

 

可以看到body里面的script标签与我们平常写的稍有不同，加入了type="module"属性，这样浏览器才会知道这是一个 ES6 模块。