es6- export and import
栏目: JavaScript · 发布时间: 5年前
内容简介:一: export和import的正常用法1:export变量2:export方法
一: 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和前面我们讲到的导出一个变量一样也是有三种方式:
-
在定义的时候export
//./module/example.js export default function(a, b) { return a + b; } //./index.js import sum from './module/example.js';
export的可以是一个匿名函数,在导入的时候,用任意合理的名字代表默认导出,但是注意与非default变量的区别在于,这里 没有花括号({})
-
先定义再export
//./module/example.js function sum(a, b) { return a + b; } export default sum; //./index.js import sum from './module/example.js';
在import的时候,依然可以是任意的合理的变量名,不一定得是sum。
-
使用 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匿名函数
2:export和default都只能用到module的最高层scope
3:module的影响是全局的
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
深入浅出 HTTPS:从原理到实战
虞卫东 / 电子工业出版社 / 2018-6 / 89
本书是一本专业的HTTPS书籍,全面讲解了HTTPS领域的相关知识,内容包括密码学、OpenSSL命令行、证书、TLS协议、HTTPS网站性能优化、HTTPS网站优秀实践、大型网站HTTPS架构设计等。本书有几个特点:(1)内容全面而新颖,基于RFC文档、国外书籍、社区等一手资料,总结了大部分最新的HTTPS知识;(2)由浅入深,从基础到进阶全面掌握HTTPS,读者能够轻松构建一个HTTPS网站,......一起来看看 《深入浅出 HTTPS:从原理到实战》 这本书的介绍吧!