在es6中，可使用import語(yǔ)句或者import()來(lái)導(dǎo)入資源。import命令用于導(dǎo)入指定模塊（資源文件），語(yǔ)法“import {成員} from '模塊標(biāo)識(shí)符'”；import()用于導(dǎo)入文件或模塊，語(yǔ)法“import(資源位置)”。

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

es6中可以進(jìn)行模塊化開(kāi)發(fā)，在ES6模塊化規(guī)范中定義:

• 每個(gè)js文件都是一個(gè)獨(dú)立的模塊

• 導(dǎo)入其它模塊成員使用import關(guān)鍵字

• 向外共享模塊成員使用expost關(guān)鍵字

export命令

export

模塊功能主要由兩個(gè)命令構(gòu)成：export和import。export命令用于規(guī)定模塊的對(duì)外接口，import命令用于導(dǎo)入其他模塊提供的功能。

一個(gè)模塊就是一個(gè)獨(dú)立的文件。該文件內(nèi)部所有的變量，外部無(wú)法獲取。如果你希望外部能夠讀取模塊內(nèi)部的某個(gè)變量，就必須使用export關(guān)鍵字輸出該變量。
例如：

//test1.js export var firstName = 'mike' export var lastName = 'Jack'

上面代碼是test1.js文件，保存了用戶信息。ES6將其視為一個(gè)模塊，里面用export命令對(duì)外部輸出了三個(gè)變量。
export的寫(xiě)法，除了像上面哪樣，還有另一種寫(xiě)法：

//test1.js var firstName = 'mike' var lastName = 'Jack' export {firstName, lastName}

export命令除了輸出變量，還可以輸出函數(shù)或類(lèi)

export function add(x, y){     return x + y }

export命令可以出現(xiàn)在模塊得任意位置，只要處于模塊頂層就可以。如果處于塊級(jí)作用域內(nèi)，就會(huì)報(bào)錯(cuò)，import命令也是如此

as

通常情況下,export輸出的變量就是本來(lái)的名字，但是可以使用as關(guān)鍵字重命名

function v1() { ... } function v2() { ... }  export {   v1 as streamV1,   v2 as streamV2,   v2 as streamLatestVersion };

import命令

使用export命令定義了模塊的對(duì)外接口以后，其他js文件就可以通過(guò)import命令加載這個(gè)模塊

import {firstName, lastName} from './test1.js' console.log(firstName,lastName)

如果想為輸入的變量重新取一個(gè)名字，import命令要使用as，將輸入的變量重命名。

import {lastName as suName} from './test1.js'

import命令輸入的變量都是只讀的，因?yàn)樗谋举|(zhì)是輸入接口。也就是說(shuō)，不允許在加載模塊的腳本里面改寫(xiě)接口。

import {a} from './xxx' a = {}   //報(bào)錯(cuò)

import后面的from指定模塊文件的位置，可以是相對(duì)路徑，也可以是絕對(duì)路徑，.js后綴可以省去。如果只是模塊名，不帶有路徑，那么必須有配置文件，告訴JavaScript引擎該模塊的位置

模塊的整體加載

除了指定加載某個(gè)輸出值，還可以使用整體加載，即用星號(hào)（*）指定一個(gè)對(duì)象，所有輸出值都加載在這個(gè)對(duì)象上面。

下面是一個(gè)circle.js文件，它輸出兩個(gè)方法area和circumference。

// circle.js export function area(radius) {   return Math.PI * radius * radius; }  export function circumference(radius) {   return 2 * Math.PI * radius; }

現(xiàn)在，加載這個(gè)模塊。

// main.js  import { area, circumference } from './circle'; console.log('圓面積：' + area(4)); console.log('圓周長(zhǎng)：' + circumference(14));

上面寫(xiě)法是逐一指定要加載的方法，整體加載的寫(xiě)法如下。

import * as circle from './circle'; console.log('圓面積：' + circle.area(4)); console.log('圓周長(zhǎng)：' + circle.circumference(14));

注意，模塊整體加載所在的那個(gè)對(duì)象（上例是circle），應(yīng)該是可以靜態(tài)分析的，所以不允許運(yùn)行時(shí)改變。下面的寫(xiě)法都是不允許的。

import * as circle from './circle';  // 下面兩行都是不允許的 circle.foo = 'hello'; circle.area = function () {};

export default 命令

export default用來(lái)為模塊指定默認(rèn)輸出

//export-default.js export default function(){     console.log('foo') }

其他模塊加載該模塊時(shí)，import命令可以為該匿名函數(shù)指定任意名字

import cus from './export-default.js'

export default命令用在非匿名函數(shù)前，也是可以的，但是在模塊外部該函數(shù)名是無(wú)效的，加載的時(shí)候，視為匿名函數(shù)加載，本質(zhì)上，export default就是輸出一個(gè)叫做default的變量或方法，然后系統(tǒng)允許你為他取任意名字

export default function test(){     console.log('test') }

對(duì)比正常輸出和默認(rèn)輸出

//第一組 export function arc(){     //... } //輸出  import {arc} from 'arc'  //輸入  //第二組 export default arc2(){     //... }  //輸出 import arc2 from 'arc2'   //輸入

總結(jié)：export對(duì)應(yīng)的import語(yǔ)句需要使用大括號(hào)，export default對(duì)應(yīng)的import語(yǔ)句不需要使用大括號(hào)。export default命令用于指定模塊的默認(rèn)輸出，顯然，一個(gè)模塊只能有一個(gè)默認(rèn)輸出，因此export default在同一個(gè)模塊中只允許使用一次。所以與他對(duì)應(yīng)的import命令后面才不用加大括號(hào)

export 與 import的復(fù)合寫(xiě)法

如果在一個(gè)模塊中，先輸入后輸出同一個(gè)模塊，import語(yǔ)句可以與export語(yǔ)句寫(xiě)在一起

export {foo, bar} from 'my_module' //可以簡(jiǎn)單理解為 import {foo, bar} from 'my_module' export {foo, bar}

上面代碼中，export和import語(yǔ)句可以結(jié)合在一起，寫(xiě)成一行。但需要注意的是，寫(xiě)成一行以后，foo和bar實(shí)際上并沒(méi)有導(dǎo)入當(dāng)前模塊，只是相當(dāng)于對(duì)外轉(zhuǎn)發(fā)了這兩個(gè)接口，導(dǎo)致當(dāng)前模塊不能直接使用foo和bar.

import()函數(shù)

import(specifier)

上面的代碼中，import函數(shù)的參數(shù)specifier,指定所要加載的模塊的位置。。import命令能夠接受什么參數(shù)，import()函數(shù)就能接受什么參數(shù)，兩者區(qū)別主要是后者為動(dòng)態(tài)加載。

import()返回一個(gè) Promise 對(duì)象。下面是一個(gè)例子。

const main = document.querySelector('main'); import(`./section-modules/${someVariable}.js`)   .then(module => {     module.loadPageInto(main);   })   .catch(err => {     main.textContent = err.message;   });

import()函數(shù)可以用在任何地方，不僅僅是模塊，非模塊的腳本也可以使用。它是運(yùn)行時(shí)執(zhí)行，也就是說(shuō)，什么時(shí)候運(yùn)行到這一句，就會(huì)加載指定的模塊。另外，import()函數(shù)與所加載的模塊沒(méi)有靜態(tài)連接關(guān)系，這點(diǎn)也是與import語(yǔ)句不相同。import()類(lèi)似于 Node 的require方法，區(qū)別主要是前者是異步加載，后者是同步加載。

【