【ES6标准入门】JavaScript中的模块Module语法的使用细节：export命令和imprt命令详细使用，超级详细！！！

😁 作者简介：一名大四的学生，致力学习前端开发技术
⭐️个人主页：夜宵饽饽的主页
❔ 系列专栏：JavaScript进阶指南
👐学习格言：成功不是终点，失败也并非末日，最重要的是继续前进的勇气

​🔥​前言：

本篇是关于js中最常用的模块语法，import和export命令的使用细节，暴露和导出js语法时应该注意什么，这非常重要，了解到这些细节，会让js语法代码更加的严谨和健壮，希望可以帮助到大家，欢迎大家的补充和纠正

第22章 Module语法

22.1 概述

​ 在ES6之前，社区制定了一些模块加载方案，最主要的有CommonJS和AMD两种，前者用于服务器，后者用于浏览器。ES6在语言规格的层面上实现了模块功能，而且实现的相当简单，完全可以取代现有的CommonJS和AMD规范，称为浏览器和服务器通用的模块解决方案

背景：

​ JavaScript一直没有模块体系，无法将大程序拆分成互相依赖的小文件，再用简单的方法将它们拼装起来，其他语言都有这项功能，比如Runby的require，Python的import，甚至连CSS都有@import，但是JavaScript没有任何对这方面的支持，这对于开发大型，复杂的项目而言是一个巨大的障碍

​ ES6模块设计思想是想尽量静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量，CommonJS和AMD模块都只能在运行是确定这些东西，比如CommonJS模块就是对象，输入时必须查找对象属性

//CommonJS模块
let {stat,exists,readFile} = require('fs')

//等同于
let _fs=require('fs')
let stat=_fs.stat
let exists=_fs.exists
let readfile=_fs.readfile
1
2
3
4
5
6
7
8

​ 上面代码的实质是整体加载fs模块（即加载fs所有的方法),生成一个对象（_fs)，然后再从这个对象上读取3个方法，这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时进行“静态优化”

​ ES6模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入

//ES6模块
import {stat,exists,readFile} from 'fs'
1
2

​ 上面的代码的实质是从fs模块加载3个方法，而不加载其他方法，这种加载称为“编译时加载”或者静态加载，即ES6可以再编译时就完成模块加载，效率比CommonJS模块的加载方式高，当然，这也导致ES6模块本身无法被引用，因为它不是对象

​ 由于ES6模块时编译时加载，使得静态分析成为可能，有了它就能进一步拓展JavaScript的语法，比如引入宏和类型检验这些只能靠静态分析实现的功能。

​ 除了静态加载带来的各种好处，ES6模块还有以下的好处

• 不再需要UMD模块格式，将来服务器和浏览器都会支持ES6模块格式
• 将来浏览器的新API可以用模块格式提供，不再需要做成全局变量
• 不再需要对象作为命名空间（Math对象）,未来这些功能可以通过加载模块来提供

22.2 严格模式

ES的模式自动采用严格模式，不过有没有在模块头部加上use strict

严格模式主要有以下限制

• 变量必须声明后再使用
• 函数的参数不能有同名属性，否则报错
• 不能使用with语句
• 不能对只读属性赋值，否则报错
• 不能使用前缀0表示八进制，否则报错
• 不能删除不可删除的属性，否则报错
• 不能删除变量 delete prop，会报错，只能删除树丛delete global[prop]
• eval不会再它的外层作用域引入变量
• eval和arguments不能被重新赋值
• arguments不会自动反映函数参数的变化
• 不能使用arguments.callee
• 不能使用arguments.caller
• 禁止this指向全局对象
• 不能使用fn.caller和fn.arguments获取函数调用的堆栈
• 增加保留字（比如protected,static 和 interface)

❗️ 注意：尤其需要注意this限制，在ES6模块之中。顶层的this指向undefined，即不应该在顶层代码中使用this

22.3 export命令

1 语法

模块功能主要有两个命令组成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能

一个模块就是一个独立文件，该文件内部的所有变量，外部无法获取，如果希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量

1. 单个语句，逐条暴露

   //profile.js
   
   //输出变量
   export var firstName='Michael'
   export var lastName='Jackson'
   export var year=1958
   
   //输出函数或者类
   export fuction multiply(x,y){
       return x*y
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11

2. 多条语句，统一暴露（⭐️ 推荐这种写法）

   //profile.js
    var firstName='Michael'
    var lastName='Jackson'
    var year=1958
    export {firstName.lastName,year}
   1
   2
   3
   4
   5

3. 通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名

   function v1(){}
   function v2(){}
   
   export {
   	v1 as streamV1,
       v2 as streamV2,
       v2 as streamLatestVersion
   }
   1
   2
   3
   4
   5
   6
   7
   8

   上面的代码使用as关键字重命名了函数v1和v2的对外接口，重命名后，v2可以用不同的名字输出两次

2. 注意点：

1. export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系

   //报错
   export 1;
   
   //报错
   var m =1
   export m;
   
   //正确的写法
   
   //写法一
   export var m=1
   
   //写法二
   var m=1
   export {m}
   
   //写法三
   var m=1
   export{n as m}
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19

   上面两种写法都会报错，因为没有提供对外的接口，第一种写法直接输出1，第二种写法通过变量m依然直接输出1，1只是一个值，不是接口

   上面3中写法都是正确，规定了对外的接口m

2. export语句输出的接口与其对应的值是动态绑定关系，即通过该接口可以取到模块内部实时的值

   export var foo='bar';
   setTimeout(()=>foo='baz',500)
   1
   2

   上面的代码输出变量foo，值为bar，500ms之后变成baz

3. export命令可以出现在模块的任何位置，只要处于模块顶层就可以，如果处理块级作用域内，就会报错，下一节的import命令也是如此，这是因为处于条件代码块之中，就没法做静态优化，违背模块设计初衷

   function foo(){
       export default 'bar' //SyntaxError
   }
   
   foo()
   1
   2
   3
   4
   5

22.4 import命令

1. 语法

使用export命令定义了模块的对外接口以后，其他的JS文件就可以通过import命令加载这个模块了

//main.js
import {firstName,lastName,year} from './profile'\

function setName(element){
    element.textContent=firstName + ' '+lastName
}
1
2
3
4
5
6

上面的import命令用于加载profile.js文件，并从中输入变量，import命令接受一个对象（用大括号表示），里面指定要从其他模块导入的变量名，大括号中的变量名必须与被导入模块（profile.js)对外接口名称相同

如果想为输入变量重新去个名字，要在import命令中使用as关键字，将输入的变量重命名

import {lastName as surname} from './profile'
1

如果执行所加载的模块，可以这么写

import 'lodash'
1

上面的代码仅仅执行lodash模块，但是不会输入任何值

2. 注意点：

1. import 后面的from 指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略，如果只是模块名，不带有路径，那么必须有配置文件告诉JavaScript引擎该模块的位置

2. import命令具有提升效果，会提示到整个模块的头部首先执行

   foo()
   
   import {foo} from 'my_module'
   1
   2
   3

3. 由于import是静态执行，所以不能使用表达式和变量，只有在运行是才能得到结果的语法结构

   //报错
   import {'f'+'oo'} from 'my_module'
   
   //报错
   let module='my_module'
   import {foo} from module
   
   //报错
   if(x === 1{
       import {foo} from 'module1
   } else{
       import {foo} from 'module2'
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13

4. 如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次

22.5 模块的整体加载

处理指定加载某个输出值，还可以使用整体加载（即星号*）来指定一个对象，所有输出值都加载在这个对象上

//circle.js

export function area(radius){
    return Math.PI*radius*radius
}

export function circumference(radius){
    return 2*Math.PI*radius
}

//加载模块，逐一加载
import {area,circumference} from './circle'

console.log('圆面积：'+area(4))
console.log('圆周长：'+circumference(14))


//统一加载
import * as circle from './circle'

console.log('圆面积：'+circle.area(4))
console.log('圆周长：'+circle.circumference(14))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

❗️ 注意：模块的整体加载所在对象（上例是circle）应该是可以静态分析的，所以不允许运行时改变。

import * as circle from './circle'

//下面两行都是不允许的
circle.foo='hello'
circle.area=function(){}
1
2
3
4
5

22.6 export defaule命令

​ 从前面的例子可以看出来，使用import命令时用户需要知道所要加载的变量名或函数名，否则无法加载，但是，用户肯定希望快速上手，未必由于阅读文档去了解模块有哪些属性和方法

​ 为了方便用户，使其不用阅读文档就能加载模块，可以使用export default命令为模块指定默认输出。

export default function(){
    console.log('foo')
}

import customName from './export-default'
customName() //'foo'
1
2
3
4
5
6

上的代码中，就不需要知道原模块输出的函数名，需要注意的是，这时import命令后面不使用大括号，而关于输出语句的写法可以有下面两种方式

export default function foo(){
    console.log('foo')
}

//或者写成

function foo(){
    console.log('foo')
}

export default foo
1
2
3
4
5
6
7
8
9
10
11

上面的代码中的foo函数的函数名foo在模块外部是无效的，加载时视为匿名函数

📝 使用细节：

1. export default命令用于指定模块的默认输出，显然，一个模块只能有一个默认输出，因此，export default命令只能使用一次，所以import命令后面的才不用加大括号，因为只可能对应一个方法

2. 如果想在一条import语句中同时输入默认方法和其他接口，可以写成下面这样：

   import _,{each,each as forEach} from 'lodsh'
   
   
   //对应的代码语句
   export default function(obj){
       //...
   }
   
   export function each(obj,iterator,context){
       //...
   }
   
   export {each as forEach}
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13

⭐️ export default语句的本质

本质上，export default就是输出一个叫作default的变量或者方法，然后系统允许我们为它取任意名字，所以，下面的写法是有效的

//modules.js
function add(x,y){
    return x*y
}
export {add as default}

//等同于
//export default add

//app.js
import{ default as xxx } from 'modules'
//等同于
import xxx from 'modules'
1
2
3
4
5
6
7
8
9
10
11
12
13

正是因为export default命令其实只是输出一个叫作default的变量，所以它后面不能跟变量声明语句

//正确
export var a=1

//正确
var a=1
export default a;

//错误
export default var a=1
1
2
3
4
5
6
7
8
9

上面的代码中，export default a的含义是将变量a的值赋给变量default，所以最后一种写法会报错

同样，因为export default本质是将该命令后面的值赋给default变量以后再默认，所以直接将一个值写在export default之后

//正确
export default 42

//报错
export 42
1
2
3
4
5

22.7 export与import的复合写法

如果模式之中先输入后输出同一个模块，import语句可以与export语句写在一起

export {foo,bar} from 'my_module'

//等同于
import{foo,bar} from 'my_module'
export {foo,bar}
1
2
3
4
5

上面的代码中，export和import可以结合写在一起写成一行

模块的接口改名和整体输出也可以采用这种写法

//接口改名
export {foo as myFoo} from 'my_module'

//整体输出
export * from 'my_module'
1
2
3
4
5

📝 使用细节：

1. 默认接口的写法如下：

   export {default} from 'foo'
   1

2. 具名接口改为默认接口的写法如下

   export {es6 as default} from './someModule'
   
   //等同于
   import {es6} from './someModule'
   export default es6
   1
   2
   3
   4
   5

3. 默认接口也可以改为具名接口

   export {default as es6} from './someModule'
   1

4. 有三种import语句没有对应的复合写法

   import * as someIdentifier from 'someModule'
   import someIdentifier from 'someModule'
   import someIdentifier,{ namedIentifier } from 'someModule'
   1
   2
   3

22.8 模块的继承

模块之间也可以继承

假设有一个circleplus模块继承了circle模块

//circleplus.js
export * from 'circle'
export var e=2.718
export default function(x){
	return Math.exp(x)
}
1
2
3
4
5
6

上面的export * 表示输出circle模块的所有属性和方法

❗️ 注意：export命令会忽略circle模块的default方法，之后，又输出了自定义的e变量和默认方法

加载上面模块的写法

import * as math from 'circleplus'
import exp from 'circleplus'
console.log(exp(math.e))
1
2
3

上面代码中的import exp表示，将circleplus模块的默认方法加载为exp方法

22.9 跨模块常量

前面介绍const 命令的时候说过，const声明的常量只能在当前代码块内有效，如果想设置跨模块的常量（即跨多个文件），或者说一个值、要被多个模块共享，可以采用下面的写法

//constants.js模块
export const A=1
export const B=2
export const C=3

//test1.js模块
import * as constants from './constants'
console.log(constants.A) //1
console.log(constants.B) //2

//test2.js模块
import {A,B} from './constants'
console.log(A) //1
console.log(C) //3
1
2
3
4
5
6
7
8
9
10
11
12
13
14

🌻 小建议：如果要使用的常量非常多，可以建立一个专门的constants目录，将各种常量写在不同的文件里面并保存在该目录下

export const db={
	url:'https://www.csdn.net/',
    admin_username:'夜宵饽饽',
    admin_password:'xxxxxxxx'
}

//constants/user.jd
export const users=['root','admin','staff','cex','chief']
1
2
3
4
5
6
7
8

然后将这些文件输出的常量合并在index.js中

//constants/index.js
export {db} from './db'
export {user} from './users'
1
2
3

使用的时候，直接加载index.js即可

//script.js
import {db,users} from './constants'
1
2

22.10 import()

22.10.1 简介

import命令会被JavaScript引擎静态分析，先于模块内的其他模块执行（称为连接更合适），所以下面的代码会报错

//报错
if(x === 2){
	import MyModule from './myModule'
}
1
2
3
4

上面的代码中，引擎处理import语句是在编译时，这时不会分析或执行if语句，所以import语句放在if代码块之中毫无意义，因此会报句法错误，而不是执行时错误

这样的设计固然有利于编译器提高效率，但也导致无法在运行时加载模块。在语法上，条件加载不可能实现。

因此，有一个提案（现已经实现），建议引入import()函数，完成动态加载。

import(specifier)
1

import函数的参数specifier指定要加载的模块的位置，import命令能够接受什么参数，import()函数就可以接受什么参数，后者为动态加载。

import()函数返回一个Promise对象，下面是一个例子

const main=document.querySelector('main')

import('./section-module/${someVariable}.js')
.then(module => {
    module.loadPageInto(main)
})
.catch(err => {
    main.textContent=err.message
})
1
2
3
4
5
6
7
8
9

import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用，它是运行时执行，也就是说，运行到这一句便会加载模块。另外，import()函数所加载的模块没有静态连接关系，这点也与import语句不相同

22.10.2 适用场合

1. 按需加载

   button.addEventListener('click',event=>{
   	import('./dialogBox.js')
       .then(dialogBox => {
           dialogBox.open()
       })
       .catch(error => {
   	//Error
       })
   })
   1
   2
   3
   4
   5
   6
   7
   8
   9

2. 条件加载

   if(condition){
   	import('moduleA').then(...)
   }else{
   	import('moduleB').then(...)
   }
   1
   2
   3
   4
   5

3. 动态加载模块路径

   import(f()).then(...)
   1

22.10.3 注意点

1. import()加载模块成功以后，这个模块会作为一个对象当作then方法的参数，因此可以使用对象结构赋值的语法，获取输出接口

2. 如果模块有default输出接口，可以用参数直接获得

   import('./myModule.js').then(myModule => {
   	console.log(myModule.default)
   })
   
   //也可以使用具名形式输入
   import('./myModule.js').then(({default:thenDefault}) => {
   	console.log(thenDefault)
   })
   1
   2
   3
   4
   5
   6
   7
   8

3. 如果想同时加载多个模块，可以采用Promise.all写法

   Promise.all([
    import('./amo.js'),
    import('./bmo.js'),
    import('./cmo.js')
   ])
   .then(([amo,bmo,cmo])=>{
       
   })
   1
   2
   3
   4
   5
   6
   7
   8

4. import也可以用在async函数中