import（导入）和export（导出）

使用export和import实现模块化：
export用于对外输出本模块变量的接口（一个文件可以理解为一个模块）。
import用于在一个模块中加载另一个含有export接口的模块。

ES6的模块化的基本规则或特点：
现在ES6自带了模块化， 也是JS第一次支持module， 在很久以后 ，我们可以直接作用import和export在浏览器中导入和导出各个模块了， 一个js文件代表一个js模块；
1：每一个模块只加载一次， 每一个JS只执行一次， 如果下次再去加载同目录下同文件，直接从内存中读取。 一个模块就是一个单例，或者说就是一个对象；
2：每一个模块内声明的变量都是局部变量， 不会污染全局作用域；
3：模块内部的变量或者函数可以通过export导出；
4：一个模块可以导入别的模块

也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。如下图(假设a和b文件在同一目录下)
如下有两个js脚本文件，a.js和b.js
a.js代码如下：

var sex="boy";
var echo=function(value){
　　console.log(value)
}
export {sex,echo}  
//通过向大括号中添加sex，echo变量并且export输出，就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到
//不能写成export sex这样的方式，如果这样就相当于export "boy",外部文件就获取不到该文件的内部变量sex的值，因为没有对外输出变量接口,只是输出的字符串。

b.js代码如下：

//通过import获取a.js文件的内部变量，{}括号内的变量来自于a.js文件export出的变量标识符。
import {sex,echo} from "./a.js" 
console.log(sex)   // boy
echo(sex) // boy

例子2：

//lib.js
//导出常量
export const sqrt = Math.sqrt;
//导出函数
export function square(x) {
    return x * x;
}
//导出函数
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}
//main.js
import { square, diag } from './lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

例子3：
下面列出几种import和export的基本语法。
第一种导出的方式：
在lib.js文件中， 使用 export{接口} 导出接口， 大括号中的接口名字为上面定义的变量， import和export是对应的；

//lib.js 文件
let bar = "stringBar";
let foo = "stringFoo";
let fn0 = function() {
    console.log("fn0");
};
let fn1 = function() {
    console.log("fn1");
};
export{ bar , foo, fn0, fn1}
//main.js文件
import {bar,foo, fn0, fn1} from "./lib";
console.log(bar+"_"+foo);
fn0();
fn1();

第二种导出的方式：
在export接口的时候， 我们可以使用 XX as YY， 把导出的接口名字改了， 比如： closureFn as sayingFn， 把这些接口名字改成不看文档就知道干什么的：

//lib.js文件
let fn0 = function() {
    console.log("fn0");
};
let obj0 = {}
export { fn0 as foo, obj0 as bar};

//main.js文件
import {foo, bar} from "./lib";
foo();
console.log(bar);

第三种导出的方式：
这种方式是直接在export的地方定义导出的函数，或者变量：

//lib.js文件
export let foo = ()=> {console.log("fnFoo") ;return "foo"},bar = "stringBar";
//main.js文件
import {foo, bar} from "./lib";
console.log(foo());
console.log(bar);

第四种导出的方式：
这种导出的方式不需要知道变量的名字， 相当于是匿名的， 直接把开发的接口给export；
如果一个js模块文件就只有一个功能， 那么就可以使用export default导出；

//lib.js
export default "string";
//main.js
import defaultString from "./lib";
console.log(defaultString);

第五种导出方式：
export也能默认导出函数， 在import的时候， 名字随便写， 因为每一个模块的默认接口就一个：

//lib.js
let fn = () => "string";
export {fn as default};
//main.js
import defaultFn from "./lib";
console.log(defaultFn());

第六种导出方式：
使用通配符* ,重新导出其他模块的接口 (其实就是转载文章， 然后不注明出处啦);

//lib.js
export * from "./other";
//如果只想导出部分接口， 只要把接口名字列出来
//export {foo,fnFoo} from "./other";
//other.js
export let foo = "stringFoo", fnFoo = function() {console.log("fnFoo")};
//main.js
import {foo, fnFoo} from "./lib";
console.log(foo);
console.log(fnFoo());

其他：ES6的import和export提供相当多导入以及导出的语法；
在import的时候可以使用通配符*导入外部的模块：

import * as obj from "./lib";
console.log(obj);

ES6导入的模块都是属于引用：
每一个导入的js模块都是活的， 每一次访问该模块的变量或者函数都是最新的

//lib.js
export let counter = 3;
export function incCounter() {
    counter++;
}
export function setCounter(value) {
    counter = value;
}
//main.js
import { counter, incCounter ,setCounter} from './lib';
// The imported value `counter` is live
console.log(counter); // 3
incCounter();
console.log(counter); // 4
setCounter(0);
console.log(counter); // 0
//在main.js中， counter一直指向lib.js中的局部变量counter， 按照JS的尿性， 像数字或者字符串类型或者布尔值的原始值要被复制， 而不是赋址；

export default
前面的例子可以看出，b.js使用import命令的时候，用户需要知道a.js所暴露出的变量标识符，否则无法加载。可以使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名。
例如：
a.js代码如下：

var sex="boy";
export default sex（sex不能加大括号）
//原本直接export sex外部是无法识别的，加上default就可以了.但是一个文件内最多只能有一个export default。
//其实此处相当于为sex变量值"boy"起了一个系统默认的变量名default，自然default只能有一个值，所以一个文件内不能有多个export default。

b.js代码如下：

//本质上，a.js文件的export default输出一个叫做default的变量，然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名，且不需要用大括号包含
import any from "./a.js"
import any12 from "./a.js" 
console.log(any,any12)   // boy,boy