96
yscmh 关注
2018.08.22 18:47* 字数 599 阅读 33评论 1喜欢 1
1.export 命令
export命令用户规定模块的对外接口
一个模块就是一个独立的文件,该文件内部的所有变量,外部无法获取,如果希望外部能够读取内部的某个变量,就必须使用export关键字输出该变量
用法1
使用export命令输出变量。
export var firstName = 'Michael';
export var lastName = 'Jackson';
用法2
在export命令后面，使用大括号指定所要输出的一组变量
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};
注意:export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。
// 报错
export 1;
// 报错
var m = 1;
export m;
正确写法:
// 写法一
export var m = 1;
// 写法二
var m = 1;
export {m};
// 写法三
var n = 1;
export {n as m};
2.import命令
import命令用于输入其他模块提供的功能,使用export命令定义了模块的对外接口以后,其他js文件就可以通过import命令加载这个模块
1.import命令接受一对大括号,里面指定要从其他模块导入的变量名,大括号里面的变量名,必须与被导入模块对应接口的名称相同
// main.js
import {firstName, lastName, year} from './profile.js';
2.如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名
import { lastName as surname } from './profile.js';
3.import命令输入的变量都是只读的,因为他的本质是出入家口,不逊在加载模块的脚本里面,改写接口
import {a} from './xxx.js'
a = {}; // Syntax Error : 'a' is read-only;
3.export default
1.Export default命令为模块指定默认输出,使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载,但是用export default就不需要
2.使用export default默认输出
// export-default.js
export default function () {
console.log('foo');
}
上面代码是一个模块文件export-default.js，它的默认输出是一个函数,其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。
// import-default.js
import customName from './export-default';
customName(); // 'foo'
上面代码的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，不使用大括号。
4.比较一下默认输出(export default)和正常输出(export)。
第一组 默认输出
export default function crc32() { // 输出
// ...
}
import crc32 from 'crc32'; // 输入
第二组 正常输出
export function crc32() { // 输出
// ...
};
import {crc32} from 'crc32'; // 输入
*上面代码的两组写法，第一组是使用export default时，对应的import语句不需要使用大括号；第二组是不使用export default时，对应的import语句需要使用大括号。
*export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。
小礼物走一走，来
网友评论