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 ...
随机推荐
- Nginx 的方向代理及配置
最近有打算研读nginx源代码,看到网上介绍nginx可以作为一个反向代理服务器完成负载均衡.所以搜罗了一些关于反向代理服务器的内容,整理综合. 一 概述 反向代理(Reverse Proxy)方式 ...
- HNUST-1681 机器人走格子(找规律)
1681: 机器人走格子 时间限制: 1 Sec 内存限制: 128 MB提交: 244 解决: 58[提交][状态][讨论版] 题目描述 一个长X宽Y的棋盘,有XY个格子.将机器人放在某个格子中 ...
- 剑指offer-重构二叉树-树-python
题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7, ...
- k3 cloud中员工离职以后释放站点
进入金蝶云企业平台:https://cloud.kingdee.com/qy,找到对应的用户并选择离职 给替代的员工加上专业应用组: 客户端也加上分组并且同步注册用户 管理中心更新用户许可:
- KVC,KVO详解
Key Value Coding Key Value Coding是cocoa的一个标准组成部分,它能让我们可以通过name(key)的方式访问property, 不必调用明确的property ac ...
- SPSS25 下载安装和激活
目录 1. 其他版本 2. 安装步骤 3. 下载地址 1. 其他版本 参考:https://www.cnblogs.com/coco56/p/11648399.html 2. 安装步骤 打开安装包 下 ...
- man(2) V
vfork(2) #include <sys/types.h> #include <unistd.h> pid_t vfork(void); 功能:创建子进程并阻塞父进 --- ...
- GUI学习之二十五——QFontDialog学习总结
今天学习字体对话框——QFontDialog()控件. QFontDialog()是继承自QDialog()的一个子类,用来选择给定的字体(包括字体.字号.样式等) 一.构造函数 QFontDialo ...
- Qt应用程序的发布
1 Windows平台上的应用程序发布 Windows发布工具 windeployqt.exe是Qt自带的Windows平台发布工具.windeployqt.exe文件在Qt的bin目录下,Qt的每一 ...
- Flutter SDK安装(windows)
Flutter集成了Dart,因此不需要单独安装dart-sdk.Flutter的SDK可以从官网下载:https://flutter.io/sdk-archive/#windows 在Flutter ...