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
importin 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 |
There are two different types of export, named and default的更多相关文章
- ES2015 import & export
[ES2015 import] The import statement is used to import functions, objects or primitives that have be ...
- JavaScript export
export The export statement is used when creating JavaScript modules to export functions, objects, o ...
- ES6 module export options 模块导出、导入语法
http://stackoverflow.com/questions/25494365/es6-module-export-options A year and some later, here is ...
- [ES6] Export class and variable
Export variable: export const MAX_USERS = 3; export const MAX_REPLIES = 3; Export default class: exp ...
- [转] ES6 import/export:模块导入导出方式
export导出语法 // default exports export default 42; export default {}; export default []; export defaul ...
- Package template (html/template) ... Types HTML, JS, URL, and others from content.go can carry safe content that is exempted from escaping. ... (*Template) Funcs ..
https://godoc.org/text/template GoDoc Home About Go: text/templateIndex | Examples | Files | Directo ...
- ES6新特性:使用export和import实现模块化
在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库, 而像seaJS是基于CMD规范的模块化库, 两者都是为了为了推广前端模块化的工 ...
- 关于ES6的 模块功能 Module 中export import的用法和注意之处
export default 的用法 export default命令用于指定模块的默认输出.显然,一个模块只能有一个默认输出,因此export deault命令只能使用一次.所以,import命令后 ...
- export和import实现模块化
export和import实现模块化 阅读目录 ES6的模块化的基本规则或特点: 下面列出几种import和export的基本语法: ES6导入的模块都是属于引用: 循环依赖的问题: 浏览器兼容: 参 ...
随机推荐
- ActiveMQ 使用spring模板 发布消息过程分析
convertAndSend()方法中获得dstination,即发送信息的目的地dstination可以在spring的配置文件中指定自定义的,在JmsTemplate类中,pubSubDomain ...
- Arduino可穿戴教程Linux平台下安装Arduino IDE
Arduino可穿戴教程Linux平台下安装Arduino IDE Linux平台下安装Arduino IDE Linux平台下的安装方式和Windows下的zip形式安装是类似的,只是Linux下的 ...
- 【spring cloud】注解@SpringCloudApplication和@SpringBootApplication的区别
@SpringCloudApplication和@SpringBootApplication的区别
- 【报错】项目启动,仅仅报错 One or more listeners failed to start. Full details will be found in the appropriate container log file
今天spring4.3.13 项目,整合ActiveMQ的时候,项目启动在自动部署到tomcat下的时候,不能正常的部署,仅仅报错如下: Connected to server [-- ::,] Ar ...
- 在网页里插入flash的代码
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://down ...
- WinForm启动时接收参数
1 默认的Main函数,修改如下: static class Program { /// <summary> /// 应用程序的主入口点. /// </summary> [ST ...
- php hex2bin 物联网设备发送十六进制数据
hex2bin("十六进制字符") 折腾了三天 后来大神一句话搞定 : hex2bin("十六进制字符") 网上有个方向是错误的 就是 "\xAA\x ...
- React15.6.0实现Modal弹层组件
代码地址如下:http://www.demodashi.com/demo/12315.html 注:本文Demo环境使用的是我平时开发用的配置:这里是地址. 本文适合对象 了解React. 使用过we ...
- VueJS自定义过滤器:new Vue({filters:{filter1:function(){}....}})
Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化. 语法 <!-- 在两个大括号中 --> {{ message | capitalize }} <!-- 在 v-bin ...
- 【转载】ASP.Net请求处理机制初步探索之旅 - Part 3 管道
开篇:上一篇我们了解了一个ASP.Net页面请求的核心处理入口,它经历了三个重要的入口,分别是:ISAPIRuntime.ProcessRequest().HttpRuntime.ProcessReq ...