There are two different types of export, named and default
export - JavaScript | MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
The export
statement is used when creating JavaScript modules to export functions, objects, or primitive values from the module so they can be used by other programs with the import
statement.
Exported modules are in strict mode
whether you declare them as such or not. The export statement cannot be used in embedded scripts.
Link to sectionSyntax
export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;
nameN
- Identifier to be exported (so that it can be imported via
import
in another script).
Link to sectionDescription
There are two different types of export, named and default. You can have multiple named exports per module but only one default export. Each type corresponds to one of the above syntax:
- Named exports:
// exports a function declared earlier
export { myFunction }; // exports a constant
export const foo = Math.sqrt(2); - Default exports (function):
export default function() {}
- Default exports (class):
export default class {}
Named exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object.
But a default export can be imported with any name for example:
let k; export default k = 12; // in file test.js
import m from './test' // note that we have the freedom to use import m instead of import k, because k was default export
console.log(m); // will log 12
The following syntax does not export a default export from the imported module:
export * from …;
If you need to export the default, write the following instead:
export {default} from 'mod';
Link to sectionExamples
Link to sectionUsing named exports
In the module, we could use the following code:
// module "my-module.js"
function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
var graph = {
options:{
color:'white',
thickness:'2px'
},
draw: function(){
console.log('From graph draw function');
}
}
export { cube, foo, graph };
This way, in another script, we could have:
//You should use this script in html with the type module ,
//eg ''<script type="module" src="demo.js"></script>",
//open the page in a httpserver,otherwise there will be a CORS policy error.
//script demo.js
import { cube, foo, graph } from 'my-module';
graph.options = {
color:'blue',
thickness:'3px'
};
graph.draw();
console.log(cube(3)); // 27
console.log(foo); // 4.555806215962888
Link to sectionUsing the default export
If we want to export a single value or to have a fallback value for our module, we could use a default export:
// module "my-module.js"
export default function cube(x) {
return x * x * x;
}
Then, in another script, it will be straightforward to import the default export:
import cube from 'my-module';
console.log(cube(3)); // 27
Note that it is not possible to use var
, let
or const
with export default
.
Link to sectionModule Redirects
If we want to export default, and star from another module (effectively creating a "redirect"):
// module "redirect-module.js"
export {default} from './other-module';
export * from './other-module';
Link to sectionSpecifications
Specification | Status | Comment |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'Exports' in that specification. |
Standard | Initial definition. |
ECMAScript Latest Draft (ECMA-262) The definition of 'Exports' in that specification. |
Draft |
最新文章
- 客户端的验证插件validator
- 短期连载 第1回 万代南梦宫工作室动画的流派 BNS动作捕捉汐留工作室的采访
- Eclipse查看JDK源码
- Azure开发者任务之一:解决Azure Storage Emulator初始化失败
- Magento 重新安装的方法
- Spring Remoting by HTTP Invoker Example--reference
- 高级UIKit-05(CoreData)
- 老李推荐:第8章2节《MonkeyRunner源码剖析》MonkeyRunner启动运行过程-解析处理命令行参数 2
- 【设计模式】之开闭原则(OCP)
- Django REST FrameWork中文教程3:基于类的视图
- oracle游标的使用
- vue中怎么全局引入sass文件
- C#/VB.NET 操作Word批注(二)——如何插入图片、读取、回复Word批注内容
- ModSecurity SQL注入攻击 – 深度绕过技术挑战
- Metasploit渗透测试模块(一)
- macOS Sierra(10.12.6), odoo(11.0), Python(3.5.4)配置
- 算法进阶面试题06——实现LFU缓存算法、计算带括号的公式、介绍和实现跳表结构
- redis清除缓存和连接远程服务器
- linux 几个命令
- 开源小程序CMS网站, JeeWx-App-CMS 1.0 首版本发布