模块化的时候,要在script标签中加上type="module"
一个模块化就是一个独立的文件,该文件内部所有的变量,外部都无法获取
如果需要被获取,就需要被导出export
使用export定义了模块的接口之后,其他js文件就可以通过import导入了
一、import引入
import命令中输入地变量都只是可读的,不可修改。如果引入的是一个对象(引入的是地址),那么可以修改对象中的属性。
import导入一共有三种方式。
// 第一种:*可以将所有接口保存在一个对象当中
import * as obj from"./03-export.js";
console.log(obj);
// 第二种 有选择地导入,名字必须和对外暴露地接口名相同
import{a,fn1,fn2,c1,fn3,d,obj1}from"./03-export.js";
console.log(obj1);
obj1.name="jack";
console.log(obj1);
// 不用知道导出的名字,可以自己取名字
// 但是这种方法只能使用一次,不能使用多个 导出使用的是export default
import myName from "./03-export1.js";
// import default as myName from"./03-export1.js";
myName();
// import 与 export的结合使用(看网页)
// export和import语句可以结合在一起,写成一行。但需要注意的是,写成一行以后,
// foo和bar实际上并没有被导入当前模块,只是相当于对外转发了这两个接口,
// 导致当前模块不能直接使用foo和bar
二、export导出
// 一、直接在变量声明之前加上export就可以进行导出
export let a = 111;
export let b = 222;
export function fn1() {
console.log(333);
}
// 二、将要导出的变量写在{}中
let c = 444;
function fn2() {
console.log(555);
}
export let obj1 = {
name:"555",
}
export{c,fn2}
// 三、使用as,
// 但是不可以导出同一个接口
// 但是可以利用as重新命名进行导出
export { c as c1, fn2 as fn3 }
使用default导出:
export default function foo(){
console.log("foo");
}
// export (foo as foo)
// export default function foo1(){
// console.log("foo1");
//