javascript/es6: export 和import的使用

1.ES6中模块的特点

1. ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict;。
2. 模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。
3. 每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。
4. 每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。

2.基本用法

模块导入导出各种类型的变量，如字符串，数值，函数，类。

1. 导出的函数声明与类声明必须要有名称（export default命令另外考虑）。
2. 不仅能导出声明，还能导出引用。
3. export命令可以出现在模块的任何位置，但必须处于模块顶层。
4. import命令会提升到整个模块的头部，首先执行。

3.import命令的特点

1. 只读属性：不允许在加载模块的脚本里面，改写接口的引用指向，即可以改写 import 变量类型为对象的属性值，不能改写 import 变量类型为基本类型的值。
2. 单例模式：多次重复执行同一句 import 语句，那么只会执行一次，而不会执行多次。import 同一模块，声明不同接口引用，会声明对应变量，但只执行一次 import
3. 静态执行特性：import 是静态执行，所以不能使用表达式和变量。

4.as的用法

不同模块导出接口名称命名重复， 使用 as 重新定义变量名。

export 命令导出的接口名称，须和模块内部的变量有一一对应关系。导入的变量名，须和导出的接口名称相同，即顺序可以不一致。

5.export default 命令

1. 在一个文件或模块中，export、import 可以有多个，export default 仅有一个。
2. export default 中的 default 是对应的导出接口变量。
3. 通过 export 方式导出，在导入时要加{ }，export default 则不需要。
4. export default 向外暴露的成员，可以使用任意变量来接收。

6.常用

(1) 基本用法

// 定义的变量
let username="导出变量"

// 定义的对象
let obj={name:'导出对象'}

//  定义的函数
let fnc=function(){
    return '导出函数'
}
// 导出变量，对象，函数
export {username,obj,fnc}

导入模块并打印下：

//引入
import {username,obj,fnc} from '../../static/api/test.js'

//在onShow中打印下
onShow() {
        console.log(username,obj,fnc());
    },

(2) 使用as可以修改引入的模块内部变量的名字

(3) 使用export default ，import的时候可以使用任意变量名接收。而且不用写{}

let name="默认导出模块"
export default name //不用写{}

默认导出模块