我们什么时候在javascript导入中使用'{}'？

Question

我正在学习Javascript导入,当我们从另一个JS文件导入项目(函数,对象,变量)时使用花括号时我还没理解.

import Search from './models/Search';
import * as searchView from './views/searchView';
import { elements, renderLoader } from './views/base'
//elements is an object, renderLoader is a function

Answer 1

import语句用于从另一个模块导入导出的绑定

大括号({})被用于导入命名绑定和其背后的概念被称为解构分配解构分配的概念是一个过程,使得能够从解包阵列的值或导入的模块中的对象分成不同的变量

花括号({})用于导入命名绑定

我想借助一个例子来解释ES6中不同类型的导入

假设我们有AA模块命名Aninmals(Animals.js)让假设模块导出一个默认绑定Man和其他几个命名绑定,例如Cat,Dog等

/*
 Animal.js
*/
..
export Cat;
export Dog
export default Man

从模块导入单个导出

为了从另一个模块导出单个导出(比如Cat),我们可以这样写

/*
 Anothermodule.js
*/
import {Cat} from "./Animals"

同样对于狗

/*
 YetAnothermodule.js
*/
import {Dog} from "./Animals"

从模块导入多个导出

您还可以按如下方式导入多个模块

/*
 Anothermodule.js
*/
import {Dog, Cat} from "./Animals"

使用更方便的别名导入导出

/*
 Anothermodule.js
*/
import {Dog as Puppy}  from './Animals.js';

导入期间重命名多个导出

/*
 Anothermodule.js
*/
import {Dog as Puppy, Cat as Kitty}  from './Animals.js';

但是在将Man导入另一个模块的情况下,因为它是一个默认导出,你可以把它写成thie

/*
 Anothermodule.js
*/
import Man  from './Animals.js';

例如,您也可以将上述两种变体混合使用

/*
 Anothermodule.js
*/
import Man, {Dog as Puppy, Cat as Kitty} from '/Animals.js';

导入整个模块的内容

如果要导入可以使用的所有内容

/*
 Anothermodule.js
*/
import * as Animals from './Animals.js';

在这里,访问导出意味着使用模块名称(在本例中为"Animals")作为命名空间.例如,如果您想在这种情况下使用Cat,您可以像下面一样使用它

Animals.Cat

您可以在此处阅读有关导入的更多信息

你可以在这里阅读有关解构的内容

Answer 2

import { elements, renderLoader } from './views/base'

是您需要从模块导入单个命名导出的方式，在本例中，它是导入命名导出 elements并renderLoader从base.js.

在许多情况下，语法{ elements, renderLoader }只是ECMAScript 标准最新版本中添加的语法糖（称为解构）。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring

但在这种情况下，有必要仅获取所需的命名导出。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Import_a_single_export_from_a_module

请注意，您还可以为变量选择新名称，如下所示：

import { elements as newNameForElements, renderLoader as newNameForRenderLoader } from './views/base'

这将使elements导出可用newNameForElements等。