JavaScript学习笔记（二十七）——es6模块化

模块化

• ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。

• ES6 的模块化分为导出（export） 与**导入（import）**两个模块。

1、导出export：

导出里面必须有且只有一个export default 语句。

可以导出任何数据：例如

//导出字符串
export default "abc";

//导出数字
export default 123;

//导出布尔值
export default true;

//导出数组
export default [1,2,3];

//导出对象
var obj = {
	name: '张三',
	age: 20
}
export default obj;

//导出函数
var func = function() {
	console.log("func函数");
	return 100;
}
export default func;


//导出类
class People {
	constructor() {
		this.a = 100;
	}
	say() {
		console.log("say...");
	}
}
export default People;

要注意的是：

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

export两种写法：

1. 用export单个导出变量数据

   export var firstName = 'Michael';
   export var lastName = 'Jackson';
   export var year = 1958;
   

2. 最后使用一个export将导出的变量用{}封装起来：推荐使用，这样可以在会后一行清晰地看到哪些是导出的变量。

   var firstName = 'Michael';
   var lastName = 'Jackson';
   var year = 1958;
   
   export { firstName, lastName, year };
   

2、导入import：

<script type="module">
    //type="module"：脚本中要用js语言去引入一个外部的js文件，需要读取文件编码。让浏览器识别import语法。
	import People from './js/myModule.js';//相对网络路径
	let p = new People();
	p.say();
</script>

1. import 必须与from关联使用，指明模块的存放目录；
2. 单例模式：多次重复执行同一句 import 语句，那么只会执行一次；也就是说：每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取；

两种导入方式：

导出模块：保存在 ’ . /js/module.js '。

var obj={name:'marry'};

export var num=100;
export var age=17;
export function name(){return obj};
//默认导出
export default{num ,obj}

• 按需导入：顾名思义，只导入你需要的数据，而不是模块中全部的数据；

注意：按需导入中，变量名一一对应，不能自己设置任意的。将需要的部分变量用{ }封装到form前面。

<script type='module'>
    import {num,name} from './js/module.js';
    var re=name();
    console.log(re.name,num);//marry  100
</script>

• 整体导入：导入模块中全部的数据。

注意：导入这边接收时，可设置任意变量名，如下x，相当于在导出那边封装了一个对象，使用时用点语法调用数据。

<script type='module'>
    import x from './js/module.js';
    console.log(x.obj.name);  //marry
</script>

总结：

1. 默认导出只能写一次，导入这边接收时可设置任意变量名，因为导出那边只有一个，肯定指向的是它。

2. ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict;。

3. 模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。

4. 每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。

5. 每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。

在vscode中报错原因：本地文件打开，内部插件open in browser 问题，如何解决？

1.先去拓展里面下载一个 live Server 插件(第一个)

2.在打开页面时，右击html文件，选择 live server