ES6模块只支持静态导出,只可以在模块的最外层作用域使用export
,不可在条件语句与函数作用域中使用。
这种方式主要用于导出多个函数或者变量, 明确知道导出的变量名称。
使用:只需要在变量或函数前面加 export
关键字即可。
使用场景:比如 utils、tools、common 之类的工具类函数集,或者全站统一变量等。
export 后面不可以是表达式,因为表达式只有值,没有名字。
// lib.js
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
// index.js 使用方式1
import { square, diag } from 'lib';
console.log(square(11)); // 121
// index.js 使用方式2
import * as lib from 'lib';
console.log(lib.square(11)); // 121
简写格式,统一列出需要输出的变量,例如上面的lib.js可以改写成:
// lib.js
const sqrt = Math.sqrt;
function square(x) {
return x * x;
}
function add (x, y) {
return x + y;
}
export { sqrt, square, add };
这种方式主要用于导出类文件或一个功能比较单一的函数文件;
使用:只需要在变量或函数前面加 export default
关键字即可。
default
的模块输出变量;export default 与 export 的主要区别:
- 不需要知道导出的具体变量名;
- 导入【import】时不需要 { } 包裹;
导出一个函数:
// myFunc.js
export default function () { ... };
// index.js
import myFunc from 'myFunc';
myFunc();
导出一个类:
// MyClass.js
class MyClass{
constructor() {}
}
export default MyClass;
// index.js
import MyClass from 'MyClass';
混合导出是Named exports
和Default exports
组合导出。
混合导出后,默认导入一定放在命名导入前面;
// lib.js
export const myValue = '';
export const MY_CONST = '';
export function myFunc() {
...
}
export function* myGeneratorFunc() {
...
}
export default class MyClass {
...
}
// index.js 【MyClass 必须在前面】
import MyClass, { myValue, myFunc } from 'lib';
比如 lodash:
// lodash.js
export default function (obj) {
...
};
export function each(obj, iterator, context) {
...
}
// index.js
import _, { each } from 'lodash';
一般情况下,export 导出的变量名是原文件中的变量名,但也可以用 as 关键字来指定别名。这样做是为了简化或者语义化 export 的函数名。
同一个变量允许使用不同名字输出多次
// lib.js
function getName() {
...
};
function setName() {
...
};
export {
getName as get,
getName as getUserName,
setName as set
}
为了避免上层模块导入太多的模块,可能使用底层模块作为中转,直接导出另一个模块的内容。
// myFunc.js
export default function() {...};
// Header.js
export default Header
// Footer.js
export default Header
// lib.js
export * from 'myFunc';
export { default as Header } from './Header';
export { default as Footer } from './Footer'
export function each() {...};
// index.js
import myFunc, { Header, Footer, each } from 'lib';
实现功能: 将桌面图片拖入指定地方,生成相框和相关信息。 相框需要自己配置,...
前言 何为插件(Plugin)?专注处理 webpack 在编译过程中的某个特定的任务的功能...
突然想到的方法,来试试吧 1.页面布局 canvas id=canva width=500px height=300p...
1.我向你夸下海口,心为你滴成琥珀,冷却以后,千万年后爱通透依旧。 2.一朝春...
我们在网页中经常需要控制一些元素的隐藏、透明等属性 style .d1{ display: none...
在使用dreamweaver或者frontpage来制作HTML网页时,我们有可能会遇到这样的问题...
Gird布局与Flex布局有一定的相似性,都是对容器的内部项目进行划分。 Flex布局是...
需求催动此篇博客的诞生 项目背景 之前也没写过小程序但是看过之后都是现成的api...
作者:小傅哥 博客: https://bugstack.cn 沉淀、分享、成长,让自己和他人都能...
序号 中文说明 标记语法 备注 1 背景颜色 {background-color:数值} 2 背景图片 {...