ES6模块化

一. ES6模块化
默认：通过一个对象对模块的全部信息做输出、输入处理
注意：一个模块中只能用一次默认导出

1. 默认导出的语法：

let a = 1;    let b = 2;
export default { a,b }

2. 默认导入的语法：

import 接收名称 from '模块名称'
import str from '模块名称'

如果要输出多个变量可以将这些变量包装成对象进行模块化输出：

let myName="laowang";
let myAge=90;
let myfn=function(){
    return "我是"+myName+"！今年"+myAge+"岁了"
}
export {
    myName,
    myAge,
    myfn
}
/******************************接收的代码调整为**********************/
import {myfn,myAge,myName} from "./test.js";
console.log(myfn());//我是laowang！今年90岁了
console.log(myAge);//90
console.log(myName);//laowang

如果你不想暴露模块当中的变量名字，可以通过as来进行操作:

let myName="laowang";
let myAge=90;
let myfn=function(){
    return "我是"+myName+"！今年"+myAge+"岁了"
}
export {
    myName as name,
    myAge as age,
    myfn as fn
}
/******************************接收的代码调整为**********************/
import {fn,age,name} from "./test.js";
console.log(fn());//我是laowang！今年90岁了
console.log(age);//90
console.log(name);//laowang

也可以直接导入整个模块，将上面的接收代码修改为：

import * as info from "./test.js";//通过*来批量接收，as 来指定接收的名字
console.log(info.fn());//我是laowang！今年90岁了
console.log(info.age);//90
console.log(info.name);//laowang

默认导出（default export）

一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致。

/******************************导出**********************/
const a = 1
const b = 2
export default { a,b }
/******************************引入**********************/
import per from '../js/默认导出.js'
console.log(per)

可以将所有需要导出的变量放入一个对象中，然后通过default export进行导出

/******************************导出**********************/
export default {
    myFn(){
        return "默认导出一个方法"
    },
    myName:"laowang"
}
/******************************引入**********************/
import myObj from "./test.js";
console.log(myObj.myFn(),myObj.myName);//默认导出一个方法 laowang

按需导出

/******************************导出**********************/
export var aa = 'aa'
export let bb = 'bb'
export const cc = function(){
    console.log('按需导出')
}
/******************************引入**********************/
import {aa,bb,cc} from '../js/默认导出.js'
console.log(per,aa,bb,cc)

同样也支持混合导出(默认和按需导出)

/******************************导出**********************/
const a = 1
export default { a }
export var aa = 'aa'
export let bb = 'bb'
export const cc = function(){
    console.log('按需导出')
}
/******************************引入**********************/
import per from '../js/默认导出.js'
import {aa} from '../js/默认导出.js'
console.log(per,aa)

/******************************导出**********************/
export default function(){
    return "默认导出一个方法"
}
export var myName="laowang";
/******************************引入**********************/
import myFn,{myName} from "./test.js";
console.log(myFn(),myName);//默认导出一个方法 laowang

没有导出情况
如果一个模块没有做export导出，在应用的地方可以直接做import导入(不用设置名称)

/******************************导出**********************/
for(var = 0;i < 5;i ++){
     console.log(i)
}
/******************************引入**********************/
import '../js/没有导出.js'

重命名export和import
如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，为了解决该问题，ES6为提供了重命名的方法，当你在导入名称时可以这样做：

/******************************test1.js**********************/
export let myName="我来自test1.js";
/******************************test2.js**********************/
export let myName="我来自test2.js";
/******************************index.js**********************/
import {myName as name1} from "./test1.js";
import {myName as name2} from "./test2.js";
console.log(name1);//我来自test1.js
console.log(name2);//我来自test1.js