ES6的export模块、import模块

ES6的模块

参考：https://www.runoob.com/w3cnote/es6-module.html

ES6的模块分为导出（export）和导入（import）两个模块

特点

1：ES6模块自动开启严格模式，不管你有没有在模块头部加use strict
2：模块可以导入导出各种类型的变量，如函数、对象、字符串、数组、布尔值、类等
3：每个模块都有自己的上下文，每个模块内声明的变量都是局部变量，不会污染到全局作用域
4：每一个模块只加载一次（单例的），若再去加载同目录下同文件，直接从内存中读取

注意
目前在使用模块的导入导出功能时，需要使用babel转码才能用export和import, 也就是需要把es6转成es5， 建议直接在Vue中使用

export内联导出

模块可以导入导出各种类型的变量，如函数、对象、字符串、数组、布尔值、类等

注意
导出的函数声明与类声明必须要有名称（export default 命令除外）

example.js文件

	export const PI = 3.14;
	export let str = "str";
	export let num = 10;
	
	export function test() {
	  console.log("function:test")
	}
	
	export class MyClass {
	  name = "MyClass"
	}
	
	export let obj = {
	  name: "Jack",
	  age: 25
	};
	export let arr = ["item1", "item2"];
	const people = {name: "Tom"};
	//一个模块只能有一个默认导出
	export default people;

在Vue中通过import导入需要的内容，导入和导出的顺序可以不一致

注意

1：通过export方式导出时，在import时需要加{}，而通过export default导出时则不需要
2：不需要使用的变量可以不导入
3：可同时导入通过export和export default导出的内容，若export和export default同时存在则可以用下面两种方式导入
4：可以通过as重新定义导入导出的变量名
5: export {xxx as default} 等同于 export default xxx 默认导出

vue.js文件

<script>
  import people, {obj, MyClass, arr, test, PI} from './example'; //下边和这个同样效果
  // import {obj, MyClass, arr, test, PI, default as people} from './example';

  export default {
    name: "Demo",
    mounted() {
      console.log(obj.name); //Jack
      console.log(MyClass.name); //MyClass
      console.log(arr[0]); //item1
      test(); //function:test
      console.log(PI); //3.14
      console.log(people.name); //Tom
    }
  }
</script>

export对象导出

建议使用大括号指定所要导出的内容，也就是对象导出

export方式导出

let num = 10;

let obj = {
  name: "Jack",
  age: 25
};
export {num, obj};

在使用导入时（顺序可不一致）

import {obj, num} from './example';

export default方式导出

const obj = {
  name: "Tom",
  run() {
    console.log("run");
  }
};
export default obj;

在使用导入时（不能加花括号{}）

import example from './example';

注意：可以通过as重新定义导入导出的变量名

export default命令特点

1：在一个文件或模块中，export、import可以有多个，export default最多只能有一个

export default a;
export default b;  //错误 只能有一个

2：通过export方式导出，在导入时要加{}，export default则不需要并且可以使用任意变量接收

export default b;
import xxx from "./xxx.js"; // 不需要加{}， 可使用任意变量接收

3：export default中的default对应的是导出的变量不能是表达式，但export可以直接导出表达式

export default const PI = 3.14; //错误 只能是导出变量，不能是表达式

import命令特点

1：只读属性：不允许在加载模块的脚本里面改写import变量类型为基本类型的变量，也不允许改写接口的引用指向，但可以改写引用指向的属性值

example.js文件

let num = 10;

let obj = {
  name: "Jack",
  age: 25
};
export {num, obj};

vue.js
<script>
  import {obj, num} from './example';
  export default {
    name: "demo",
    mounted() {
      num = 20;  //错误
      obj = {}; //错误
      obj.name = "Jack"; //正确
    }
  }
</script>

2：单例模式：多次重复执行同一句import语句，那么只会执行一次，而不会执行多次。import同一个模块，声明不同变量引用，则会声明对应变量，但只执行一次import

import {a} "./xxx.js";
import {a} "./xxx.js";
//相当于 import {a} "./xxx.js" 了一次

import { a } from "./xxx.js";
import { b } from "./xxx.js";
// 相当于 import { a, b } from "./xxx.js";

3：静态执行特性：import是静态执行，所以不能使用表达式和变量

//错误
import {"f"+"oo"} from "./xxx.js";

//错误
let module = "./xxx.js";
import {foo} from module;

//错误
if(true){
  import {foo} from "./xxx.js";
}else{
  import {foo} from "./xxx.js"
}