es6模块 import, export 知识点小结
栏目: JavaScript · 发布时间: 5年前
内容简介:ES6模块只支持名字导出,这种方式导出多个函数,一般使用场景比如 utils、tools、common 之类的工具类函数集,或者全站统一变量等。只需要在变量或函数前面加 `export` 关键字即可。
ES6模块只支持 静态导出
,你只可以在模块的最外层作用域使用 export
,不可在条件语句中使用,也不能在函数作用域中使用。总结了如下几种用法:
exports的几种用法
1. Named exports (导出每个 函数/变量)
名字导出,这种方式导出多个函数,一般使用场景比如 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)); } //------ main.js 使用方式1 ------ import { square, diag } from 'lib'; console.log(square(11)); // 121 console.log(diag(4, 3)); // 5 //------ main.js 使用方式2 ------ import * as lib from 'lib'; console.log(lib.square(11)); // 121 console.log(lib.diag(4, 3)); // 5
我们也可以直接导出一个列表,例如上面的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}
2. Default exports (导出一个默认 函数/类)
这种方式比较简单,一般用于一个类文件,或者功能比较单一的函数文件使用。一个模块中只能有一个export default默认输出。
export default与export的主要区别有2个:
- 不需要知道导出的具体变量名
- 导入(import)时不需要{}
//------ myFunc.js ------ export default function () { ... }; //------ main.js ------ import myFunc from 'myFunc'; myFunc();
导出一个类
//------ MyClass.js ------ class MyClass{ constructor() {} } export default MyClass; //------ Main.js ------ import MyClass from 'MyClass';
注意这里默认导出不需要用{}。
3. Mixed exports (混合导出)
混合导出,也就是 上面第一点和第二点结合在一起的情况。比较常见的比如 Lodash,阿里 Fusion之类的库都是这种组合方式。
//------ lib.js ------ export var myVar = ...; export let myVar = ...; export const MY_CONST = ...; export function myFunc() { ... } export function* myGeneratorFunc() { ... } export default class MyClass { ... } // ------ main.js ------ import MyClass, {myFunc} from 'lib';
再比如lodash例子:
//------ lodash.js ------ export default function (obj) { ... }; export function each(obj, iterator, context) { ... } export { each as forEach }; //------ main.js ------ import _, { each } from 'lodash';
4. Re-exporting (别名导出)
一般情况下,export输出的变量就是在原文件中定义的名字,但也可以用 as 关键字来指定别名,这样做一般是为了简化或者语义化export的函数名。
//------ lib.js ------ export function getUserName(){ ... }; export function setName(){ ... }; //输出别名,在import的时候可以同时使用原始函数名和别名 export { getName as get, //允许使用不同名字输出两次 getName as getNameV2, setName as set }
5. Module Redirects (中转模块导出)
有时候为了避免上层模块导入太多的模块,我们可能使用底层模块作为中转,直接导出另一个模块的内容如下:
//------ myFunc.js ------ export default function() {...}; //------ lib.js ------ export * from 'myFunc'; export function each() {...}; //------ main.js ------ import myFunc,{ each } from 'lib';
错误的export用法
export 只支持在最外层静态导出、只支持导出变量、函数、类,如下的几种用法都是错误的。
//直接输出变量的值 export 'Mark'; //未使用中括号 或 未加default // 当只有一个导出数,需加default,或者使用中括号 var name = 'Mark'; export name; //export不要输出块作用域内的变量 function(){ var name = 'Mark'; export {name}; }
import的几种用法
import的用法和export是一一对应的,但是import支持静态导入和动态导入两种方式,动态import支持晚一些,兼容性要差一些,目前Chrome浏览器和Safari浏览器支持。
1. Import an entire module’s contents (导入整个模块)
当export有多个函数或变量时,如文中export的第一点,可以使用 * as 关键字来导出所有函数及变量,同时 as 后面跟着的名称做为 该模块的命名空间。
//导出lib的所有函数及变量 import * as lib from 'lib'; //以 lib 做为命名空间进行调用,类似于object的方式 console.log(lib.square(11)); // 121
2. Import a single/multiple export from a module
从模块文件中导入单个或多个函数,与 * as namepage 方式不同,这个是按需导入。如下例子:
//导入square和 diag 两个函数 import {square, diag} from 'lib'; // 只导入square 一个函数 import {square} from 'lib'; // 导入默认模块 import _ from 'lodash'; // 导入默认模块和单个函数,这样做主要是简化单个函数的调用 import _, { each } from 'lodash';
3. Rename multiple exports during import
和 export 一样,也可以用 as 关键字来设置别名,当import的2个类的名字一样时,可以使用 as 来重设导入模块的名字,也可以用as 来简化名称。如下例子:
// 用as 来 简化函数名称 import { reallyReallyLongModuleExportName as shortName, anotherLongModuleName as short } from '/modules/my-module.js'; // 避免重名 import { lib as UserLib} from "ulib"; import { lib as GlobalLib } from "glib";
4. Import a module for its side effects only
有时候我们只想import进来,不需要调用,很常见的,比如在webpack构建时,我们经常import css 进来,或者import一个类库进来。
// 导入css import './mystyle.css'; // 导入类库 import 'axios';
5. Dynamic Imports
静态import在首次加载时候会把全部模块资源都下载下来,但是,我们实际开发时候,有时候需要动态import(dynamic import),例如点击某个选项卡,才去加载某些新的模块,这个动态import特性浏览器也是支持的。
// 当动态import时,返回的是一个promise import('/modules/my-module.js') .then((module) => { // Do something with the module. }); // 上面这句实际等同于 let module = await import('/modules/my-module.js');
es7的新用法:
async function main() { const myModule = await import('./myModule.js'); const {export1, export2} = await import('./myModule.js'); const [module1, module2, module3] = await Promise.all([ import('./module1.js'), import('./module2.js'), import('./module3.js'), ]); } main();
参考资料:
- https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
- http://2ality.com/2014/09/es6-modules-final.html
- https://hackernoon.com/import-export-default-require-commandjs-javascript-nodejs-es6-vs-cheatsheet-different-tutorial-example-5a321738b50f
以上所述就是小编给大家介绍的《es6模块 import, export 知识点小结》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 随想录(jtag知识点小结)
- 【MQ系列】RabbitMq核心知识点小结
- Spring Boot MQ:RabbitMQ 核心知识点小结
- Spring Boot MQ:RabbitMQ 核心知识点小结
- Spring Boot 系列教程之事务隔离级别知识点小结
- Spring Boot 系列教程之事务隔离级别知识点小结
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。