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 |
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导入的模块都是属于引用: 循环依赖的问题: 浏览器兼容: 参 ...
随机推荐
- tomcat7.0.55配置HTTP强制跳转到HTTPS
首先需要配置好HTTPS单向或双向链接 参考: tomcat7.0.55配置单向和双向HTTPS连接(二) 然后编辑tomcat的conf目录下的web.xml 在<welcome-file-l ...
- HDU - 2970 Suffix reconstruction
Discription Given a text s[1..n] of length n, we create its suffix array by taking all its suffixes: ...
- Scut游戏服务器引擎6.1.5.6发布,直接可运行,支持热更新
1. 增加exe版(console),web版本(IIS)的游戏服宿主程序 2. 增加Model支持脚本化,实现不停服更新 3. 增加Language支持脚本化 4. 修改Sns与Pay Center ...
- {dede:sql}标签的用法
sql标签可以称得上是个万能标签了,查询数据库将其输出,这里介绍一些关于这个标签的用法: 1.用来输出统计内容,这个是不错的,举个例子,我们来统计下总共发了多少的文章,思路就是输出dede_addon ...
- 【GLSL教程】(一)图形流水线 【转】
http://blog.csdn.net/racehorse/article/details/6593719 这是一些列来自lighthouse3d的GLSL教程,非常适合入门.我将边学习边翻译该教程 ...
- Js删除Table中的一行
<html> <head> <title></title> <script type="text/javascript"> ...
- netty实现长连接心跳检
主要逻辑: 使用netty实现长连接,主要靠心跳来维持服务器端及客户端连接. 实现的逻辑主要是: 服务器端方面: 1, 服务器在网络空闲操作一定时间后,服务端失败心跳计数器加1. 2, 如果收到客户端 ...
- vue2.0 仿手机新闻站(三)通过 vuex 进行状态管理
1.创建 store 结构 2.main.js 引入 vuex 3. App.vue 组件使用 vuex <template> <div id="app"&g ...
- Theano学习笔记(四)——导数
导数使用T.grad计算. 这里使用pp()打印梯度的符号表达式. 第3行输出是打印了经过优化器简化的符号梯度表达式,与第1个输出相比确实简单多了. fill((x** TensorConstant{ ...
- 身份证号码 javascript 验证
function checkIsIdno(idcard) { var Errors=new Array( "SUCCESS", "身份证号码位数不对!", &q ...