资讯专栏INFORMATION COLUMN

es6- export and import

Worktile / 790人阅读

摘要:如果我们想要包含得多带带导入和导出二和的注意点可能的错误在没有的情况下,不能匿名函数前面我们讲到可以在定义一个函数的时候就,但是这个函数不能是匿名函数,除非这个函数作为导出。

一: export和import的正常用法
1:export变量

// ./module/example.js

export var firstName = "roger";
export const lastName = "waters";
export let dob = 1944;

// index.js
import  {firstName, lastName, dob} from "./module/example.js";

2:export方法

// ./module/example.js
//定义方法的时候,就可以export
export function sum(a, b) {
    return a + b;
}

function multiply(a, b) {
    return a * b;
}
//也可以先定义,再export
export { multiply };

在别的文件里面import上面2个方法,是一样的

//./index.js
import  {sum, multiply} from "./module/example.js";    

3:export重命名
有时候你也许不想用一个变量,方法,类的原本的名字,而是想换一个别的名字。那么你可以使用 as
,而且在export和import的时候都可以,例如:

// ./module/example.js
function sum(a, b) {
    return a + b;
}
export {sum as add};

//./index.js
import  {add} from "./module/example.js";

4: import重命名
在第三点里面,我们看到了可以在export的时候重命名变量。同样的效果,也可以在import的时候做,依然是用as

// ./module/example.js
function sum(a, b) {
    return a + b;
}
export {sum};

//./index.js
import  {sum as add} from "./module/example.js";

//此时在index.js里面可以被使用的方法是add(),而不是sum()

5:export default
我们可以给一个js module制定默认值,也就是这里的default。导出一个default和前面我们讲到的导出一个变量一样也是有三种方式:

1. 在定义的时候export

    //./module/example.js
    export  default  function(a, b) {
        return a + b;
    }
    
    //./index.js
    import  sum  from "./module/example.js";

export的可以是一个匿名函数,在导入的时候,用任意合理的名字代表默认导出,但是注意与非default变量的区别在于,这里没有花括号({})
2. 先定义再export

    //./module/example.js
    function sum(a, b) {
        return a + b;
    }
    export default sum;
    
    //./index.js
    import  sum  from "./module/example.js";

在import的时候,依然可以是任意的合理的变量名,不一定得是sum。

3. 使用 as

    //./module/example.js
    function sum(a, b) {
        return a + b;
    }
    export {sum as default}

    //./index.js
    import  sum  from "./module/example.js";

在import的时候,依然可以是任意的合理的变量名,不一定得是sum。

6:export default和其他变量一起
一个module可以export default的同时export其他变量,语法与只export其中一样没有区别;只是在import的时候,default一定要在非default前:

//./module/example.js
export var firstName = "roger";
export const lastName = "waters";
export let dob = 1944;

function sum(a, b) {
    return a + b;
}
export {sum as default}

// ./index.js
//语法正确
import  sum, {firstName, lastName, dob}  from "./module/example.js";

//error: 语法错误
import  {firstName, lastName, dob}, sum  from "./module/example.js";

7: import *
当我们想把一个module所有export的东西都一次性import的时候,就可以使用 import * as

// ./module/example.js
export var firstName = "roger";
export const lastName = "waters";
export let dob = 1944;

function sum(a, b) {
    return a + b;
}
export {sum as default}

//./index.js
import  * as example  from "./module/example.js";

console.log(example.firstName);
console.log(example.lastName);
console.log(example.dob);
example.default(1, 2);

这里特别注意的是,这里的example.default就是我们export的default变量。

8:export import
我们可以把从别的module导入的变量作为本module的导出。例如下面的例子./mian.js从./idnex.js导入变量firstName, 而firstName原本是./index.js从./module/example.js导入的:

//./module/example.js
export var firstName = "roger";
export const lastName = "waters";
export let dob = 1944;

function sum(a, b) {
    return a + b;
}
export {sum as default}

//./index.js
import {firstName}  from "./module/example.js";
export {firstName};

//./main.js
import {firstName} from "./index.js"

在./index.js文件里的2行代码等同于下面的一行:

export {firstName} from "./module/example";

这个时候也可以使用 as:

export {firstName as nickName} from "./module/example";

也可以使用 *

export * from "./module/example";

export *的时候,是不包含default的。如果我们想要包含default,得多带带导入和导出default:

//./module/example.js
export var firstName = "roger";
export const lastName = "waters";
export let dob = 1944;

function sum(a, b) {
    return a + b;
}
export {sum as default}

//./index.js
export * from "./module/example";
import sum from "./module/example";
export {sum};

//./main.js
import {firstName, lastName, dob} from "./index.js"
import {sum} from "./index"

二:export和import的注意点可能的错误

1:在没有default的情况下,不能export匿名函数

前面我们讲到可以在定义一个函数的时候就export,但是这个函数不能是匿名函数,除非这个函数作为default导出。

2:export和import都只能用在module的最高层scope

不能在if..else,方法里,或者任何需要在runtime的时候才能确定下来的情况下,使用export和import。

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

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

相关文章

  • ES6模块默认导出和变量绑定(Default Exports and Exporting bindi

    摘要:背景现在最主流的模块机制是和。模块模块导出的变量始终指向的是模块内部的变量,使用时可以获得此变量的最新值。我们叫导出绑定。但是在看对默认导出代码的转换时,发现实现并不使用。所以改了并不等于改了,自然的东西没有变化。 背景 JavaScript 现在最主流的模块机制是 commonjs 和 ES6 module。两者不单是语法上有所区别,在加载的时候也有所不同,譬如 commonjs 是...

    Benedict Evans 评论0 收藏0
  • ES6 的模块系统

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

    MudOnTire 评论0 收藏0
  • import and export 之 (export

    摘要:和必须始终显示在其各自用法的顶级范围中。也就是说不可以在条件中放置或它们必须放在所有块和函数之外。不幸的是,它存在一些缺点,并正式地不鼓励这样做。用户可以另外手动将和列为命名导入,如果他们想要的话。 ES6提供了两个关键字import导入和export导出,语法上有些差别。!important: import和export必须,始终显示在,其各自用法的,顶级范围中。也就是说不可以在if...

    weij 评论0 收藏0
  • [译] 在你学习 React 之前必备的 JavaScript 基础

    摘要:前言在理想的状态下,你可以在深入了解之前了解和开发的所有知识。继承另一个类的类,通常称为类或类,而正在扩展的类称为类或类。这种类型的组件称为无状态功能组件。在你有足够的信心构建用户界面之后,最好学习。 原文地址:JavaScript Basics Before You Learn React 原文作者: Nathan Sebhastian 写在前面 为了不浪费大家的宝贵时间,在开...

    Chaz 评论0 收藏0

发表评论

0条评论

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