ES6 模块化

模块化是指将一个大的程序文件， 拆分成许多小的文件，然后将小文件组合起来.
1.模块化的优势:
(1)防止命名冲突
(2)代码复用
(3)高维护性
2.模块化规范产品
ES6之前的模块化规范有:
(1)CommonJS规范=>nodejs,browserify
(2)AMD =>REQUIREjs
(3)CMD =>seaJS
3.ES6模块化语法
模块功能主要由两个命令构成:export和import.
export命令用于规定模块的对外接口
案例1：浏览器使用es6模块引入模块
demo.js

export const name = '小猪'
export function sayHi() {
    console.log('你好啊');
}

demo.html

    <script type="module">
      //引入demo.js模块的内容
      import * as demo from "./demo.js";
      console.log(demo);
      console.log(demo.name);//小猪
      console.log(demo.sayHi());//你好啊
    </script>

demo的打印结果如下所示:

1.png
本例中的这种导出变量的方式我们称之为分别暴露，接下来一起来看下统一暴露的案例
案例2:统一暴露
demo.js

const name = '小猪'

function sayHi() {
    console.log('你好啊');
}
//统一暴露
export {
    name,
    sayHi
}

demo.html

    <script type="module">
      //引入demo.js模块的内容
      import * as demo from "./demo.js";
      console.log(demo);
    </script>

打印结果如下所示:

1.png

还有一种是默认暴露，一起来看下:
案例3：默认暴露
demo.js

// 默认暴露
export default {
    name: 'zhangsna',
    age: 18,
    sayHello() {
        console.log('Hello');
    }
}

demo.html

    <script type="module">
      //引入demo.js模块的内容
      import * as demo from "./demo.js";
      console.log(demo.default.name); //zhangsna
      console.log(demo);
    </script>

打印结果如下所示:

1.png

以上总结了三种模块导出的方式，接下来再来看看模块导入的各种方式

import命令用于输入其他模块提供的功能
在上面演示模块导出方法的时候我们用的导入方式是通用的导入方式，也就是我们要讲的第一种模块导入的方式
案例4：通用的导入方式

    <script type="module">
      //通用的导入方式
      import * as demo from "./demo.js";
      console.log(demo);
    </script>

案例5：解构赋值的导入方式

    <script type="module">
      //解构赋值的导入方式
  (针对案例1中的分别导出和案例2中的统一暴露)
      import { name as name1, study } from "./demo.js";//这里导入的时候可以给变量起别名
      console.log(name);
      console.log(study);
  (针对案例3中的默认暴露)
      import {default as test} from "demo.js"//这里需要注意默认暴露会暴露出来一个default对象，所有的属性和方法都在default身上，我们在使用解构赋值的导入方式的时候需要给default器别名
    </script>

最后一种，简便形式(只针对默认暴露)
案例6：简便形式导入方式

    <script type="module">
      import demo from "./demo.js";
      console.log(demo);
    </script>

打印结果和上面一样，如下所示:

简便形式导入.png

关于es6模块化导入导出我们就写这么多