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)); // 27 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)); // 27
原文地址:https://www.cnblogs.com/chucklu/p/11094537.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Electron + Vue跨平台桌面应用开发实战教程(一)
- java_抽象类、接口、多态的使用
- Electron + Vue跨平台桌面应用开发实战教程(二)
- Oracle参数解析(nls_length_semantics)
- 创建单页
- Electron + Vue跨平台桌面应用开发实战教程(三)
- ES6箭头函数中this指向谁?
- 谈谈HTML中锚点及其使用
- java_数据类型转换、运算符
- JavaScript中字符串运算符是什么?有哪些?
- Docker日常使用方式
- 使用Python爬取动态网页-豆瓣电影(JSON)
- Linux安装配置PHPmyadmin
- Angular Service依赖注入的一个具体例子
- php学习day1