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. Field baseMapper in com.baomidou.mybatisplus.extension.service.impl.ServiceImpl required a single bean, but xx were found:

    在学习使用 mybatis-plus 时,遇到一个奇怪的异常 如 代码一: 代码一: Error starting ApplicationContext. To display the conditi ...

  2. Julia出现错误ERROR: LoadError: syntax: try without catch or finally

    因项目要求进行机器学习数据可视化,要求尝试使用Julia,在此,记录下遇到的坑,仅为记录效果.后续陆续更新. 问题一:关于LightML库中的坑:ERROR: LoadError: syntax: t ...

  3. 排列perm HYSBZ - 1072(状压dp/暴力)

    Description 给一个数字串s和正整数d, 统计s有多少种不同的排列能被d整除(可以有前导0).例如123434有90种排列能被2整除,其中末位为2的有30种,末位为4的有60种. Input ...

  4. PHPstorm快捷键介绍总结

    如下所示: Eclipse快捷键 Ctrl+1 快速修复 Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加) Ctrl+Alt+↑ 复制当前行到上一行(复制增加) Alt ...

  5. java中构造器(Constructor)

    大部分内容转自:http://tech.it168.com/j/2006-05-18/200605181021879.shtml        构造器是一个创建对象时被自动调用的特殊方法,为的是初始化 ...

  6. JavaEE高级-MyBatisPlus学习笔记

    第 1 章 简介 1.1 MyBatisPlus 介绍 -MyBatis-Plus(简称 MP),是一个 MyBatis 的增强工具包,只做增强不做改变. 为简化开发工作.提高生产率而生我们的愿景是成 ...

  7. PyMySQL和MySQLdb的区别

      网上很多关于Scrapy存入MySQL的教程,都会发现又这么一个包的引入: import MySQLdb import MySQLdb.cursors 聪明的你或许已经算到,需要安装MySQLdb ...

  8. java调用shell脚本小demo

    复制指定文件cpp.sh: [root@localhost soft]# vim cpp.sh#!/bin/bash name="$1"\cp /home/soft/test/${ ...

  9. Python---进阶---函数式编程---lambda

    一. 利用map()函数,把用户输入的不规范的英文,变成首字母大写,其他小写的规范的名字:比如说["ADMAm", "LISA", "JACK&quo ...

  10. day2 for,not,while,range

    >>> def str_len(s): ... l = len(s) ... if l > 3: ... print("3") ... elif l < ...