es6中怎么導入資源

本篇內容介紹了“es6中怎么導入資源”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

在es6中，可使用import語句或者import()來導入資源。import命令用于導入指定模塊（資源文件），語法“import {成員} from '模塊標識符'”；import()用于導入文件或模塊，語法“import(資源位置)”。

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

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

• 每個js文件都是一個獨立的模塊

• 導入其它模塊成員使用import關鍵字

• 向外共享模塊成員使用expost關鍵字

export命令

export

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

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

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

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

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

export命令除了輸出變量，還可以輸出函數或類

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

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

as

通常情況下,export輸出的變量就是本來的名字，但是可以使用as關鍵字重命名

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

import命令

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

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

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

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

import命令輸入的變量都是只讀的，因為它的本質是輸入接口。也就是說，不允許在加載模塊的腳本里面改寫接口。

import {a} from './xxx'
a = {}   //報錯

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

模塊的整體加載

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

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

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

export function circumference(radius) {
  return 2 * Math.PI * radius;
}

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

// main.js

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

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

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

注意，模塊整體加載所在的那個對象（上例是circle），應該是可以靜態(tài)分析的，所以不允許運行時改變。下面的寫法都是不允許的。

import * as circle from './circle';

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

export default 命令

export default用來為模塊指定默認輸出

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

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

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

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

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

對比正常輸出和默認輸出

//第一組
export function arc(){
    //...
} //輸出

import {arc} from 'arc'  //輸入

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

總結：export對應的import語句需要使用大括號，export default對應的import語句不需要使用大括號。export default命令用于指定模塊的默認輸出，顯然，一個模塊只能有一個默認輸出，因此export default在同一個模塊中只允許使用一次。所以與他對應的import命令后面才不用加大括號

export 與 import的復合寫法

如果在一個模塊中，先輸入后輸出同一個模塊，import語句可以與export語句寫在一起

export {foo, bar} from 'my_module'
//可以簡單理解為
import {foo, bar} from 'my_module'
export {foo, bar}

上面代碼中，export和import語句可以結合在一起，寫成一行。但需要注意的是，寫成一行以后，foo和bar實際上并沒有導入當前模塊，只是相當于對外轉發(fā)了這兩個接口，導致當前模塊不能直接使用foo和bar.

import()函數

import(specifier)

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

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

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

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

“es6中怎么導入資源”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！