一篇文章弄懂 JavaScript 中的 import

why_rookie 发布于2019-08-23 13:56 / 1155人阅读

摘要：无论是否声明了，导入的模块都运行在严格模式下。这通常是包含模块的文件的相对或绝对路径名，可以不包括扩展名。引用时将用作一种命名空间的模块对象的名称。导出参数指定单个命名导出，而语法导入所有导出。导入默认值在无论是对象函数类等有效时可用。

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
严格模式
嵌入式脚本

GPU云服务器云服务器如何批量替换wordpress文章中的文 javascript中的弄懂 javaScript中的this

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99820.html

不再彷徨：完全弄懂JavaScript中的this（译文总结）

摘要：至于，其只是以数组的方传入参数，其它部分是一样的，如下它们也可用于在中的类继承中，调用父级构造器。间接调用，调用了父级构造器对比方法和，它俩都立即执行了函数，而函数返回了一个新方法，绑定了预先指定好的，并可以延后调用。其实this是一个老生常谈的问题了。关于this的文章非常多，其实我本以为自己早弄明白了它，不过昨天在做项目的过程中，还是出现了一丝疑惑，想到大概之前在JavaScri...

YanceyOfficial 2019-08-21 10:56 评论0 收藏0
更快助你弄懂React-高阶组件

摘要：等价于是一个返回函数的函数就是个高阶函数返回的函数就是一个高阶组件，该高阶组件返回一个与关联起来的新组件的也是一样的总结一下高阶组件是对代码进行更高层次重构的好方法，如果你想精简你的和生命周期方法，那么高阶组件可以帮助你提取出可重用的函数。谈到react,我们第一个想到的应该是组件,在react的眼中可真的是万物皆组件。就连我们获取数据用到的axios也可以用组件来表示...比如,我...

qylost 2019-08-02 15:34 评论0 收藏0
更快助你弄懂React-高阶组件

摘要：等价于是一个返回函数的函数就是个高阶函数返回的函数就是一个高阶组件，该高阶组件返回一个与关联起来的新组件的也是一样的总结一下高阶组件是对代码进行更高层次重构的好方法，如果你想精简你的和生命周期方法，那么高阶组件可以帮助你提取出可重用的函数。谈到react,我们第一个想到的应该是组件,在react的眼中可真的是万物皆组件。就连我们获取数据用到的axios也可以用组件来表示...比如,我...

libxd 2019-08-26 10:16 评论0 收藏0
更快助你弄懂React-高阶组件

摘要：等价于是一个返回函数的函数就是个高阶函数返回的函数就是一个高阶组件，该高阶组件返回一个与关联起来的新组件的也是一样的总结一下高阶组件是对代码进行更高层次重构的好方法，如果你想精简你的和生命周期方法，那么高阶组件可以帮助你提取出可重用的函数。谈到react,我们第一个想到的应该是组件,在react的眼中可真的是万物皆组件。就连我们获取数据用到的axios也可以用组件来表示...比如,我...

dreamGong 2019-08-30 15:44 评论0 收藏0
更快助你弄懂React-高阶组件

摘要：等价于是一个返回函数的函数就是个高阶函数返回的函数就是一个高阶组件，该高阶组件返回一个与关联起来的新组件的也是一样的总结一下高阶组件是对代码进行更高层次重构的好方法，如果你想精简你的和生命周期方法，那么高阶组件可以帮助你提取出可重用的函数。谈到react,我们第一个想到的应该是组件,在react的眼中可真的是万物皆组件。就连我们获取数据用到的axios也可以用组件来表示...比如,我...

xushaojieaaa 2019-08-30 15:44 评论0 收藏0