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的更多相关文章

  1. javascript export excel

    <input type="button" onclick="tableToExcel('tablename', 'name')" value=" ...

  2. [SCSS] Convert SCSS Variable Arguments to JavaScript

    We will learn how to convert variable arguments by using rest operator in JavaScript. .sass-btn { co ...

  3. 让 JavaScript 与 CSS 和 Sass 对话

    JavaScript 和 CSS 已经并存超过了 20 年.但是在它们之间共享数据非常困难.当然也有大量的尝试.但是我所想到的是一些简单而直观的内容——不涉及结构更改,而是使用 CSS 自定义属性甚至 ...

  4. 几种常用JavaScript设计模式es6

    设计模式分类(23种设计模式) 创建型 单例模式 原型模式 工厂模式 抽象工厂模式 建造者模式 结构型 适配器模式 装饰器模式 代理模式 外观模式 桥接模式 组合模式 享元模式 行为型 观察者模式 迭 ...

  5. webpack +vue开发(2)

    我们的loader方式其实可以写成inline的方式 loaders:[ { test:/\.js$/, loader:"babel", exclude:/node_modules ...

  6. 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 ...

  7. vue组件最佳实践

    看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...

  8. 前端架构之路:使用Vue.js开始第一个项目

    Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发.   一.技术准备 笔者建议在开始项目前,对以下两个技术点进行了解. ...

  9. vue-router实例

    最近刚刚用vue写了个公司项目,使用vue-cli构建的,算是中大型项目吧,然后这里想记录并且分享一下其中的知识点,希望对大家有帮助,后期会逐渐分享:话不多说,直接上代码!! main.js // T ...

随机推荐

  1. P1141零一迷宫

    这是一道对于除了我之外其他人都十分简单的搜索题,我终于在这个夜里搞会了. 首先其问可以到达多少个点,并不是走一次可以最多经过几个点,这就解释了为什么不需要回溯,并且递归边界则是让其全部走完即可.于是便 ...

  2. Fedora添加软件桌面快捷方式

    以下以添加Eclipse为例 在桌面上新建Eclipse.desktop 文件,向其写入如下代码 [Desktop Entry] Name=Eclipse Comment=用Eclipse开发 Exe ...

  3. Python 入门之 模块

    Python 入门之 模块 1.模块 (1)模块是什么? ​ 将一些常用的功能封装到一个文件中,那么这个存储着很多常用的功能的py文件,就是模块. 模块就是文件,存放一堆常用的函数.模块,就是一些常用 ...

  4. 通过修改host解决VS2019下载极慢的问题

    原文:通过修改host解决VS2019下载极慢的问题 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn ...

  5. 深度学习之depthwise separable convolution,计算量及参数量

    目录: 1.什么是depthwise separable convolution? 2.分析计算量.flops 3.参数量 4.与传统卷积比较 5.reference

  6. CSS选择符有哪些?哪些属性可以继承

    下面是一些常用的选择器: 1.id选择器( # myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p) 4.相邻选择器(h1 + p) 5.子选择器(ul > ...

  7. python 二分法实现

    # -*- coding: utf-8 -*- def BinarySearch(arr, key): # 记录数组的最高位和最低位 min = 0 max = len(arr) - 1 if key ...

  8. mpg123 - 播放 MPEG 1.0/2.0 Layer-1, -2, -3 音频文件

    语法 mpg123 [ -tscvqy01m24 ][ -b size ][ -k num ][ -n num ][ -f factor ][ -r rate ][ -g gain ][ -a dev ...

  9. oozie与hue整合 执行WC案例报错: 连接10020端口被拒绝

    Call From hdp-05/192.168.230.15 to hdp-01:10020 failed on connection exception: java.net.ConnectExce ...

  10. Java动手动脑02

    一.平方数静方法: public class SquareInt { public static void main(String[] args) { int result; for (int x = ...