ES6模块化（js模块的导入与导出）

（一般在开发都会封装公用的js文件和一些功能性js文件，然后在哪个组件用到就在那个组件import引入）

在ES6自带了模块化， 也是JS第一次支持module， 在es6以后 ，我们可以直接作用import和export在浏览器中导入和导出各个模块了， 一个js文件代表一个js模块；

ES6的模块化的基本规则或特点：

1、每一个模块只加载一次， 每一个JS只执行一次， 如果下次再去加载同目录下同文件，直接从内存中读取。 一个模块就是一个单例，或者说就是一个对象；
2、每一个模块内声明的变量都是局部变量， 不会污染全局作用域；
3、模块内部的变量或者函数可以通过export导出；
4、一个模块可以导入别的模块。

import : 导入
export : 导出

• 先定义模块，后导出模块：

//先定义模块
let name = "张三";
let age = 18;
let showName = () => {
    return name;
}
//导出模块
export {name,age,showName};
//导入模块
import {模块名,模块名} from '模块url';

• 边定义边导出模块

export let obj = {
    name : '李四',
    age : 19
}

//导入
import {obj} from "url";

• 以别名的方式导出

//以别名的方式导出模块
let a = '王五';
let b = 20;
let c = '男';


export {a as name,b as age,c as sex};

import { name,age,sex } from "./public.js";
alert(name + age + sex);

• 导出默认模块

let a = '呵呵';

export default a;

//导入默认模块
import 自定义名称 from 'url';

扩展知识：
module.exports与exports，export与export default之间的关系和区别：
https://segmentfault.com/a/1190000010426778?utm_source=tag-newest
https://www.cnblogs.com/fayin/p/6831071.html