es6模块化导入导出

模块化指的就是将一个大程序拆分成若干个互相依赖的小文件,然后在用简单的方法拼装起来。

在 ES6 之前，JS没有模块化系统，社区制定了一些模块加载方案

最主要的有 CommonJS（Asynchronous module definition） 和 AMD（common module definition） 两种。前者用于服务器，后者用于浏览器

/*
CommonJS（node遵循该规范）
    ->require.js    引入
    ->module.exports 导出 
   
AMD
    比如 -> require.js
CMD
    比如 -> sea.js
*/

 

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量

（CommonJS 模块就是对象，输入时必须查找对象属性）

ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入

//import {fn} from './xx.js'; 引入模块
//export function fn(){}  导出模块

 

模块可以理解为函数代码块的功能,是封装对象的属性和方法的javascript代码,它可以是某单个文件,变量或者函数

在Es6模块中,无论有没有加"use strict",都会自动采用严格模式

Es6中模块导入的基本语法

如果想从一个文件(模块)访问另一个文件(模块)的功能,则需要通过import关键字在另一个模块中引入数据

import {标识符1，标识符2} from "本地模块路径"

导入单个绑定：

// 只导入一个
 import {sum} from "./example.js"

导入多个绑定：

// 导入多个
import {sum,multiply,time} from "./exportExample.js"

导入整个模块：

用星号（*）指定一个对象，所有输出值都加载在这个对象上面

// 导入一整个模块
import * as example from "./exportExample.js"

如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名

import { lastName as surname } from './profile.js';

 

Es6中模块导出的基本语法

模块的导出,export关键字用于暴露数据,暴露给其他模块

可以将export放在任何变量,函数或类声明的前面,从而将他们从模块导出

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

在export命令后面，使用大括号指定所要输出的一组变量

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};

两种方式是等价的，第二种方式。应该优先考虑使用第二种这种写法（在尾部，一眼看清楚输出了哪些变量）

//导出函数
export function sum(num1,num2){
     return num1+num2;
}
//导出类
export class People{
     constructor(name,age){
        this.name = name;
        this.age = age;
     }
     info(){
        return `${this.name}${this.age}`
     }
}

通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
};

export default命令

export default命令用于指定模块的默认输出，一个模块只能有一个默认输出

/*第一组*/
export default function crc32() { // 输出
  // ...
}

import crc32 from 'crc32'; // 输入

/*第二组*/
export function crc32() { // 输出
  // ...
};

import {crc32} from 'crc32'; // 输入

第一组使用export default时，对应的import语句不需要使用大括号

第二组是不使用export default时，对应的import语句需要使用大括号

因此export default命令只能使用一次。所以，import命令后面不用加大括号，因为只可能唯一对应export default命令

export default也可以用来输出类

// MyClass.js
export default class { ... }

// main.js
import MyClass from 'MyClass';
let o = new MyClass();

 

export 与 import 的复合写法

如果在一个模块之中，先输入后输出同一个模块，import语句可以与export语句写在一起

export { foo, bar } from 'my_module';

// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };