一篇文章弄懂 JavaScript 中的 import

2023年6月6日 158次阅读 来源: 陈田田

import 语句用于导入由另一个模块导出的绑定。不管是不是声清楚明了 strict mode，导入的模块都运转在严厉形式下。import语句不能在嵌入式剧本中运用。

语法

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

将援用模块默许导出的称号。

module-name

要导入的模块。这通常是包括模块的 .js 文件的相对或相对路径名，能够不包括 .js 扩大名。某些打包东西能够许可或要求运用该扩大；搜检你的运转环境，只许可单引号和双引号的字符串。

name

援用时将用作一种定名空间的模块对象的称号。

export，exportN

要导入的导出称号

alias，aliasN

将援用指定的导入的称号。

形貌

name 参数是“模块对象”的称号，它将用一种称号空间来援用导出。导出参数指定单个定名导出，而import * as name 语法导入一切导出。

导入全部模块的内容

这将 myModule 插进去当前作用域，个中包括来自位于 /modules/my-module.js 文件导出的一切模块。

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

在这里，接见导出意味着运用模块称号（在这类状况下为”myModule”）作为定名空间。比方，假如上面导入的模块包括一个doAllTheAmazingThings()，你能够如许挪用：

myModule.doAllTheAmazingThings();

导入单个导出

给定一个名为 myExport 的对象或值，它已从模块 my-module 导出（由于全部模块被导出）或显式导出（运用 export 语句），将 myExport 插进去到当前作用域。

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

导入多个导出

将 foo 和 bar 插进去当前作用域。

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

导入带有别号的导出

导入时能够重定名导出，比方，将shortName 插进去当前作用域。

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

导入时重定名多个导出

运用别号导入模块的多个导出。

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

仅为副作用而导入一个模块

模块仅为副作用（中性词、无贬义寄义）而导入，而不是导入模块中的任何内容，这将运转模块中的全局代码，但实际上不导入任何值。

import “/modules/my-module.js”

导入默许值

在 default-export （不管是对象、函数、类等）有用时可用。然后能够运用 import 语句来导入如许的默许值。
最简朴的用法是直接导入默许值：

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

也能够同时将 default 语法与上述用法（定名空间导入和定名导入）一同运用。在这类状况下，default 导入必需起首声明。

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

或许

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

示例

从辅佐模块导入以辅佐处置惩罚 AJAX DSON 要求。

模块：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); } )

补充

strict mode
严厉形式
嵌入式剧本

    原文作者：陈田田
    原文地址: https://segmentfault.com/a/1190000017298307
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞