深刻淺出ES6教程模塊化

你們好，本人名叫蘇日儷格，你們叫我 （格格） 就好，在上一章節中咱們學到了Promise的用法，下面咱們一塊兒來繼續學習模塊化：

JavaScript自己是不支持模塊化的，只不事後來一些社區的大佬制定了一個模塊規範，主要分爲兩種，一個是用於服務器的CommonJs,好比nodeJs中的require；另外一個是用於客戶端的AMD，好比requireJs。後來ES6提供了通用的模塊化方案：
ES6專門提供了import和export這兩個小可愛

小白：那麼它們都是用來作什麼的呢？怎麼用的呢？
格格：首先要開啓服務器，整個流程是在服務器下進行的，Apache也好，編輯器自帶的也好；下面就讓咱們帶着疑問一塊兒來看一下：

export：它是用來定義模塊的，能夠導出對象、函數、類、字符串等等：

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

上面的這個例子中，這兩個文件是在同一目錄下，可是引入的時候前面要加上(./)當前路徑，不加就會報錯，別問我爲何，大概是甲魚的臀部，下面來看一下導出多個對象的例子：

// 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 由於在這個js裏他仍是b，只不過導出到另一個文件裏才叫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 已經將導入的b改名爲c，因此這裏叫c </script> 

上面的例子中能夠將export導出的內容經過as進行改名

小白：import也能夠有這樣的操做麼？
格格：那是必須的呀，他們都是一家子的，這可不能偏愛啊

import導入的也能夠經過as更名：

// 1.html
<script type="module"> import * as goto from './1.js'; // * 表明1.js中導出的所有的內容，可是不能直接輸出*，必須更名 console.log(goto); // 整個json對象 console.log(goto.a); // 1 goto.show(); // 10 </script> 

導出的方式還有另一種：export default {}
那麼export和export default的區別就是：前者導出的東西須要在導入的時候加{}，然後者則不須要：

// 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'; // 同時導入export和export default的時候，必須把默認的放在前面 console.log(a,b,c); // 1 2 3 </script> 

另外，import除了以上特性以外，還有：
引入的路徑既能夠是相對路徑也能夠是絕對路徑，還能夠是網絡路徑，好比引入網上的jquery.js；
import還擁有提高特性，就像是var變量提高同樣，在實行代碼以前會被提到代碼的頂部
import能夠動態引入，可是import不能放入放到代碼塊哦

小白：什麼是動態引入？
格格：動態引入其實就是基於promise語法，根據promise機制來實現動態引入，首先來看一個例子：

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

有了這種機制就能夠實現按需加載，好比先載入jquery.js再使用jquery的方法，或者根據條件選擇動態加載哪一個模塊；
關於模塊還須要強調的一點就是它默認就是嚴格模式，也就是默認在頂部有一個‘use strict’

小白：什麼是嚴格模式？
格格：所謂嚴格模式也就是改掉一些編程很差的習慣，能夠理解爲把一個山寨的土匪收編爲正規軍的感受：

嚴格模式相關規定仍是挺多的：

• 變量必須聲明後再使用
• 函數的參數不能有同名屬性，不然報錯
• 不能使用with語句
• 不能對只讀屬性賦值，不然報錯
• 不能使用前綴0表示八進制數，不然報錯
• 不能刪除不可刪除的屬性，不然報錯
• 不能刪除變量delete prop，會報錯，只能刪除屬性delete global[prop]
• eval不會在它的外層做用域引入變量
• eval和arguments不能被從新賦值
• arguments不會自動反映函數參數的變化
• 不能使用arguments.callee
• 不能使用arguments.caller
• 禁止this指向全局對象
• 不能使用fn.caller和fn.arguments獲取函數調用的堆棧
• 增長了保留字（好比protected、static和interface）
• 其中，尤爲須要注意this的限制。ES6 模塊之中，頂層的this指向undefined，即不該該在頂層代碼使用this。

做者：蘇日儷格 連接：https://www.jianshu.com/p/6c1b0e2b53c3 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。