ES6 模块化

1.模块化

将一个大的程序文件拆分成许多小的文件，然后再将小的文件组合起来。

2.模块化的好处

1. 防止命名冲突
2. 实现代码复用
3. 高维护性

3.ES6模块化语法

	模块化功能主要由2个命令构成 export和import
    export命令用于规定模块的对外接口
    import命令用于输入其他模块提供的功能

export和import的一个重要限制是他们必须在其他语句和函数之外使用。只能在模块顶部使用export。

4.导出的基本语法（export）

</script>
// example.js
    export var color = 'red';
    export let name = 'galaxy';
    export const myNumber = 7;
    // 导出函数
    export function sum(num1,num2){
      return num1+num2;
    }
    // 导出类
    export class Rectange{
      constructor(length,width){
        this.length = length;
        this.width = width;
      }
    }
</script>

5.导入的基本语法（import）

1.导入单个绑定

	import {sum} from "./example.js"
	console.log(sum(1,2));

2.导入多个绑定

	import {sum,myNumber} from "./example.js"
	console.log(sum(1,myNumber));

3.导入整个模块

	import * as example from './example.js'
	console.log(example.sum(1,example.myNumber))

在这段代码中，从example.js中导出的所有绑定都被加载到一个被称作example的对象身上，指定的导出会作为example的属性被访问。

如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次。

	import { foo } from 'my_module';
	import { bar } from 'my_module';
	
	// 等同于
	import { foo, bar } from 'my_module';

然foo和bar在两个语句中加载，但是它们对应的是同一个my_module实例
当从模块中导入一个绑定的时候，就像使用const定义一样，结果是无法定义一个同名变量，也无法在import语句之前使用标识符或改变绑定的值。

6.导入和导出式重命名

导出时重命名

    function sum(num1,num2){
      return num1+num2;
    }
    export {sum as add}

函数sum()时本地名称，add()是导出时使用的名称，即在另外一个模块要导入这个函数的时候，必须使用add这个名称。
导入时重命名

	//将add重新命名为sum
    import {add as sum} from "./example.js"

7.模块的默认值

1.导出默认值

由于函数被模块所代表，因此不需要名称。

    export default function(num1,num2){
      return num1+num2;
    }

也可以在先定义函数，再将其导出为默认值

    function sum(num1,num2){
      return num1+num2;
    }
    export default sum;

2.导入默认值

    import sum from "./example.js"

这里将模块导出的任何默认函数用sum来表示。

    export var color = 'red';
    export default function(num1,num2){
      return num1+num2;
    }

用逗号将默认和用{}包裹的非默认值分隔开，在import语句中import默认值必须排在非默认值前面。

    import sum,{color} from "./example.js"

导出默认值时重命名

    import {default as sum,color} from "./example.js"

8.export 与 import 的复合写法

    import {sum} from "./example.js"
    export {sum}

等同于

	export {sum} from "./example.js"

9.浏览器的模块加载

浏览器使用 ES6 模块的语法如下。

<script type="module" src=""></script>

type属性设为module，所以浏览器知道这是一个 ES6 模块。