ES6模块

首先,必须明确,一个JS文件就是一个模块。


ES6模块


export命令

  • 用于规定模块的对外接口
  • 导出内容供其他模块使用,一个模块中,export可以调用多次
    必须与模块内部的变量建立一对一的关系,不能直接导出一个值

export写法

  1. export let a = 1;
  2. let a = 1; export {a};
  3. let a = 1; export {a as b};//更改变量a的名字
  • export default 默认导出
    用于指定模块的默认输出。
    一个模块只能有一个默认输出,因此export default命令只能使用一次,所以import和export后面不用加{}花括号

export default写法:

  1. 导出一个匿名函数
    export default function(){}
  2. 导出一个字符串
    export default 'hello';
  3. 导出一个变量
    let m = 1; export default m;
  4. 导出一条语句
    export default let m = 1;

import命令

  • 用于导入其他模块提供的功能
  • 其他JS文件通过import命令加载这个模板

import写法:

  1. 解构导入
    import {a, b, test} from './module';
  2. 重命名变量
    import {a as b} from './module';
  3. 重复导入
    import {a} from './module';
    import {b} from './module';
    如果多次重复执行同一句import语句,那么只会执行一次模块代码。
  4. 模块的整体加载 包括默认导出的数据,export default属性名为’default’
    import * as obj from './module';
  5. 默认模块的导入
    import test from './module';

export和import的复合写法

如果在一个模块中,先导入和后导出都是同一个模块,import语句和export语句可以写在一起
export { foo, bar } from 'my_module';
等同于
import {foo, bar} from 'my_module';
export {foo, bar};


相关文章

原文连接:https://www.cnblogs.com/dupd/p/5951311.htmlES6...
以为Es6,javascript第一次支持了module。ES6的模块化分为导...
视频讲解关于异步处理,ES5的回调使我们陷入地狱,ES6的Prom...
TypeScript什么是TypeScript?TypeScript是由微软开发的一款开...
export class AppComponent { title = 'Tour of heroes...
用 async/await 来处理异步昨天看了一篇vue的教程,作者用as...