【Day10】ES6模块化导入与导出

将一组模块（及其依赖项）以正确的顺序拼接到一个文件（或一组文件）中的过程。

日期：1月27日上午

本期简单的介绍下模块化，并不进行深究。

type="text/javascript" 默认的类型

type="module" 模块的类型

导出：export

导入: import

案例1：有名导出

/**
 * 导入内容  有名导入
 */
export const a = 10;
export const myFunc02 = () => {
    console.log("####");
}
export function myFunc01() {
    console.log("xxxx");
}

案例2：有名导入

<script type="module">
        //有名导出
        // 将导出的遍历封装成了一个对象
        import * as obj from "./js/a.js"
        console.log(obj);

        console.log(obj.a);
        obj.myFunc02()

        console.log("-----------------");

        // 解构赋值
        // const {a,myFunc02,myFunc01} = obj
        // console.log(a);
        // myFunc02()
        // myFunc01()

        // 导入的内容直接解构赋值 按需导入
        import {a,myFunc01} from "./js/a.js"
        console.log(a);
        myFunc01()

案例3：匿名导出

// 匿名导出
// 匿名导出需要使用default
// 一个文件中 只可能存在一个匿名导出
const a = 10;
const fn = () => {
    console.log("xxxx");
}
// export default a;  // 匿名导出
 export default fn;  

案例4：匿名导入

 // * 全部导出  一般只用于有名导出   匿名导出 直接导出就可以了
              import * as obj from "./js/b.js"

              console.log(obj);
              console.log(obj.default);

              // 导出匿名内容
              import  sy from "./js/b.js"  //sy 表示导出的匿名内容
              console.log(sy);

案例5：多个匿名 封装成对象来使用

export default {
    name:"小明",
    age:18,
    say() {
        console.log("xxx");
    }
};

案例5：多种有名，匿名 调用方法

 import  fn,{a,arr} from "./js/c.js"

       fn()
       console.log(a,arr);

       import  * as obj from "./js/c.js"

       console.log(obj);

       import  myObj from "./js/d.js"
       console.log(myObj);

总结：模块化在于vue的使用会很重要。