es6模块化 export 和 export default 的使用

     翻看公司某组价的代码时，export 和 export default 各种混用，再加上本来对这个就了解的不细致。导致虽然代码能看懂，但是看起来感觉乱的不行，还是先翻看理解一下了，其实还是很简单的。下面总结整理一下。

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

1、export

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

export写法一般如下：

var firstName = 'name';
var lastName = 'last';
var year = 1996;

export { firstName, lastName, year };

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

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

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

 

2、import

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

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

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

当然，如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名，这也是上文说通常情况下，export输出的变量名不变的原因。例：

import { lastName as surname } from './profile.js';

另外，注意import命令具有提升效果，会提升到整个模块的头部，首先执行。

3、export default

   从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。这就产生一个问题，使用模块者不愿阅读文档，不想知道变量名。此时就要用到export default命令，为模块指定默认输出。

例：

export default {
    firstName:'first',
    lastName:'last',
    age: 11
}

此时import导入写成：

import person from 'person'; 

console.log(person.age)  //11

本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。

 

4、总结拓展

• export default 向外暴露的成员，可以使用任意变量名来import
• 在一个模块中，export default 只允许向外暴露一次。
• 在一个模块中，可以同时使用export default 和export 向外暴露成员
• export可以向外暴露多个成员，同时，如果某些成员，在import导入时不需要，可以在import时不写。
• 使用export导出的成员，必须严格按照导出时候的名称，来使用{ }按需接收

 

写的比较简单，主要还是es6的模块化，如果想了解更多的话可以直接去阮一峰老师的es6入门里学习一下‘Module 语法’一节。