es6模块化导入导出

2022-09-08 11:14:08

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

在 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 };

码农公寓

export 与 import 的复合写法

相关文章