[笔记]关于ES6中import和export20210331

说明

以下内容是本人在学习过程中的一些笔记，可能会有错误。如有错误，欢迎指正。

概述

ES6之后实现了模块功能，ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。ES6模块本身不是对象，所以在引用的过程中是不能够引用自身的。这和CommonJS是不同的。

ES6模块的使用

export和import的使用

export命令用于规定模块的对外接口。
使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。
一个模块就是一个独立的文件，在外部是访问不到内部变量的。那么我们可以通过export将某个变量导出。

导出变量

// profile.js
export const a = 10;
export const b = 20;

或

const a = 10;
const b = 20;
// 可以一次导出多个变量 推荐这种写法，这样写可以一眼就看出导出了哪些变量
export { a, b };

导入变量

// main.js
import { a, b } from './profile.js';

// main.js
import { a, b } from './profile.js';

导出函数或类

 // profile.js
 // 导出函数
export function a() {
   console.log('我是函数a')
}

或

// profile.js
// 导出函数
function a() {
  console.log('我是函数a')
}
function b() {
  console.log('我是函数b')
}
// 导出时可以起别名 不过我个人感觉没什么必要 定义时取什么名那么导出时也导出什么名字 这样不容易乱
// export { a as aFn, b as bFn}
export { a, b };

// profile.js
// 导出类
export class A {
  constructor(name) {
  	this.name = name
  }
}

导入函数或类

 // main.js
 // 可以给导入的函数起个别名 那么我们在使用的时候就用这个别名即可
 // import { a as aFn} from './profile.js'
import { a, A } from './profile.js';
// aFn();
a(); // 我是函数a
const obja = new A('obja');
console.log(obja.name);	// obja

整体导入

 // main.js
import * as profile from './profile.js';
profile.a(); // 我是函数a
const obja = new profile.A('obja');
console.log(obja.name);	// obja

export default命令

在每个模块中只能写一个export default命令，它的作用是导出的时候导出当前模块的默认值。由于每个模块只能使用一次export default命令。所以说我们不需要在导入导出的时候以接口的形式导出。即不需要加上{}

例如：

// profile_default.js
export default function() {
	console.log('导出的默认函数，这里函数若为非匿名函数其作用与匿名函数是一样的，导入的时候这个非匿名函数的函数名是无效的')
}

// 或者可以写成
// function foo() {
// 	console.log('我是foo函数')
// }
// export default foo;

// main.js
// 注意不要写成 import { foo } from './profile_default.js';
// 这里面的foo是可以随便取名字的
import foo from './profile_default.js';

export default相当于导出default这个变量或方法，所以我们在导出的时候不能又以变量声明的形式导出。

export default var x = 10;	// 不允许
export default 10 	// 允许 本质上是把10赋予给default并导出

复合写法

export { a, b } from './myModule.js';

// 上述写法相当于
import { a, b } from './myModule.js';
export { a, b };

import()

上面说到的import { xxx } from './xxx.js’都是静态加载的。也就是会在加载文件在模块的顶层立马加载。
而import()是动态加载模块，只有执行到了这一行，那么才进行加。import()返回的是一个Promise对象
适用于
1.按需加载
2.条件加载
3.动态的模块路径

最后一些注意点

1.ES6模块中将自动采用严格模式
2.ES6 模块之中，顶层的this指向undefined，即不应该在顶层代码使用this。
3.import引入的变量都是只读的 修改的话会报错。
4.由于import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。