模块化
-
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两种写法：
-
用export单个导出变量数据
export var firstName = 'Michael'; export var lastName = 'Jackson'; export var year = 1958; -
最后使用一个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>-
import 必须与from关联使用，指明模块的存放目录；
-
单例模式：多次重复执行同一句 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>总结：
-
默认导出只能写一次，导入这边接收时可设置任意变量名，因为导出那边只有一个，肯定指向的是它。
-
ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict;。
-
模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。
-
每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。
-
每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。
在vscode中报错原因：本地文件打开，内部插件open in browser 问题，如何解决？
1.先去拓展里面下载一个 live Server 插件(第一个)
2.在打开页面时，右击html文件，选择 live server
