最近看了些Vue框架寫的程序,發現自己的前端知識還停留在幾年以前,發現現在Javascript程序里有各種各樣的對module的導入和到處,導入乍一看跟python的語法挺像的無非就是把from和import這兩個關鍵詞的使用顛倒了一下順序。仔細看下來還是和python挺不一樣的import模塊的前提是模塊有導出,并且還分默認導出和命名導出,有些麻煩。所以今天這篇文章就把所有的export形式和相應的import使用匯總一下。
ES6在語言標準的層面上,實現了模塊功能,成為瀏覽器和服務器通用的模塊解決方案,完全可以取代 CommonJS 和 AMD 規范,基本特點如下:
每一個模塊只加載一次, 每一個JS只執行一次, 如果下次再去加載同目錄下同文件,直接從內存中讀取; 每一個模塊內聲明的變量都是局部變量, 不會污染全局作用域; 模塊內部的變量或者函數可以通過export導出; 一個模塊可以導入別的模塊2.模塊功能主要由兩個命令構成:export和import。export命令用于規定模塊的對外接口,import命令用于輸入其他模塊提供的功能;
3.一個模塊就是一個獨立的文件,該文件內部的所有變量,外部無法獲取。如果你希望外部能夠讀取模塊內部的某個變量,就必須使用export關鍵字輸出該變量;
var year = '2018';var month = 'Febuary';export {year, month};export 導出模塊
export語法聲明用于導出函數、對象、指定文件(或模塊)的原始值。 有兩種模塊導出方式:命名式導出(名稱導出)和默認導出(定義式導出),命名式導出每個模塊可以有多個,而默認導出每個模塊僅一個 。
命名式導出
模塊可以通過export前綴關鍵詞聲明導出對象,導出對象可以是多個。這些導出對象用名稱進行區分,稱之為命名式導出
export { func }; // 導出一個已定義的函數funcexport const foo = Math.sqrt(100); // 導出一個常量我們可以使用*和from關鍵字來實現的模塊的繼承:
export * from 'base_module';
模塊導出時,可以指定模塊的導出成員。導出成員可以認為是類中的公有成員,而非導出成員可以認為是類中的私有成員:
var name = 'Kevin的居酒屋';var domain = 'http://coffee.toast.com'; export {name, domain}; // 相當于導出{name:name,domain:domain}模塊導出時,我們可以使用as關鍵字對導出成員進行重命名,上面的導出可以這樣寫:
export {name as siteName, domain}注意一下語法錯誤:
export 1; var a = 100;export a;
export在導出接口的時候,必須與模塊內部的變量具有一一對應的關系。直接導出1沒有任何意義,也不可能在import的時候有一個變量與之對應export a雖然看上去成立,但是a的值是一個數字,根本無法完成解構,因此必須寫成export {a}的形式。即使a被賦值為一個函數,也是不建議使用上面的形式導出的因為大部分風格都建議,模塊中最好在末尾用一個export導出所有的接口,就像上面那些例子一樣。
新聞熱點
疑難解答
圖片精選