es6中用什麼匯入資源

在es6中，可使用import語句或者import()來匯入資源。import命令用於匯入指定模組（資原始檔），語法「import {成員} from '模組識別符號'」；import()用於匯入檔案或模組，語法「import(資源位置)」。

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

es6中可以進行模組化開發，在ES6模組化規範中定義:

每個js檔案都是一個獨立的模組
匯入其它模組成員使用import關鍵字
向外共用模組成員使用expost關鍵字

export命令

export

模組功能主要由兩個命令構成：export和import。export命令用於規定模組的對外介面，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命令可以出現在模組得任意位置，只要處於模組頂層就可以。如果處於塊級作用域內，就會報錯，import命令也是如此

通常情況下,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;
}

現在，載入這個模組。

// 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），應該是可以靜態分析的，所以不允許執行時改變。下面的寫法都是不允許的。

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的變數或方法，然後系統允許你為他取任意名字

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實際上並沒有匯入當前模組，只是相當於對外轉發了這兩個介面，導致當前模組不能直接使用foo和bar.

import()函數

import(specifier)

上面的程式碼中，import函數的引數specifier,指定所要載入的模組的位置。。import命令能夠接受什麼引數，import()函數就能接受什麼引數，兩者區別主要是後者為動態載入。

import()返回一個 Promise 物件。下面是一個例子。

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

import()函數可以用在任何地方，不僅僅是模組，非模組的指令碼也可以使用。它是執行時執行，也就是說，什麼時候執行到這一句，就會載入指定的模組。另外，import()函數與所載入的模組沒有靜態連線關係，這點也是與import語句不相同。import()類似於 Node 的require方法，區別主要是前者是非同步載入，後者是同步載入。

【相關推薦：、】

以上就是es6中用什麼匯入資源的詳細內容，更多請關注TW511.COM其它相關文章！