资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/import and export 之 （export）

import and export 之 （export）

weij / 1075人阅读

摘要：和必须始终显示在其各自用法的顶级范围中。也就是说不可以在条件中放置或它们必须放在所有块和函数之外。不幸的是，它存在一些缺点，并正式地不鼓励这样做。用户可以另外手动将和列为命名导入，如果他们想要的话。

ES6提供了两个关键字import导入和export导出，语法上有些差别。
!important: import和export必须,始终显示在,其各自用法的,顶级范围中。也就是说不可以在if条件中放置import或export; 它们必须放在所有块和函数之外。

exporting API Members 导出API成员

export关键字要么放在声明之前，要么作为运算符（排序）使用要export的特定绑定列表。

export function foo() {
    // ..
}

export var awesome = 42;

var bar = [1,2,3];
export { bar };

相同的表达exports的方法:

function foo() {
    // ..
}

var awesome = 42;
var bar = [1,2,3];

export { foo, awesome, bar };

这些都称为 命名导出( named export) ，因为您实际上导出变量/函数/等的名称绑定。
任何你不标记export,会在模块的范围内保持private。 也就是说，尽管var bar = ..看起来像是在顶级全局范围声明，顶级范围实际上是模块本身; 模块中没有全局范围。

注意：模块仍然可以访问window和所有的globals ，挂起它，只是不是作为词汇顶级范围。 但是，你真的应该远离全局模块，如果可能的话。

您还可以在命名导出期间对模块成员进行“重命名”（也称为别名）：

function foo() { .. }

export { foo as bar };

导入此模块时，只有bar成员名称可用于导入; foo保持隐藏在模块内。

模块导出不仅仅是值或引用的正常赋值，因为您习惯于=赋值运算符。 实际上，当你导出一些东西，你正在导出一个绑定（有点像一个指针）到那个东西（变量等）。

在模块中，如果更改已导出绑定的变量的值，即使已经导入（参见下一部分），导入的绑定也将解析为当前（更新）的值。

试想一下：

var awesome = 42;
export { awesome };

// later
awesome = 100;

导入此模块时，无论是在awesome = 100设置之前还是之后，一旦分配已经发生，导入的绑定将解析为值100，而不是42。

这是因为绑定本质上是对awesome变量本身的引用或指针，而不是其值的副本。JS引入了ES6模块绑定,这是一个大多数前所未有的概念。

虽然您可以在模块的定义中清楚地多次使用export，但ES6绝对偏好模块,具有单个导出的方法，这称为default export。用TC39委员会的一些成员的话来说，如果你遵循这种模式，你就会被“简单的import语法”所奖励，而如果你不这么做，则反过来被更冗长的语法来“惩罚”。

默认导出将特定导出的绑定设置为导入模块时的默认值。绑定的名称字面上是默认的。正如你将在后面看到的，当导入模块绑定时，你也可以重命名它们，就像你通常使用默认导出一样。

每个模块定义只能有一个默认值。如果模块具有默认导出，您将看到导入语法如何更简洁。

对于默认导出语法有一个微妙的细微差别，您应该密切注意。比较这两个片段：

function foo(..) {
    // ..
}

export default foo;

and

function foo(..) {
    // ..
}

export { foo as default };

在第一个片段中，您正在导出一个绑定到此时的函数表达式值，而不是标识符foo。 换句话说，导出export default ..采用一个表达式。 如果以后将foo分配给模块中的其他值，则模块导入仍会显示最初导出的函数，而不是新值。

顺便说一下，第一个片段也可以写成：

export default function foo(..) {
    // ..
}

警告：虽然这里function foo..在技术上,是一个函数表达式，为了模块的内部范围的目的，它被视为一个函数声明，因为foo名称绑定在模块的顶级作用域 称为“提升”）。 出口默认类Foo也是如此。但是，虽然你可以做到export var foo = ..，但你目前不能做到export default var foo = ..（或let或const），在一个令人沮丧的不一致的情况下。 在撰写本文时，为了一致性，已经讨论了在ES6之后很快增加这种能力。

function foo(..) {
    // ..
}

export { foo as default };

在此版本的模块导出中，默认导出绑定实际上是foo标识符而不是它的值，所以您获得前面描述的绑定行为（即，如果您以后更改foo的值，你在import端看到的值也将更新）。

在默认导出语法中要非常小心这个微妙的问题，特别是如果你的逻辑需要更新导出值。 如果你从来没有计划更新默认导出的值，export default ..是很好的。 如果您计划更新值，则必须使用export {.. as default}。 无论哪种方式，确保评论你的代码如何来解释你的意图！

因为每个模块只能有一个默认值，所以您可能会试图使用一个对象的默认导出,来设计您的模块，其中包含所有的API方法，例如：

export default {
    foo() { .. },
    bar() { .. },
    ..
};

这种模式，似乎很密切地，映射了很多开发人员，已经构建了，他们的ES6之前的模块，所以，它似乎是，一个自然的方法。 不幸的是，它存在一些缺点，并正式地不鼓励这样做。

特别是，JS引擎，不能静态分析普通对象的内容，这意味着，它不能对静态导入性能，做一些优化。 每个成员多带带和显式导出的优点是，引擎可以进行静态分析和优化。

如果你的API，已经有多个成员，似乎这些原则 - 每个模块一个默认导出，所有API成员名为exports - 存在冲突，不是吗？ 但是您可以有一个默认导出以及其他命名导出; 它们不是相互排斥的。

因此，替换掉当前的（不建议的）模式：

export default function foo() { .. }

foo.bar = function() { .. };
foo.baz = function() { .. };

you can do that

export default function foo() { .. }

export function bar() { .. }
export function baz() { .. }

注意：在前面的代码段中，我使用名称foo作为默认函数的标签。 然而，名称foo，为了导出的目的被忽略 - default实际上是导出的名称。 当您导入此默认绑定时，您可以为其指定任何所需的名称，如下一部分中所示。

function foo() { .. }
function bar() { .. }
function baz() { .. }

export { foo as default, bar, baz, .. };

当我们短期覆盖import时，混合default和命名exports的影响将更加清晰。但实质上它意味着最简洁的默认import形式,将只检索foo()函数。用户可以另外手动将bar和baz列为命名导入，如果他们想要的话。

你可以想象如果你有很多命名的导出绑定，你模块的用户将是多么乏味。这里有一个通配符导入表单，您可以在单个命名空间对象中导入所有模块的exports，但是无法将通配符导入到顶级绑定。

同样，ES6模块机制被有意设计为阻止具有大量输出的模块;相对来说，希望这样的方法有点困难，作为一种社会工程，它鼓励简单的模块设计，因为这将有利于大/复杂的模块设计。

我建议你不要混合default export与命名exports，这将是是不切实际或不需要，特别是如果你有一个大的API和重构多带带的模块。在这种情况下，只需使用所有named exports，并记录您的模块的用户应该使用import * as ..（命名空间导入）方法在单个命名空间中立即带来整个API。

我们之前提到过，但让我们更详细地回味一下。除了导出表达式值绑定的export default ...外，所有其他导出表单,都正在导出绑定到本地标识符。

GPU云服务器 云服务器 Exporting exported exports exporter

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

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

相关文章

  • ES6 的模块系统

    摘要：的模块系统被设计成让你可以一次性引入多个变量。动态静态，或者说规矩和如何打破规矩作为一门动态编程语言，令人惊讶地拥有一个静态的模块系统。只要你的需求都是静态的话，这个模块系统还是很的。 此文为翻译，原文地址在这儿：https://hacks.mozilla.org/2015/08/es6-in-depth-modules/ ES6 是 ECMAScript 第 6 版本的简称，这是新一...

    MudOnTire 评论0 收藏0

  • 前端进阶（6） - webpack 之外的另一种选择：rollup

    摘要：之外的另一种选择对前端来说是再熟悉不过的工具了，它提供了强大的功能来构建前端的资源，包括等语言脚本，也包括等二进制文件。所以，一个不错的选择是，应用使用，类库使用。 webpack 之外的另一种选择：rollup webpack 对前端来说是再熟悉不过的工具了，它提供了强大的功能来构建前端的资源，包括 html/js/ts/css/less/scss ... 等语言脚本，也包括 ima...

    stefan 评论0 收藏0

  • es6- export and import

    摘要：如果我们想要包含得单独导入和导出二和的注意点可能的错误在没有的情况下，不能匿名函数前面我们讲到可以在定义一个函数的时候就，但是这个函数不能是匿名函数，除非这个函数作为导出。 一： export和import的正常用法1：export变量 // ./module/example.js export var firstName = roger; export const lastName...

    Worktile 评论0 收藏0

  • 前端常用4种模块化方案总结.md

    摘要：最后衍生出面向各种使用场景的模块标准。定义模块返回对象的匿名模块调用模块应用由模块组成，采用模块规范。其模块功能主要由两个命令构成和。命令用于规定模块的对外接口，导出模块暴露的命令用于输入其他模块提供的功能引入其他模块。 JS诞生之初面向简单页面开发， 没有模块的概念。后来页面逐渐复杂， 人类构造到 IIFE 立即执行函数来模拟 模块；之前也有雅虎的实践，使用命名空间 作为模块名。最后...

    lookSomeone 评论0 收藏0

  • CSS_JS_Tips

    摘要：所以，无形之后，会增加一个顶层命名空间。导入一个空模块，是一个空对象一个模块就是一个对象。 工作中遇见的CSS问题或JS技巧 rem 计算 rem等比缩放样式 方案1 @media screen and (min-width: 320px) {html{font-size:50px;}} @media screen and (min-width: 360px) {html{font-s...

    张春雷 评论0 收藏0

发表评论

登陆后可评论

0条评论

weij

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<