?? 個(gè)人主頁(yè)歡迎訪問(wèn) ??

大家好，本人名叫蘇日儷格，大家叫我 （格格） 就好，在上一章節(jié)中我們學(xué)到了Promise的用法，下面我們一起來(lái)繼續(xù)學(xué)習(xí)模塊化：

JavaScript本身是不支持模塊化的，只不過(guò)后來(lái)一些社區(qū)的大佬制定了一個(gè)模塊規(guī)范，主要分為兩種，一個(gè)是用于服務(wù)器的CommonJs,比如nodeJs中的require；另一個(gè)是用于客戶(hù)端的AMD，比如requireJs。后來(lái)ES6提供了通用的模塊化方案：
ES6專(zhuān)門(mén)提供了import和export這兩個(gè)小可愛(ài)

小白：那么它們都是用來(lái)做什么的呢？怎么用的呢？
格格：首先要開(kāi)啟服務(wù)器，整個(gè)流程是在服務(wù)器下進(jìn)行的，Apache也好，編輯器自帶的也好；下面就讓我們帶著疑問(wèn)一起來(lái)看一下：

export：它是用來(lái)定義模塊的，可以導(dǎo)出對(duì)象、函數(shù)、類(lèi)、字符串等等：

// 1.js
export const a = 1;
console.log(a);
// 1.html
<script type="module">
  import './1.js';
</script>

上面的這個(gè)例子中，這兩個(gè)文件是在同一目錄下，但是引入的時(shí)候前面要加上(./)當(dāng)前路徑，不加就會(huì)報(bào)錯(cuò)，別問(wèn)我為什么，大概是甲魚(yú)的臀部，下面來(lái)看一下導(dǎo)出多個(gè)對(duì)象的例子：

// 1.js
const a = 1;
let b = 2;
function show(){
    console.log(10);
}
export {
    a,
    b as c,
    show
}
show();  // 10
console.log(a);  // 1
console.log(b);  // 2
console.log(c);  // c is not defined  因?yàn)樵谶@個(gè)js里他還是b，只不過(guò)導(dǎo)出到另外一個(gè)文件里才叫c

// 1.html
<script type="module">
    import {a,c,show} from './1.js';
    show();  // 10
    console.log(a); // 1
    console.log(c); // 2
    console.log(b); // b is not defined  已經(jīng)將導(dǎo)入的b更名為c，所以這里叫c
</script>

上面的例子中可以將export導(dǎo)出的內(nèi)容通過(guò)as進(jìn)行更名

小白：import也可以有這樣的操作么？
格格：那是必須的呀，他們都是一家子的，這可不能偏心啊

import導(dǎo)入的也可以通過(guò)as改名：

// 1.html
<script type="module">
    import * as goto from './1.js';  // * 代表1.js中導(dǎo)出的全部的內(nèi)容，但是不能直接輸出*，必須改名
    console.log(goto);  // 整個(gè)json對(duì)象
    console.log(goto.a);    // 1
    goto.show();    // 10
</script>

導(dǎo)出的方式還有另外一種：export default {}
那么export和export default的區(qū)別就是：前者導(dǎo)出的東西需要在導(dǎo)入的時(shí)候加{}，而后者則不需要：

// 1.js
const a = 1;
const b = 2;
const c = 3;
export {a,b}
export default c;
// 1.html
<script type="module">
    import c,{a,b} from './1.js';  // 同時(shí)導(dǎo)入export和export default的時(shí)候，必須把默認(rèn)的放在前面
    console.log(a,b,c);  // 1 2 3
</script>

另外，import除了以上特性之外，還有：
引入的路徑既可以是相對(duì)路徑也可以是絕對(duì)路徑，還可以是網(wǎng)絡(luò)路徑，比如引入網(wǎng)上的jquery.js；
import還擁有提升特性，就像是var變量提升一樣，在實(shí)行代碼之前會(huì)被提到代碼的頂部
import可以動(dòng)態(tài)引入，但是import不能放入放到代碼塊哦

小白：什么是動(dòng)態(tài)引入？
格格：動(dòng)態(tài)引入其實(shí)就是基于promise語(yǔ)法，根據(jù)promise機(jī)制來(lái)實(shí)現(xiàn)動(dòng)態(tài)引入，首先來(lái)看一個(gè)例子：

// 1.html
<script type="module">
    import('./1.js').then(res =>{
        console.log(res.a); // 1
    });
</script>

有了這種機(jī)制就可以實(shí)現(xiàn)按需加載，比如先載入jquery.js再使用jquery的方法，或者根據(jù)條件選擇動(dòng)態(tài)加載哪個(gè)模塊；
關(guān)于模塊還需要強(qiáng)調(diào)的一點(diǎn)就是它默認(rèn)就是嚴(yán)格模式，也就是默認(rèn)在頂部有一個(gè)‘use strict’

小白：什么是嚴(yán)格模式？
格格：所謂嚴(yán)格模式也就是改掉一些編程不好的習(xí)慣，可以理解為把一個(gè)山寨的土匪收編為正規(guī)軍的感覺(jué)：

嚴(yán)格模式相關(guān)規(guī)定還是挺多的：

• 變量必須聲明后再使用
• 函數(shù)的參數(shù)不能有同名屬性，否則報(bào)錯(cuò)
• 不能使用with語(yǔ)句
• 不能對(duì)只讀屬性賦值，否則報(bào)錯(cuò)
• 不能使用前綴0表示八進(jìn)制數(shù)，否則報(bào)錯(cuò)
• 不能刪除不可刪除的屬性，否則報(bào)錯(cuò)
• 不能刪除變量delete prop，會(huì)報(bào)錯(cuò)，只能刪除屬性delete global[prop]
• eval不會(huì)在它的外層作用域引入變量
• eval和arguments不能被重新賦值
• arguments不會(huì)自動(dòng)反映函數(shù)參數(shù)的變化
• 不能使用arguments.callee
• 不能使用arguments.caller
• 禁止this指向全局對(duì)象
• 不能使用fn.caller和fn.arguments獲取函數(shù)調(diào)用的堆棧
• 增加了保留字（比如protected、static和interface）
• 其中，尤其需要注意this的限制。ES6 模塊之中，頂層的this指向undefined，即不應(yīng)該在頂層代碼使用this。

其實(shí)還有很多的，這些只是一部分，之前我在高程上也看到許多，就不一一列舉了

關(guān)于模塊化我們都已經(jīng)了然于心，預(yù)知類(lèi)和繼承如何，請(qǐng)聽(tīng)下回分解 （＾?＾）/~~~

本文的所有內(nèi)容均是一字一句敲上去的，希望大家閱讀完本文可以有所收獲，因?yàn)槟芰τ邢蓿莆盏闹R(shí)也是不夠全面，歡迎大家提出來(lái)一起分享！謝謝O(∩_∩)O~

歡迎訪問(wèn)我的GitHub，喜歡的可以star，項(xiàng)目隨意fork，支持轉(zhuǎn)載但要下標(biāo)注；
歡迎光臨個(gè)人主頁(yè)

等一下( ?? .? ?? )，我還有最后一句話(huà)：

這里雖然沒(méi)有都市的繁華，

也沒(méi)有山林的鳥(niǎo)語(yǔ)花香，

只有一片如水的寧?kù)o，

古人云：

既來(lái)之則安之，

既然來(lái)到了這里，

就可以靜心休憩你的靈魂，

調(diào)養(yǎng)你疲憊的心，

再見(jiàn)...