1.概述

CommonJS 和 AMD 模塊，都只能在運行時確定這些東西。比如，CommonJS 模塊就是對象，輸入時必須查找對象屬性

上面代碼的實質是整體加載fs模塊（即加載fs的所有方法），生成一個對象（_fs），然后再從這個對象上面讀取3個方法(因為CommonJS是從運行完成后的module.exports中加載的，所以只能在運行時確定這些東西，而不是像ES6那樣在靜態的時候才確定)。這種加載稱為“運行時加載”，因為只有運行時才能得到這個對象，導致完全沒辦法在編譯時做“靜態優化”

ES6 模塊不是對象，而是通過export命令顯式指定輸出的代碼，再通過import命令輸入

上面代碼的實質是從fs模塊加載3個方法，其他方法不加載。這種加載稱為“編譯時加載”或者靜態加載，即 ES6 可以在編譯時就完成模塊加載，效率要比 CommonJS 模塊的加載方式高

綜上：CommonJS是先加載整體，然后從整體中取出想要的方法。而ES6是直接加載模塊指定輸出的方法，其余方法不加載。CommonJS是require，ES6是export&import

2.ES6 模塊之中，頂層的this指向undefined，即不應該在頂層代碼使用this

3.export命令

export命令用于規定模塊的對外接口，import命令用于輸入其他模塊提供的功能

一個模塊就是一個獨立的文件。該文件內部的所有變量，外部無法獲取。如果你希望外部能夠讀取模塊內部的某個變量，就必須使用export關鍵字輸出該變量。

注意：這里變量之前必須帶有標識符var，否則會報錯

export的另外一種寫法

export命令除了輸出變量，還可以輸出函數或類（class）

export輸出的變量就是本來的名字，但是可以使用as關鍵字重命名

這里本來輸出函數本來的名字v1和v2，然后通過as關鍵字對其進行了重新命名

需要特別注意的是，export命令規定的是對外的接口，必須與模塊內部的變量建立一一對應關系

上面兩種寫法都會報錯，因為沒有提供對外的接口。第一種寫法直接輸出1，第二種寫法通過變量m，還是直接輸出1。1只是一個值，不是接口。正確的寫法是下面這樣

上面三種寫法都是正確的，規定了對外的接口m。其他腳本可以通過這個接口，取到值1。它們的實質是，在接口名與模塊內部變量之間，建立了一一對應的關系

同樣的，function和class的輸出，也必須遵守這樣的寫法

另外，export語句輸出的接口，與其對應的值是動態綁定關系，即通過該接口，可以取到模塊內部實時的值

上面代碼輸出變量foo，值為bar，500毫秒之后變成baz

最后，export命令可以出現在模塊的任何位置，只要處于模塊頂層就可以。如果處于塊級作用域內，就會報錯

上面代碼中，export語句放在函數之中，結果報錯

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的ES6之Module的语法(1)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。