JavaScript module導出和導入的介紹（詳解）

這篇文章帶給大家的內容是關於JavaScript module匯出和導入的介紹（詳解），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

最近看了些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 $}的替代写法。

以上是JavaScript module導出和導入的介紹（詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！