JavaScript模块化

模块化的时候，要在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");
//