JavaScript export
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.
Syntax
// Exporting individual features
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function functionName(){...}
export class ClassName {...} // Export list
export { name1, name2, …, nameN }; // Renaming exports
export { variable1 as name1, variable2 as name2, …, nameN }; // Default exports
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … }; // Aggregating modules
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).
Description
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:
// export features declared earlier
export { myFunction, myVariable }; // export individual features (can export var, let,
// const, function, class)
export let myVariable = Math.sqrt(2);
export myFunction() { ... };
Default exports:
// export feature declared earlier as default
export { myFunction as default }; // export individual features as default
export default myFunction() { ... }
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:
// file test.js
let k; export default k = 12;
// some other file
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
You can also rename named exports to avoid naming conflicts:
export { myFunction as function1,
myVariable as variable };
And aggregate submodules together in a parent module so that they are available to import from that module.
// In parentModule.js
export { myFunction, myVariable } from 'childModule1.js';
export { myClass } from 'childModule2.js'; // In top-level module
import { myFunction, myVariable, myClass } from 'parentModule.js'
ExamplesSection
Using named exportsSection
In a module module.js
, we could include 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 };
Then in the top-level module included in your HTML page, we could have:
import { cube, foo, graph } from 'my-module.js'; graph.options = {
color:'blue',
thickness:'3px'
}; graph.draw();
console.log(cube(3)); //
console.log(foo); // 4.555806215962888
It is important to note the following:
- You need to include this script in your HTML with a
<script>
element of type="module", so that it gets recognised as a module and dealt with appropriately. - You can't run JS modules via a
file://
URL — you'll get CORS errors. You need to run it via an HTTP server.
Using the default exportSection
If we want to export a single value or to have a fallback value for your module, you could use a default export:
// module "my-module.js" export default function cube(x) {
return x * x * x;
}
Then, in another script, it is straightforward to import the default export:
import cube from './my-module.js';
console.log(cube(3)); //
JavaScript export的更多相关文章
- javascript export excel
<input type="button" onclick="tableToExcel('tablename', 'name')" value=" ...
- [SCSS] Convert SCSS Variable Arguments to JavaScript
We will learn how to convert variable arguments by using rest operator in JavaScript. .sass-btn { co ...
- 让 JavaScript 与 CSS 和 Sass 对话
JavaScript 和 CSS 已经并存超过了 20 年.但是在它们之间共享数据非常困难.当然也有大量的尝试.但是我所想到的是一些简单而直观的内容——不涉及结构更改,而是使用 CSS 自定义属性甚至 ...
- 几种常用JavaScript设计模式es6
设计模式分类(23种设计模式) 创建型 单例模式 原型模式 工厂模式 抽象工厂模式 建造者模式 结构型 适配器模式 装饰器模式 代理模式 外观模式 桥接模式 组合模式 享元模式 行为型 观察者模式 迭 ...
- webpack +vue开发(2)
我们的loader方式其实可以写成inline的方式 loaders:[ { test:/\.js$/, loader:"babel", exclude:/node_modules ...
- Vue2.0环境搭建和测试demo
Vue2.0 推荐开发环境 Homebrew 1.0.6(Mac).Node.js 6.7.0.npm 3.10.3.webpack 1.13.2.vue-cli 2.4.0.Atom 1.10.2 ...
- vue组件最佳实践
看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...
- 前端架构之路:使用Vue.js开始第一个项目
Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发. 一.技术准备 笔者建议在开始项目前,对以下两个技术点进行了解. ...
- vue-router实例
最近刚刚用vue写了个公司项目,使用vue-cli构建的,算是中大型项目吧,然后这里想记录并且分享一下其中的知识点,希望对大家有帮助,后期会逐渐分享:话不多说,直接上代码!! main.js // T ...
随机推荐
- Eureka 源码分析之 Eureka Client
文章首发于微信公众号<程序员果果> 地址:https://mp.weixin.qq.com/s/47TUd96NMz67_PCDyvyInQ 简介 Eureka是一种基于REST(Repr ...
- 源码看React 事件机制
对React熟悉的同学都知道,React中的事件机制并不是原生的那一套,事件没有绑定在原生DOM上,发出的事件也是对原生事件的包装.那么这一切是怎么实现的呢? 事件注册 首先还是看我们熟悉的代码 &l ...
- 求大组合数mod p,(p不一定为质数)
#include<bits/stdc++.h> using namespace std; typedef long long ll; #define N 2000005 ll p; ll ...
- POJ 3259 Wormholes SPFA算法题解
版权声明:本文作者靖心,靖空间地址:http://blog.csdn.net/kenden23/,未经本作者同意不得转载. https://blog.csdn.net/kenden23/article ...
- Docker学习笔记--传送门(持续更新)
1.ubuntu下安装docker: https://www.cnblogs.com/salmonLeeson/p/11609699.html 2.为docker配置国内镜像加速器:https:// ...
- pypi源
清华大学pip install requests -i https://pypi.tuna.tsinghua.edu.cn/simple豆瓣pip install requests -i https: ...
- Linux之目录与路径
特殊的目录: “.”,代表此层目录 “..”,代表上一层目录 “-”,代表前一个工作目录 “~”,代表“目前用户身份”所在的主文件夹 “~account”,代表account这个用户的主文件夹(acc ...
- Insomni'hack teaser 2019 - Misc - echoechoechoecho
参考链接 https://ctftime.org/task/7456 题目内容 Echo echo echo echo, good luck nc 35.246.181.187 1337 解题过程 主 ...
- mepg
MPEG(Moving Picture Experts Group,动态图像专家组)
- pandas 的axis参数的理解
# pandas的axis参数怎样理解? # axis=0 或者 "index": # 如果是单行操作,就指的是某一行 # 如果是聚合操作,指的是跨行cross rows # ax ...