模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
export
1.一个模块就是一个独立的文件，它里面的所有变量外部无法访问。外部想要访问某一个变量，就先要使用export导出。
// xxx.js 文件就可以视为一个模块，下面导出它里面的变量
export var userName = 'pang';
export var age= 21;
或者使用大括号的方式 ( 推荐使用）：
var userName = 'pang';
var age= 21;
export {userName ,age}
2.export 也可以导出一个函数。
export function multiply(x, y) {
return x * y;
};
注意以下的导出方式是不对的：
export命令规定的是对外的接口, 1只是一个值，不是一个接口。（函数导出也是同理）
// 报错
export 1;
// 报错
var m = 1;
export m;
正确写法：
// 写法一
export var m = 1;
// 写法二
var m = 1;
export {m};
// 写法三
var n = 1;
export {n as m};
3.通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名，并且可以重命名多次。
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
4.export输出的接口是动态的，通过该接口，可以取到模块内部实时的值。
import 命令
1.使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。
import {userName ,age} from ./xxx.js;
- 也可以通过as给输入的变量重命名。
3.import命令输入的变量都是只读的，不允许在加载模块的脚本里面，改写接口。
import {a} from './xxx.js'
a = {}; // Syntax Error : 'a' is read-only;
上面代码中，脚本加载了变量a，对其重新赋值就会报错，因为a是一个只读的接口。但是，如果a是一个对象，改写a的属性是允许的。但是不建议这样做 。
4.不能使用表达式和变量。
// 报错 因为在静态执行的时候，没有办法拿到module 的值
let module = 'my_module';
import { foo } from module;
-
import语句会执行所加载的模块, 如下仅仅执行lodash模块，但是不输入任何值。并且加载了两次lodash，但是只会执行一次
import 'lodash';
import 'lodash';
export default
1.export default指定一个模块的默认输出。
// xxx.js
export default function () {
console.log('foo');
}
其他模块加载该模块时，import命令可以为该匿名函数指定任意名字, 这时就不需要知道原模块输出的函数名。
// xxx.js
import customName from './export-default';
正常输出和默认输出对比
// 第一组
export default function crc32() { // 输出
// ...
}
import crc32 from 'crc32'; // 输入
// 第二组
export function crc32() { // 输出
// ...
};
import {crc32} from 'crc32'; // 输入
2.本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。
export {add as default};
// 等同于
export default add;
正是因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。
特别注意： export default输出的是变量，export输出的是一个接口
// 正确
export var a = 1;
// 正确
var a = 1;
export default a;
// 错误
export default var a = 1;
// 正确
export default 42;
复合写法
在当前模块中导入变量然后又导出，foo和bar实际上并没有被导入当前模块，当前模块件就相当于一个中转站。
export { foo, bar } from 'my_module';
// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };
模块的接口改名和整体输出，也可以采用这种写法。
// 接口改名
export { foo as myFoo } from 'my_module';
// 整体输出
export * from 'my_module';
import()
因为import命令会代码执行之前解析，所以只能放在顶层。例如放在代码块或者函数里面都是不行的。
// 报错
if (x === 2) {
import MyModual from './myModual';
}
针对这个问题，引入import()函数，完成动态加载。import()返回一个 Promise 对象,所以后面可以使用then。
import('./section-modules/${someVariable}.js').then()
import()函数可以用在任何地方。它是运行时执行，即什么时候运行到这一句，就会加载指定的模块。另外，import()函数与所加载的模块没有静态连接关系，这点也是与import语句不相同。
注意点：
- import()允许模块路径动态生成。如下调用函数f，返回要加载的模块。
import(f())
.then(...);
- import()加载模块成功以后，这个模块会作为一个对象，当作then方法的参数。因此，可以使用对象解构赋值的语法，获取输出接口。
import('./myModule.js')
.then(({export1, export2}) => {
// ...·
});
- 如果模块有default输出接口，可以用参数直接获得。
import('./myModule.js')
.then(myModule => {
console.log(myModule.default);
});
也可以使用具名的形式输入
import('./myModule.js')
.then(({default: theDefault}) => {
console.log(theDefault);
});
- 同时加载多个模块
Promise.all([
import('./module1.js'),
import('./module2.js'),
import('./module3.js'),
])
.then(([module1, module2, module3]) => {
···
});
- import()也可以用在 async 函数之中使用。
网友评论