ES6模块化export 和 import详解

在之前的 javascript 中一直是没有模块系统的，前辈们为了解决这些问题，提出了各种规范, 最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。而 ES6中提供了简单的模块系统，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

基本使用

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。例如下面一个JS文件，里面使用export命令输出变量。

es6 中新增了两个命令 export 和 import , export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供的功能

// a.js
export const name = 'xiaoming'

使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）

//main.js
import {name} from './a.js'
console.log('从模块内部导出的内容:', name, age, desc)

导出多个值

上面介绍了模块化最基础的用法，export 不止可以导出函数，还可以导出对象，数组，字符串等等

//a.js
export const name = 'xiaoming'
export const arr = [1, 2, 3]
export const obj = {
  name: 'zs',
  age: 18
}

export的写法，除了像上面这样，还有另外一种。

//a.js
const name = 'xiaoming'
const arr = [1, 2, 3]
const obj = {
  name: 'zs',
  age: 18
}

export {name, arr, obj}

//	优点：上面代码在export命令后面，使用大括号指定所要输出的一组变量。它与前一种写法是等价的，但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。

默认导出

export default 指定默认输出, import 无需知道变量名就可以直接使用，默认导出无序写到{}中

//a.js
export default function fn () {
  console.log('哈哈')
}

//main.js
//在导入时，可以随意的使用变量名来接收
import a from './a'
a()

混合导出

// 一个模块可以有多个导出，但是只能有一个默认导出
export default function(){
    return "默认导出一个方法"
}
export let myName= "xiaoming";
export let age="18";

// 导入
import myFn,{myName} from "./test.js";

ES6模块化export 和 import详解

猜你喜欢