Module的基本用法
1.什么时候要加type = ‘module’
答:只要你会用到import或export,在使用script标签加载时侯,就要加上type = ‘module’
export default 和对应的 import
1.认识导出和导入
答:导出的东西可以被导入(import),并访问到
一个模块没有导出,也可以将其导入,被导入的代码都会执行一遍,也仅会执行一遍
2.基本用法
const age = 18; export default age; //导出
3.一个模块只能有一个export default 不然会报错
<script type = "module">import age from'./module文件名.js';</script> 导入
export 和对应的 import
1.基本用法
export不能像export default一样后面跟一个值,要跟声明或则变量
const age = 18; export const age = 18; ; //导出 export {age}; //还可以这样导出 <script type = "module">import {age} from'./module文件名.js';</script> 导入 //这里的命名要加花括号,命名要和导出的值相同,不能随意命名
2.多个导出
①可以每一个都导一次,不会报错
②第二种方法
const age = 18; function fun(){}; export {age,fun}; //中间用逗号分隔 ②第二种方法 <script type = "module"> import {age,fun} from'./module文件名.js'; //导入多个 </script>
3.导出导入时起别名
export {age,fun as func}; //导出前起别名 ,用as import {age,fun as func} from'./module文件名.js'; //导入后起别名,用as
4.整体导入
答:会导入所有的输出,包括expoer default导出的
import *as obj from'./module文件名.js'; //*号表示全部的,然后用as给他起一个名,这个就会成为一个对象,方法都在这个对象里面
5.同时导入 两个导出方式,在一起导入
import age,{age2,fun} from'./module文件名.js'; //把两个放到一个语句,export default在前‘age’,export 在后‘{age2,fun}’,不然就会报错
Module的注意事项
1.模块顶层的this指向
答:在模块中,顶层的this指向undefined
2.import 关键字和import()函数
import命令具有提升效果,会提升到整个模块的头部,率先执行
答:import执行的时候,代码还没有执行, mport和export命令只能在模块的顶层,不能在代码中执行
console.log('沙发'); console.log('ab'); import'./module.js'; //先执行这一句,
3.导入和导出的复合写法
复合写法导出,无法在当前的模块中使用
export {age} from './module.is';