ES6模塊之export和import教程-創(chuàng)新互聯(lián)

一、ES6中的模塊
ES6中的模塊即使一個(gè)包含JS代碼的文件，在這個(gè)模塊中所有的變量都是對(duì)其他模塊不可見的，除非我們導(dǎo)出它。ES6的模塊系統(tǒng)大致分為導(dǎo)出（export）和導(dǎo)入（import）兩個(gè)模塊。
★在瀏覽器中直接使用es6模塊

創(chuàng)新互聯(lián)是一家專業(yè)提供綏棱企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、H5場(chǎng)景定制、小程序制作等業(yè)務(wù)。10年已為綏棱眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

• 顯示聲明type="module"
• script 里面要加 type="module", 這樣瀏覽器才會(huì)把相關(guān)的代碼當(dāng)作ES6的module 來對(duì)待

  <script type="module"> 
  import {addTextToBody} from './utils.js';   //直接寫 'utils.js' 會(huì)報(bào)錯(cuò)
      //你可以寫絕對(duì)路徑和相對(duì)路徑， 但是不能直接寫文件名，即使是同一層級(jí)下面的文件。也要加上 './utils.js'
      //文件名后綴 .js 必須要有，不然瀏覽器無法識(shí)別路徑。
  addTextToBody('Modules are pretty cool.'); 
  </script>

  ★使用webpack來進(jìn)行模塊化開發(fā)
  只需在需要的地方使用export或者import，其他的都交給webpack進(jìn)行處理，就不需要聲明什么type="module"了

二、導(dǎo)入的具體使用

場(chǎng)景1：只想導(dǎo)入源模塊的部分內(nèi)容
假設(shè)a.js是以如下方式導(dǎo)出的

// a.js
export var num = 100
export var name = '王小明'

也可以是
var num = 100;
var name = '王小明';
export {num}
export {name}
export {num,name}
不可以是：export num 或者 export name，這種寫法需要加上{}，上面寫在一行的可以直接那樣寫

那么如果我們只需要a模塊的num，就應(yīng)該按下面的方式導(dǎo)入它

// b.js
import {num} from './a.js'  //num必須加上{}，不可以直接是import num，.js后綴可省略
console.log(num) // 100

此處的模塊導(dǎo)入利用了ES6的解構(gòu)方式

場(chǎng)景2：不滿意源模塊所導(dǎo)出的變量或方法的名稱，想要為它們另起名稱
假設(shè)a.js中有一個(gè)名稱如此晦澀的變量gddhauabsg

// a.js
export var gddhauabsg = 100

忍不住想要重命名這個(gè)變量的名稱，但是又無權(quán)或不想修改源模塊的話，那么不妨這么做

// b.js
// 如此，我們就可以在b.js中愉快的使用num了
import {gddhauabsg as num} from './a.js'
console.log(num) // 100

場(chǎng)景3：想要把源模塊的所有導(dǎo)出都導(dǎo)入進(jìn)來，但偏偏源模塊不是以export default方式導(dǎo)出的
假設(shè)a模塊將每個(gè)變量都單獨(dú)，且聲明時(shí)立即導(dǎo)出

// a.js
export var num = 100
export var name = '王小明'

那么我們就要這樣導(dǎo)入a的所有導(dǎo)出

// b.js
import * as moduleA from './a.js'
console.log(moduleA.num)  // 100
console.log(moduleA.name) // '王小明'

解釋一哈：*代表源模塊（除去export default）的所有導(dǎo)出的集合，該集合類似Object類型，*就相當(dāng)于{num: 100, name: '王小明'}，所以在源模塊沒有使用export default導(dǎo)出時(shí)，我們就可以使用上面的方式導(dǎo)入源模塊的所有導(dǎo)出

場(chǎng)景4：源模塊并沒有對(duì)外暴露任何導(dǎo)出
a模塊沒有導(dǎo)出任何內(nèi)容

// a.js
var arr = [1, 2, 3]
for (var i = 0;i < arr.length;i++) {
    console.log(arr[i])
}

那么b文件將a.js文件整個(gè)引入就好了

// b.js
// 此處會(huì)執(zhí)行a.js的所有代碼邏輯
import './a.js'

那么有些童鞋可能會(huì)有個(gè)疑問“這種導(dǎo)入方式的應(yīng)用場(chǎng)景在哪？”，不知道大家是否聽過'膩?zhàn)幽_本'這一概念，就是一些第三方腳本或工具，作用類似于補(bǔ)丁，用于兼容一些新特性或功能，在一般情況下，這些腳本或工具只需要自執(zhí)行，并且通常都是在我們的業(yè)務(wù)代碼之前引入

三、導(dǎo)出的具體使用
ES6模塊的導(dǎo)出方式大致有兩種：命名導(dǎo)出、默認(rèn)導(dǎo)出；

場(chǎng)景1：源模塊怎樣才能支持命名導(dǎo)入和命名空間導(dǎo)入？

// a.js
// 方式1：在源模塊末尾集中導(dǎo)出（當(dāng)導(dǎo)出較多時(shí)，推薦此方式，方便管理導(dǎo)出）
var num = 100
var name = '王小明'
var flag = true
export {
    num,
    name,
    flag
}

// 方式2：聲明時(shí)立即導(dǎo)出（當(dāng)導(dǎo)出較少時(shí)，推薦此方式）

export var num = 100
export var name = '王小明'
export var flag = true

場(chǎng)景2：導(dǎo)出的內(nèi)容前后名稱需要不一致，那么我們可以嘗試重命名
什么意思呢？如果源模塊的開發(fā)者有下面這種想法時(shí)，就應(yīng)該使用重命名導(dǎo)出：‘我想要提高代碼的可讀性且有較好的語義化，此時(shí)變量或方法的名稱長(zhǎng)度一定不會(huì)太短，類似getOrderInfoFromDatabaseByHttp這種命名，但又不想讓使用我的模塊的人覺得我的導(dǎo)出名稱過長(zhǎng)’，示例如下：

// a.js
// 名稱真的好長(zhǎng)
var getOrderInfoFromDatabaseByHttp = function () {
    // ...
}
export {
    // 如果沒有重命名，就會(huì)導(dǎo)出下面這一大串
    // getOrderInfoFromDatabaseByHttp
    // 但如果使用了重命名，方法的名稱就會(huì)變得很簡(jiǎn)潔，即getOrderInfo
    getOrderInfoFromDatabaseByHttp as getOrderInfo
}

場(chǎng)景3：模塊功能單一，并且只需要導(dǎo)出值，不需要具名，使用默認(rèn)導(dǎo)出export default

// version.js
export default 'v1.0.0'
// index.js
import version from './version.js'  //直接是version，不是{version}，而且導(dǎo)入時(shí)的名字可以隨意取，不一定就是version

上面的代碼功能很簡(jiǎn)單，只是導(dǎo)出項(xiàng)目的版本號(hào)，所以我們應(yīng)該使用默認(rèn)導(dǎo)出，而沒有必要像下面這樣寫：

// version.js
export var version = 'v1.0.0'
// index.js
import {version} from './version.js'
不是默認(rèn)導(dǎo)出需要加{}，是默認(rèn)導(dǎo)出就不需要加{}~~

四、總結(jié)
1、默認(rèn)導(dǎo)出
export default (默認(rèn)導(dǎo)出)，一個(gè)模塊里面只能有一個(gè)默認(rèn)導(dǎo)出
注意： 使用export default 向外暴露的成員，可以使用任意的變量名稱來接收
注意： 在一個(gè)模塊中，使用export default 只允許向外暴露1次
注意： 在一個(gè)模塊中，可以同時(shí)使用 export default 和 export 向外暴露成員

const apikey="123key";
export default apikey;

引入模塊：
import kkkk from '路徑'；

2、命名導(dǎo)出
注意： 使用 export 向外暴露的成員，如果不是這種寫法export var num = 100，而是 var num = 100，export {num}，導(dǎo)出的時(shí)候模塊名也得加上{}，只能使用 { } 的形式來接收，這種形式，叫做 【按需導(dǎo)出】
注意： 使用export 可以向外暴露多個(gè)成員， 同時(shí)，如果某些成員，我們?cè)?import 的時(shí)候，不需要，則可以 不在 {} 中定義
注意： 使用 export 導(dǎo)出的成員，必須嚴(yán)格按照 導(dǎo)出時(shí)候的名稱，來使用 {} 按需接收；
注意： 使用 export 導(dǎo)出的成員，如果 就想 換個(gè) 名稱來接收，可以使用 as 來起別名；

const apikey="123key";
const name="Marray";
function greet(name){
    console.log(name)
}
export {apikey,name,greet};//這種方式導(dǎo)出的模塊引入的時(shí)候必須是這個(gè)名稱，如下：
import {apikey,name,greet} from '路徑'

3、導(dǎo)出和引入模塊的時(shí)候都可以使用別名，如
export {apikey as key,name,greet};
當(dāng)我們引入模塊的時(shí)候必須使用別名
import {key，name,greet} from '路徑'

五、筆記
1、es6環(huán)境下，一個(gè)模塊就是一個(gè)獨(dú)立的文件。該文件內(nèi)部的所有變量，外部無法獲取。如果你希望外部能夠讀取模塊內(nèi)部的某個(gè)變量，就必須使用export關(guān)鍵字輸出該變量。

2、在src目錄下，新建common文件夾，新建profile.js，現(xiàn)在我們?cè)趐rofile.js里面加入以下代碼

export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
export const SuccMsgCode=0;

等價(jià)于

var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
const SuccMsgCode= 0;
export {firstName, lastName, year, SuccMsgCode};

es6會(huì)將，profile.js視為一個(gè)模塊，所以如果希望外部能訪問這三個(gè)變量，需要將其導(dǎo)出。但是應(yīng)該優(yōu)先考慮使用第二種寫法。因?yàn)檫@樣就可以在腳本尾部，一眼看清楚輸出了哪些變量。

在src目錄下的main.js文件中 中加入以下代碼

import {firstName, lastName, year, SuccMsgCode} from 'common/profile';
console.log('firstName\t' + firstName);
console.log('lastName\t' + lastName);
console.log('year\t' + year);
console.log('SuccMsgCode\t' + SuccMsgCode);

就會(huì)看到firstName，lastName，year, SuccMsgCode正常輸出了，但是此種方法是作為變量導(dǎo)入導(dǎo)出的，所以名稱必須一致。除非使用 as 命令指定新的名稱，例如：

導(dǎo)入時(shí)指定別名（不推薦）

export {firstName, lastName, year, SuccMsgCode};
import {firstName, lastName, year, SuccMsgCode as SuccMsgCode1} from 'common/profile';
console.log('SuccMsgCode\t' + SuccMsgCode1);

我們看到SuccMsgCode1正常顯示‘Hello World！’

或者，導(dǎo)出時(shí)指定別名

export {firstName, lastName, year, SuccMsgCode as SuccMsgCode2 };
import {firstName, lastName, year, SuccMsgCode2} from 'common/profile';
console.log('SuccMsgCode \t' + SuccMsgCode2);

我們看到SuccMsgCode 正常顯示‘Hello World！’
還可以直接使用以下語法：export { import1 as name1, import2 as name2, …, nameN } from …;

我們建議直接使用此種語法，方便又直觀，一般不在import時(shí)做別名處理。

3、export 不僅能導(dǎo)出變量，還能導(dǎo)出函數(shù)和類
在profile.js中加入以下代碼：

export function multiply (x, y) {
  return x * y;
};

上面代碼對(duì)外輸出一個(gè)函數(shù)multiply。
在main.js 中加入以下代碼

import {multiply} from 'common/profile';
console.log('multiply\t' + multiply);

multiply函數(shù)被打印出來
如果將profile.js中的代碼修改為：

export multiply = function (x, y) {
  return x * y;
};

等價(jià)于

function multiply (x, y) {
  return x * y;
};
export {multiply};

4、默認(rèn)導(dǎo)出 export default
如果將export 修改為 export default 則之前的導(dǎo)入導(dǎo)出變量皆不能使用，因?yàn)閑xport default只允許export出現(xiàn)一次，而且在使用導(dǎo)出、導(dǎo)入時(shí)，不需要加{}，代碼如下

function multiply (x, y) {
  return x * y;
};
export default multiply;
import multiply from 'common/profile';

如果需要導(dǎo)出整個(gè)文件，可使用如下代碼

export default {
  data () {
    return {
      firstName: 'Michael'
    };
  },
  methods: {
    multiply (x, y) {
      return x * y;
    }
  }
};

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站欄目：ES6模塊之export和import教程-創(chuàng)新互聯(lián)
文章分享：http://www.jbt999.com/article18/ccgcdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、品牌網(wǎng)站制作、搜索引擎優(yōu)化、用戶體驗(yàn)、Google、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)