JavaScript中import有什么用

這篇文章主要介紹JavaScript中import有什么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

import 語(yǔ)句用于導(dǎo)入由另一個(gè)模塊導(dǎo)出的綁定。無(wú)論是否聲明了 strict mode，導(dǎo)入的模塊都運(yùn)行在嚴(yán)格模式下。import語(yǔ)句不能在嵌入式腳本中使用。

語(yǔ)法

import defaultExport from “module-name”;
import * as name from “module-name”;
import { export } from “module-name”;
import { export as alias } from “module-name”;
import { export1 , export2 } from “module-name”;
import { export1, export2 as alias2 , [...] } from “module-name”;
import defaultExport, { export [ , [...] ] } from “module-name”;
import defaultExport, * as name from “module-name”;
import “module-name”;

defaultExport

將引用模塊默認(rèn)導(dǎo)出的名稱。

module-name

要導(dǎo)入的模塊。這通常是包含模塊的 .js 文件的相對(duì)或絕對(duì)路徑名，可以不包括 .js 擴(kuò)展名。某些打包工具可以允許或要求使用該擴(kuò)展；檢查你的運(yùn)行環(huán)境，只允許單引號(hào)和雙引號(hào)的字符串。

name

引用時(shí)將用作一種命名空間的模塊對(duì)象的名稱。

export，exportN

要導(dǎo)入的導(dǎo)出名稱

alias，aliasN

將引用指定的導(dǎo)入的名稱。

描述

name 參數(shù)是“模塊對(duì)象”的名稱，它將用一種名稱空間來(lái)引用導(dǎo)出。導(dǎo)出參數(shù)指定單個(gè)命名導(dǎo)出，而import * as name 語(yǔ)法導(dǎo)入所有導(dǎo)出。

導(dǎo)入整個(gè)模塊的內(nèi)容

這將 myModule 插入當(dāng)前作用域，其中包含來(lái)自位于 /modules/my-module.js 文件導(dǎo)出的所有模塊。

import * as myModule from ‘/modules/my-module.js’;

在這里，訪問(wèn)導(dǎo)出意味著使用模塊名稱（在這種情況下為”myModule”）作為命名空間。例如，如果上面導(dǎo)入的模塊包含一個(gè)doAllTheAmazingThings()，你可以這樣調(diào)用：

myModule.doAllTheAmazingThings();

導(dǎo)入單個(gè)導(dǎo)出

給定一個(gè)名為 myExport 的對(duì)象或值，它已經(jīng)從模塊 my-module 導(dǎo)出（因?yàn)檎麄€(gè)模塊被導(dǎo)出）或顯式導(dǎo)出（使用 export 語(yǔ)句），將 myExport 插入到當(dāng)前作用域。

import { myExport } from ‘/modules/my-module.js’;

導(dǎo)入多個(gè)導(dǎo)出

將 foo 和 bar 插入當(dāng)前作用域。

import { foo, bar } from ‘/modules/my-module.js’;

導(dǎo)入帶有別名的導(dǎo)出

導(dǎo)入時(shí)可以重命名導(dǎo)出，例如，將shortName 插入當(dāng)前作用域。

import { reallyReallyReallyLongModuleExportName as shortName } from “/modules/my-module.js”;

導(dǎo)入時(shí)重命名多個(gè)導(dǎo)出

使用別名導(dǎo)入模塊的多個(gè)導(dǎo)出。

import {
    reallyReallyReallyLongModuleMemberName as shortName,
    anotherLongModuleName as short
} form “/modules/my-module.js”;

僅為副作用而導(dǎo)入一個(gè)模塊

模塊僅為副作用（中性詞、無(wú)貶義含義）而導(dǎo)入，而不是導(dǎo)入模塊中的任何內(nèi)容，這將運(yùn)行模塊中的全局代碼，但實(shí)際上不導(dǎo)入任何值。

import “/modules/my-module.js”

導(dǎo)入默認(rèn)值

在 default-export （無(wú)論是對(duì)象、函數(shù)、類等）有效時(shí)可用。然后可以使用 import 語(yǔ)句來(lái)導(dǎo)入這樣的默認(rèn)值。
最簡(jiǎn)單的用法是直接導(dǎo)入默認(rèn)值：

import myDefault from “/modules/my-module.js”;

也可以同時(shí)將 default 語(yǔ)法與上述用法（命名空間導(dǎo)入和命名導(dǎo)入）一起使用。在這種情況下，default 導(dǎo)入必須首先聲明。

import myDefault, * as myModule from “/modules/my-module.js”;

或者

import myDefault, { foo, bar } from “/modules/my-module.js”;

示例

從輔助模塊導(dǎo)入以協(xié)助處理 AJAX DSON 請(qǐng)求。

模塊：file.js

function getJSON(url, callback){
    let xhr = new XMLHttpRequest();
    xhr.onload = function () {
        callback(this.responseText)
    };
    xhr.open(‘GET’, url, true);
    xhr.send();
}
export function getUserFulContents(url, callback){
    getJSON(url, data => callback(JSON.parse(data)));
}

主程序：main.js

import { getUserFulContents } from “/modules/file.js”;
getUserFulContents(‘http://www.example.com”, 
    data => { doSomethingUseful(data); } )

以上是“JavaScript中import有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！