模塊化是指將一個(gè)大的程序文件， 拆分成許多小的文件，然后將小文件組合起來(lái).
1.模塊化的優(yōu)勢(shì):
(1)防止命名沖突
(2)代碼復(fù)用
(3)高維護(hù)性
2.模塊化規(guī)范產(chǎn)品
ES6之前的模塊化規(guī)范有:
(1)CommonJS規(guī)范=>nodejs,browserify
(2)AMD =>REQUIREjs
(3)CMD =>seaJS
3.ES6模塊化語(yǔ)法
模塊功能主要由兩個(gè)命令構(gòu)成:export和import.
export命令用于規(guī)定模塊的對(duì)外接口
案例1：瀏覽器使用es6模塊引入模塊
demo.js

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

demo.html

    <script type="module">
      //引入demo.js模塊的內(nèi)容
      import * as demo from "./demo.js";
      console.log(demo);
      console.log(demo.name);//小豬
      console.log(demo.sayHi());//你好啊
    </script>

demo的打印結(jié)果如下所示:

1.png

const name = '小豬'

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

demo.html

    <script type="module">
      //引入demo.js模塊的內(nèi)容
      import * as demo from "./demo.js";
      console.log(demo);
    </script>

打印結(jié)果如下所示:

1.png

還有一種是默認(rèn)暴露，一起來(lái)看下:
案例3：默認(rèn)暴露
demo.js

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

demo.html

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

打印結(jié)果如下所示:

1.png

以上總結(jié)了三種模塊導(dǎo)出的方式，接下來(lái)再來(lái)看看模塊導(dǎo)入的各種方式

import命令用于輸入其他模塊提供的功能
在上面演示模塊導(dǎo)出方法的時(shí)候我們用的導(dǎo)入方式是通用的導(dǎo)入方式，也就是我們要講的第一種模塊導(dǎo)入的方式
案例4：通用的導(dǎo)入方式

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

案例5：解構(gòu)賦值的導(dǎo)入方式

    <script type="module">
      //解構(gòu)賦值的導(dǎo)入方式
  (針對(duì)案例1中的分別導(dǎo)出和案例2中的統(tǒng)一暴露)
      import { name as name1, study } from "./demo.js";//這里導(dǎo)入的時(shí)候可以給變量起別名
      console.log(name);
      console.log(study);
  (針對(duì)案例3中的默認(rèn)暴露)
      import {default as test} from "demo.js"http://這里需要注意默認(rèn)暴露會(huì)暴露出來(lái)一個(gè)default對(duì)象，所有的屬性和方法都在default身上，我們?cè)谑褂媒鈽?gòu)賦值的導(dǎo)入方式的時(shí)候需要給default器別名
    </script>

最后一種，簡(jiǎn)便形式(只針對(duì)默認(rèn)暴露)
案例6：簡(jiǎn)便形式導(dǎo)入方式

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

打印結(jié)果和上面一樣，如下所示:

簡(jiǎn)便形式導(dǎo)入.png

關(guān)于es6模塊化導(dǎo)入導(dǎo)出我們就寫這么多