JS module的導出和導入

最近看了些Vue框架寫的程序,發現自己的前端知識還停留在幾年以前,發現現在Javascript程序裏有各種各樣的對module的導入和到處,導入乍一看跟python的語法挺像的無非就是把fromimport這兩個關鍵詞的使用顛倒了一下順序。仔細看下來還是和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 }; // 導出一個已定義的函數func
export 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導出所有的接口,就像上面那些例子一樣。

默認導出

默認導出也被稱做定義式導出。命名式導出可以導出多個值,但在import引用時,也要使用相同的名稱來引用相應的值。默認導出只有導出一個單一值,這個輸出可以是一個函數、類或其它類型的值,這樣在模塊import導入時也會更 容易引用。

export default function() {}; // 導出一個函數
export default class(){}; // 導出一個類

默認導出可以理解爲另一種形式的命名導出,默認導出可以認爲是使用了default名稱的命名導出。

下面兩種導出方式是等價的:

const D = 123; 
export default D;
export { D as default };

使用名稱導出一個模塊時:

// "my-module.js" 模塊
function cube(x) {
    return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };

在另一個模塊(js文件)中,我們可以像下面這樣引用:

import { cube, foo } from 'my-module';
console.log(cube(3));
console.log(foo);

使用默認導出一個模塊時:

// "my-module.js"模塊
export default function (x) {
return x * x * x;
}

在另一個模塊中,我們可以像下面這樣引用,相對名稱導出來說使用更爲簡單:

import cube from 'my-module';
console.log(cube(3)); // 27

import導入模塊

import語法聲明用於從已導出的模塊、腳本中導入函數、對象、指定文件(或模塊)的原始值。import模塊導入與export模塊導出功能相對應,也存在兩種模塊導入方式:命名式導入(名稱導入)和默認導入(定義式導入)。

注意事項: import必須放在文件的最開始,且前面不允許有其他邏輯代碼,這和其他所有編程語言的導入風格一致。

命名導入

我們可以通過指定名稱將導入成員插入到當作用域中。可以導入單個成員或多個成員:

注意,花括號裏面的變量與export後面的變量一一對應

import {myMember} from "my-module";
import {foo, bar} from "my-module";

通過*符號,我們可以導入模塊中的全部屬性和方法。當導入模塊全部導出內容時,就是將導出模塊(’my-module.js’)所有的導出綁定內容,插入到當前模塊(’myModule’)的作用域中:

import * as myModule from "my-module";

默認導入

在模塊導出時,可能會存在默認導出。同樣的,在導入時可以使用import指令導入這些默認值。直接導入默認值:

import defaultName from "my-module";
import myDefault, {foo, bar} from "my-module"; // 指定成員導入和默認導入

default關鍵字

// my-module.js
export default function() {}
 
// 等效於:
function func() {};
export {func as default};

在import的時候,可以這樣用:

import a from './my-module';
 
// 等效於,或者說就是下面這種寫法的簡寫
import {default as a} from './my-module';

這個語法糖的好處就是import的時候,可以省去{}。

簡單的說,如果import的時候,你發現某個變量沒有花括號括起來(沒有*號),那麼你在腦海中應該把它還原成有花括號的{default as ...}語法,所以import $,{each,map} from 'jquery';import後面第一個${default as $}的替代寫法。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章