這篇文章將為大家詳細(xì)講解有關(guān)如何在JavaScript中導(dǎo)入導(dǎo)出 module，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
JavaScript是一種直譯式的腳本語(yǔ)言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，JavaScript是被廣泛用于客戶端的腳本語(yǔ)言，最早是在HTML網(wǎng)頁(yè)上使用，用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能。
ES6在語(yǔ)言標(biāo)準(zhǔn)的層面上，實(shí)現(xiàn)了模塊功能，成為瀏覽器和服務(wù)器通用的模塊解決方案，完全可以取代 CommonJS 和 AMD 規(guī)范，基本特點(diǎn)如下：
每一個(gè)模塊只加載一次， 每一個(gè)JS只執(zhí)行一次， 如果下次再去加載同目錄下同文件，直接從內(nèi)存中讀?。?/p>
每一個(gè)模塊內(nèi)聲明的變量都是局部變量， 不會(huì)污染全局作用域；
模塊內(nèi)部的變量或者函數(shù)可以通過(guò)export導(dǎo)出；
一個(gè)模塊可以導(dǎo)入別的模塊
2.模塊功能主要由兩個(gè)命令構(gòu)成：export和import。export命令用于規(guī)定模塊的對(duì)外接口，import命令用于輸入其他模塊提供的功能；
3.一個(gè)模塊就是一個(gè)獨(dú)立的文件，該文件內(nèi)部的所有變量，外部無(wú)法獲取。如果你希望外部能夠讀取模塊內(nèi)部的某個(gè)變量，就必須使用export關(guān)鍵字輸出該變量；
重慶分公司
重慶分公司
var year = '2018';
var month = 'Febuary';
export {year, month};export 導(dǎo)出模塊
export語(yǔ)法聲明用于導(dǎo)出函數(shù)、對(duì)象、指定文件（或模塊）的原始值。 有兩種模塊導(dǎo)出方式：命名式導(dǎo)出（名稱導(dǎo)出）和默認(rèn)導(dǎo)出（定義式導(dǎo)出），命名式導(dǎo)出每個(gè)模塊可以有多個(gè)，而默認(rèn)導(dǎo)出每個(gè)模塊僅一個(gè) 。
命名式導(dǎo)出
模塊可以通過(guò)export前綴關(guān)鍵詞聲明導(dǎo)出對(duì)象，導(dǎo)出對(duì)象可以是多個(gè)。這些導(dǎo)出對(duì)象用名稱進(jìn)行區(qū)分，稱之為命名式導(dǎo)出
export { func }; // 導(dǎo)出一個(gè)已定義的函數(shù)func
export const foo = Math.sqrt(100); // 導(dǎo)出一個(gè)常量我們可以使用*和from關(guān)鍵字來(lái)實(shí)現(xiàn)的模塊的繼承：
export * from 'base_module';
模塊導(dǎo)出時(shí)，可以指定模塊的導(dǎo)出成員。導(dǎo)出成員可以認(rèn)為是類中的公有成員，而非導(dǎo)出成員可以認(rèn)為是類中的私有成員：
var name = 'Kevin的居酒屋';
var domain = 'http://coffee.toast.com';
export {name, domain}; // 相當(dāng)于導(dǎo)出{name:name,domain:domain}模塊導(dǎo)出時(shí)，我們可以使用as關(guān)鍵字對(duì)導(dǎo)出成員進(jìn)行重命名，上面的導(dǎo)出可以這樣寫：
export {name as siteName, domain}注意一下語(yǔ)法錯(cuò)誤:
export 1; var a = 100; export a;
export在導(dǎo)出接口的時(shí)候，必須與模塊內(nèi)部的變量具有一一對(duì)應(yīng)的關(guān)系。直接導(dǎo)出1沒(méi)有任何意義，也不可能在import的時(shí)候有一個(gè)變量與之對(duì)應(yīng)export a雖然看上去成立，但是a的值是一個(gè)數(shù)字，根本無(wú)法完成解構(gòu)，因此必須寫成export {a}的形式。即使a被賦值為一個(gè)函數(shù)，也是不建議使用上面的形式導(dǎo)出的因?yàn)榇蟛糠诛L(fēng)格都建議，模塊中最好在末尾用一個(gè)export導(dǎo)出所有的接口，就像上面那些例子一樣。
默認(rèn)導(dǎo)出
默認(rèn)導(dǎo)出也被稱做定義式導(dǎo)出。命名式導(dǎo)出可以導(dǎo)出多個(gè)值，但在import引用時(shí)，也要使用相同的名稱來(lái)引用相應(yīng)的值。默認(rèn)導(dǎo)出只有導(dǎo)出一個(gè)單一值，這個(gè)輸出可以是一個(gè)函數(shù)、類或其它類型的值，這樣在模塊import導(dǎo)入時(shí)也會(huì)更 容易引用。
export default function() {}; // 導(dǎo)出一個(gè)函數(shù)
export default class(){}; // 導(dǎo)出一個(gè)類默認(rèn)導(dǎo)出可以理解為另一種形式的命名導(dǎo)出，默認(rèn)導(dǎo)出可以認(rèn)為是使用了default名稱的命名導(dǎo)出。
下面兩種導(dǎo)出方式是等價(jià)的：
const D = 123;
export default D;
export { D as default };使用名稱導(dǎo)出一個(gè)模塊時(shí)：
// "my-module.js" 模塊
function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };在另一個(gè)模塊（js文件）中，我們可以像下面這樣引用：
import { cube, foo } from 'my-module';
console.log(cube(3));
console.log(foo);使用默認(rèn)導(dǎo)出一個(gè)模塊時(shí)：
// "my-module.js"模塊
export default function (x) {
return x * x * x;
}在另一個(gè)模塊中，我們可以像下面這樣引用，相對(duì)名稱導(dǎo)出來(lái)說(shuō)使用更為簡(jiǎn)單：
import cube from 'my-module'; console.log(cube(3)); // 27
import導(dǎo)入模塊
import語(yǔ)法聲明用于從已導(dǎo)出的模塊、腳本中導(dǎo)入函數(shù)、對(duì)象、指定文件（或模塊）的原始值。import模塊導(dǎo)入與export模塊導(dǎo)出功能相對(duì)應(yīng)，也存在兩種模塊導(dǎo)入方式：命名式導(dǎo)入（名稱導(dǎo)入）和默認(rèn)導(dǎo)入（定義式導(dǎo)入）。
注意事項(xiàng)： import必須放在文件的最開始，且前面不允許有其他邏輯代碼，這和其他所有編程語(yǔ)言的導(dǎo)入風(fēng)格一致。
命名導(dǎo)入
我們可以通過(guò)指定名稱將導(dǎo)入成員插入到當(dāng)作用域中?？梢詫?dǎo)入單個(gè)成員或多個(gè)成員：
注意，花括號(hào)里面的變量與export后面的變量一一對(duì)應(yīng)
import {myMember} from "my-module";
import {foo, bar} from "my-module";通過(guò)*符號(hào)，我們可以導(dǎo)入模塊中的全部屬性和方法。當(dāng)導(dǎo)入模塊全部導(dǎo)出內(nèi)容時(shí)，就是將導(dǎo)出模塊（'my-module.js'）所有的導(dǎo)出綁定內(nèi)容，插入到當(dāng)前模塊（'myModule'）的作用域中：
import * as myModule from "my-module";
默認(rèn)導(dǎo)入
在模塊導(dǎo)出時(shí)，可能會(huì)存在默認(rèn)導(dǎo)出。同樣的，在導(dǎo)入時(shí)可以使用import指令導(dǎo)入這些默認(rèn)值。直接導(dǎo)入默認(rèn)值：
import defaultName from "my-module";
import myDefault, {foo, bar} from "my-module"; // 指定成員導(dǎo)入和默認(rèn)導(dǎo)入default關(guān)鍵字
// my-module.js
export default function() {}
// 等效于：
function func() {};
export {func as default};在import的時(shí)候，可以這樣用：
import a from './my-module';
// 等效于，或者說(shuō)就是下面這種寫法的簡(jiǎn)寫
import {default as a} from './my-module';關(guān)于如何在JavaScript中導(dǎo)入導(dǎo)出 module就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
