JS module的匯出和匯入

JavaScript · 發表 2019-02-24 21:36:22

摘要：最近看了些Vue框架寫的程式，發現自己的前端知識還停留在幾年以前，發現現在Javascript程式裡有各種各樣的對module的匯入和到處，匯入乍一看跟python的語法挺像的無非就是把from 和import 這兩個關鍵詞的使用顛倒了一下順序。仔細看下來還是和python挺...

最近看了些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 }; // 匯出一個已定義的函式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 $} 的替代寫法。