ES6学习（3）-- Module语法：export和import

        相信大家看到export和import肯定不会陌生。尤其是掌握了vue和react的小伙伴们，在日常的工作和学习中，无时无刻不能看到它们的身影。反正我在学习vue的时候，就知道组件用export暴露出来，用import引入组件或者插件。这里，我们一起看一下ES6中的定义。

        1，模块的概念

        ES6定义：

        ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。

        看到这里，会VUE的小伙伴应该感觉很熟悉了吧。在VUE中，我们经常需要引入外部JS文件或者其他的模块文件。

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

•  不再需要UMD模块格式了，将来服务器和浏览器都会支持 ES6 模块格式。目前，通过各种工具库，其实已经做到了这一点。
• 将来浏览器的新 API 就能用模块格式提供，不再必须做成全局变量或者navigator对象的属性。
• 不再需要对象作为命名空间（比如Math对象），未来这些功能可以通过模块提供。

        2，export命令 

         作用：

1. 输出变量： 一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。
2. 输出函数或类（class）

        特点：

1. export命令规定的是对外的接口，必须与模块内部的变量（function和class一样）建立一一对应关系。
2. export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。
3. export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，

         用法：

// 基础用法
export var name = '张三';
export function multiply(x,y){ return x*y; };
export default class Foo {
    constructor(){}
}

// 大括号指定输出用法
var name = '张三';
function multiply(x,y){ return x*y; };
class Foo{
    constructor(){}
}
export {name,multiply,Foo}

// export输出的变量就是本来的名字，但是可以使用as关键字重命名。
function v1() { ... }
var v2 = '张三'

export {
  v1 as streamV1,
  v2 as name
};

        3，import命令

        作用：

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

        特点：

1. import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块对外接口的名称相同。
2. import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。
3. import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径。如果不带有路径，只是一个模块名，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。
4. import命令具有提升效果，会提升到整个模块的头部，首先执行。
5. 由于import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。
6. import语句会执行所加载的模块。
7. 如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次。

         用法：

// 基本用法
import { firstName, lastName, year } from './profile.js';

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

// 如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。
import { lastName as surname } from './profile.js';


// import语句会执行所加载的模块，但是不输入任何值。
import 'lodash';

 本次学习内容是不是很简单？有兴趣了解更多的小伙伴去ECMAScript 6 中看看官网写的吧。

拜了个拜！迪迦。。。