1.什么是模块化
模块化就是把代码进行拆分,方便重复利用。类似 java 中的导包:要使用一个包,必须先导包。而 JS 中没有包的概念,换来的是模块。
模块功能主要由两个命令构成:export
和import
。
export
命令用于规定模块的对外接口。import
命令用于导入其他模块提供的功能。
2.export
//export 导出 import导入时名字只能是util
const util = {
sum(a, b) {
return a + b;
}
}
//export 导出 import导入时名字只能是util
export {util}
//`export`不仅可以导出对象,一切JS变量都可以导出。比如:基本类型变量、函数、数组、对象。
2.1.导出简写
//export 导出 import导入时名字只能是util
export const util = {
sum(a, b) {
return a + b;
}
}
//`export`不仅可以导出对象,一切JS变量都可以导出。比如:基本类型变量、函数、数组、对象。
2.2.导出自定义名字
省略名称
上面的导出代码中,都明确指定了导出的变量名,这样其它人在导入使用时就必须准确写出变量名,否则就会出错。
因此 js 提供了default
关键字,可以对导出的变量名进行省略
//export 导出 import导入时可自定义名字
export default {
sum(a, b) {
return a + b;
}
}
2.3.导出变量和方法
var name = "jack"
var age = 21
function add(a,b){
return a + b;
}
export {name,age,add}
3.import
使用export
命令定义了模块的对外接口以后,其他 JS 文件就可以通过import
命令加载这个模块
import util from "./hello.js"
import {name,add} from "./user.js"
util .sum(1,2);
console.log(name);
add(1,3);
导入自定义名字
import abc from "./hello.js"
import {name,add} from "./user.js"
abc.sum(1,2);
console.log(name);
add(1,3);