模块
定义: 模块是自动运行在严格模式下并且没有办法退出的JavaScript代码。
模块可以是函数、数据、类,需要指定导出的模块名,才能被其他模块访问。
<!--数据模块-->
const obj = { a: 1 }
<!--函数模块-->
const sum = (a, b) => {
return a + b;
}
<!--类模块-->
class My extends vue.Components{
}
模块导出
添加export 导出模块
<!--数据模块-->
export const obj = { a: 1 }
<!--函数模块-->
export const sum = (a, b) => {
return a + b;
}
<!--类模块-->
export class My extends vue.Components{
}
模块导入
使用import关键字,导入分两种情况,一种是导入指定的模块,另外一种是导入全部模块。
1)导入指定的模块
<!---->
import {obj, My} from 'XX.js'
console.log(obj, My);
2) 导入全部
<!---->
import * as all from 'XXX.js'
console.log(all.obj, all.sum(1, 2), all.My);
默认模块的使用
如果给我们的模块加上default关键字,那么该js文件默认只导出该模块,你还需要把大括号去掉。
<!--默认模块定义-->
function sum = (a, b) => {
return a + b;
}
export default sum
<!--导入默认模块-->
import sum from 'xx.js'
模块的使用限制
不能在语句和函数之内使用export关键字,只能在模块顶部使用
<script>
import sum from 'xx.js'
// fangfa
</script>
修改模块导入和导出名
function sum = (a, b) => {
return a + b;
}
1)导出时修改
export { sum as add }
import {add} from ''
2) 导入时修改
export sum
import { sum as add } from ''
无绑定导入
当你的模块没有可导出模块,全都是定义的全局变量的时候,你可以使用无绑定导入。
<!--模块-->
let a = 0;
const PI = 3.14;
<!--无绑定导入-->
import '';
console.log(a, PI);
浏览器加载模块
有用过webpack打包js模块的同学可能有经验,使用webpack打包了多个js文件,然后放到HTML使用script加载时,如果加载顺序不对,就会出现找不到模块的错误。
这是因为模块之间是有依赖关系的,就像你使用jQuery的时候,必须先加载jQuery的代码,才能使用jQuery提供的方法。
加载模块的方法,总是先加载模块1,再加载模块2,因为module类型默认使用defer属性。
<script type='module' src='module1.js'></script>
<script type='module' src='module2.js'></script>
本文参考掘金社区文章