export && import

在一个文件或者模块中，export，import可以有多个，但是export default只能有一个

export

export 命令规定的是对外的接口，必须与模块内部的变量建立一一对应的关系

export导出的四种方式：

const utils = {
   showSth : function(){
       console.log("showSth");
   },
   saySth : function(){
       console.log("saySth");
   }
}

• 变量导出

//对于命名给变量导出的，在导入的时候必须使用相应的变量名称
export var m = utils
import { m } from './utils.js'

• 命名导出

export { utils }
//命名导入
import { utils } from './utils.js'
//别名导入
import {utils as myName} from >'./utils.js';

• 别名导出

export {utils as myUtils};
import {myUtils} from './utils.js';

• 默认导出

//通过 export 方式导出，在导入时要用花括号{ }；
//而通过 export default 方式导出的，{ }可加可不加
//本质上，export default就是输出一个叫做default的变量或方法
//导入default 的时候名字可以自定义(别名导入的时候必须加上花括号)
//注意export导出时不能使用 let，var 或 const 作为默认导出
export default utils;  
import myUtils from './utils.js';
//等同于 import {default as myuntils} >from './utils'

export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句

// 正确
export var a = 1;

// 正确
var a = 1;
export default a;

// 错误
export default var a = 1;

// 正确
export default 42;

// 报错
export 42;

export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

  //myModule.js
  export var foo = 'bar';
  setTimeout(() => foo = 'baz', 500);

  //demo.js：引用myModule.js
  import * as myAlias from './myModule';
  console.log(myAlias.foo); //bar
  setTimeout(() => {
    console.log(myAlias.foo); //baz
  },1000);

export default 输出类

// MyClass.js
export default class { ... }

// main.js
import MyClass from 'MyClass';
let o = new MyClass();

import

导入一个文件中定义的所有方法，模块，对象等，使用import * 来导入

    //myModule.js
    export const fun1 = ()=>{}
    export const objInfo = {...};
    //demo.js：引用myModule.JS
    import * as myAlias from './myModule';
    //fun1()和objInfo都是定义在myModule中的方法和对象
    myAlias.fun1();
    myAlias.objInfo;

import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。但是如果加载的是对象，那么修改a的属性是允许的。

import {a} from './xxx.js'

a = {}; // Syntax Error : 'a' is read-only;

import {a} from './xxx.js'

a.foo = 'hello'; // 合法操作

import的命令会提升到模块的顶部，最先执行

foo();

import { foo } from 'my_module';

import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。

// 报错(表达式)  
import { 'f' + 'oo' } from 'my_module';

// 报错(变量)
let module = 'my_module';
import { foo } from module;

// 报错(if结构)
if (x === 1) {
  import { foo } from 'module1';
} else {
  import { foo } from 'module2';
}

export 和 import 命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，这是因为处于条件代码块之中，就没法做静态优化了，违背了 ES6 模块的设计初衷。

function foo() {
  export default 'bar' // SyntaxError
}
foo()

export和import复合写法

export和import语句可以结合在一起，写成一行。但需要注意的是，写成一行以后，foo和bar实际上并没有被导入当前模块，只是相当于对外转发了这两个接口，导致当前模块不能直接使用foo和bar

export { foo, bar } from 'my_module';

// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };