1、定义模块
模块功能主要由两个命令构成：export和import，export命令用于规定模块的对外接口，import用于引入其它模块提供的功能。
为什么要用js模块化
随着前端的发展，web技术日趋成熟。项目用的js文件也就越来越多，代码量越来越多。之前一个项目可能一个页面只有一个js，但是随着js逐渐拆分，有两个问题需要我们解决。
1.变量名的冲突
2.引入关系:多个文件之间存在依赖关系，需要保证加载顺序的准确。
模块化：
类似于积木，模块化就是将大文件拆分成小单元的一种方式。 1 优点：
1.提高代码的复用性
2.提高代码的可维护性
3.按需加载
（2）特点
-
ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict; 。
-
模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。
-
每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。
-
每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。
-
一般来说，一个模块对应的就是一个文件，该文件内部的变量外部无法获取，如果你希望外部能够读取到某个变量，就需要使用export关键字输出该变量。
举个例子：
// user.js
let name = "张三";
let age = 20;
const getSex = (s) => {
return s === 1 ? "男" : "女";
}
// 通用写法，如果不想了解，就这样写就完事了
export {
name,
age,
getSex
}
用什么方式来暴露数据 ： export
用什么方式来导入数据 ： import
在服务器端运行HTML文件，在script标签中添加【type=‘module’】来表示该js文件是一个模块。
在模块中，如果要导出变量，则使用
export let 变量名 = 变量值
这个方式可以导出多次，或者将多个变量一起导出
export {
变量1，变量2
}
导入和导出时，变量名必须保持一致。
要修改变量名的话，则 import {原变量名 as 现变量名}
【原变量名一定要与导出时的变量名一致！！！】
2、加载模块
- 上面已经使用export命令定义了模块对外的接口后，其它的JS文件就可以通过import命令加载这个模块。
举个例子：
// main.js
import {name, age, getSex} from './user';
console.log(name); // 张三
console.log(age); // 20
console.log(getSex(1)); // 男
- import接受一对大括号，里面指定的是要从其它模块导入的变量名。大括号内的变量名，必须与导入模块对外接口的名称相同。
我们经常需要对加载模块进行重命名，如下写法：
// main.js
import {name as otherName} from './user'; // 使用as进行重命名
console.log(otherName); // 张三
模块化的导入导出
// mian.js
var a=20
var b=[1,2,3,]
var obj={name:"jakc"}
var tool=()=> {return obj }
export var a
export var b // 单独导出，必须用导出的标识符来按需导入，可以有多个单独导出
export default {obj,tool}//默认导出 在这个文件中只能有一个或零个来接受
//main.html
<script type="module">
import {a} from "./main.js" //单独导入
import {b} from "./main.js" //单独导入
import x from "./main.js" //按需导入
//
import x,{a,b} from "./main.js" //这个接收对象x必须写在大括号前面，也可以单独使用。
console.log(a)
console.log(b)
console.log(x)
console.log(x.tool)
</script>
不懂可以参照以下图片，最好是自己复制代码操作一遍。
还可以改变量名，如果你觉得这个导出名不太好的话
<script type="module">
import {b as c} from "./main.js"
let c=a
console.log(c)
使用as就可以做到
</script>
VSCode模块化开发加载js类型为module时报错
本地打开就会报错
报错
Access to script at ‘file:///C:/Users/ASUS/Desktop/TestVue/12-%E5%89%8D%E7%AB%AF%E6%A8%A1%E5%9D%97%E5%8C%96/02-ES6%E7%9A%84%E6%A8%A1%E5%9D%97%E5%8C%96%E5%AE%9E%E7%8E%B0/aaa.js’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
解决方案
1.安装Live Server插件
2.运行文件时，选择Open with Live Server打开
