es6 之 import 与 export

发表于 | 分类于 | 评论数： | 阅读次数：

ES6 实现了模块功能,称为浏览器和服务器的通用解决方案.ES6 模块主要包括两个功能:import 与 export.

export 用于对外输出本模块(一个文件可以理解为一个模块)变量的接口;

import 用于在一个模块中加载另一个含有 export 接口的模块.

使用 export 命令定义了模块的对外接口以后,其他 js 文件就可以通过 import 命令加载这个模块(文件).

export

a.js:

var sex="boy";
var echo=function(value){
　　console.log(value)
}
export {sex,echo}

使用 export 向大括号中添加 sex 和 echo 并输出,就可以将 sex 和 echo 以变量标识符的形式暴露给其他文件而被读取到,不能直接写成 export sex.对外的输出必须是变量接口,而不是输出的字符串.

export 命令除了输出变量,还可以输出函数或者类.

export 语句输出的值,与其对应的值是动态绑定关系,通过该模块的值,可以取到模块内部实时的值.

expoet 命令可以出现在模块的任何位置,只要处于模块顶层就可以.

import

b.js

import {sex,echo} from "./a.js" 
console.log(sex)   // boy
echo(sex) // boy

import 命令输入的变量都是只读的,因为它的本质是输入接口.也就是说,不允许在加载模块的脚本里面改写接口.

import 具有提升效果,会提升到整个模块的头部,首先执行.

由于 import 是静态执行,所以不能使用表达式和变量,这些只有在运行时才能得到的结果的语法结构.

export default

可以使用 export default ,为模块指定默认输出,这样就不需要知道所要加载模块的变量名.

// export-default.js
export default function () {
  console.log('foo');
}

上面的代码的默认输出是一个函数,其他模块加载该模块时,import 命令可以为该匿名函数指定任意名字.

// import-default.js
import customName from './export-default';
customName(); // 'foo'
thank u !