ES6：使用export和import實現模塊化

前端模塊化

1. 模塊化的好處

先後端分離以來，常常提到前端工程化，前端工程化是一個高層次的思想,前端工程化主要包括四個方面：模塊化、組件化、規範化、自動化。而模塊化和組件化是爲工程化思想下相對較具體的開發方式,所以能夠簡單的認爲模塊化和組件化是工程化的表現形式。

模塊化帶來的好處：
   1 避免變量污染，命名衝突
   2 提升代碼複用率
   3 提升維護性
   4 依賴關係的管理

2. 什麼是模塊化？

那具體什麼是模塊化呢,仍是舉簡單的例子,咱們要寫一個實現A功能的JS代碼,這個功能在項目其餘位置也須要用到,那麼咱們就能夠把這個功能當作一個模塊採用必定的方式進行模塊化編寫,既能實現複用還能夠分而治之,同理在寫樣式的時候,若是咱們須要某種特殊的樣式,會在不少地方應用,那麼咱們也能夠採用必定的方式進行CSS的模塊化,具體說來,JS模塊化方案不少有AMD/CommonJS/UMD/ES6 Module等,CSS模塊化開發大可能是在less、sass、stylus等預處理器的import/mixin特性支持下實現的,具體技術你們自行學習。

3. 沒有ES6模塊化以前是怎麼表達模塊化的？

在ES6前， 前端就使用RequireJS或者seaJS實現模塊化， requireJS是基於AMD規範的模塊化庫， 而像seaJS是基於CMD規範的模塊化庫， 二者都是爲了爲了推廣前端模塊化的工具

4. ES6的模塊化

如今ES6自帶了模塊化， 也是JS第一次支持module，咱們能夠直接做用import和export在瀏覽器中導入和導出各個模塊了， 一個js文件表明一個js模塊；

ES6的模塊化的基本規則或特色：

　　　　1：每個模塊只加載一次,每個JS只執行一次,若是下次再去加載同目錄下同文件,直接從內存中讀取。
　　　　2：每個模塊內聲明的變量都是局部變量， 不會污染全局做用域；
　　　　3：模塊內部的變量或者函數能夠經過export導出；
　　　　4：一個模塊能夠導入別的模塊
　　　　5：ES6的模塊自動採用嚴格模式
　　　　6：模塊頂級做用域的this值爲undefined
　　　　7：須要外部使用的部分，必須導出才能夠
　　　　
　5.實際應用

// 普通的使用
    export var a = '1'
    export function sum(num1,num2){
        return num1+num2
    }
    
    import a from './a.js'
    import {sum} from './sum.js'
// 重命名導出與導入
    function sum(num1,num2){
        return num1+num2
    }
    export {sum as add}
    
    import {add as sum} from './sum.js'
    
// 模塊的默認值

    export default function(num1,num2) {
        return num1 + num2
    }
    
// 在script標籤中使用模塊

    <script type="module" src="module.js"></script>
    <script type="module">
    import a from '../b.js'
    </script>