ES6

ES6中的模块化

​ 关于Es6的模块化

ES6的模块化分为导出（export）与导入（import）两个模块

关于export的用法

​ 在ES6中的每一个模块即是一个模块，在文件中定义的变量，函数，对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容，就必须使用export来对其进行暴露。

先创建一个test.js文件

export let myName = 'laowang';

然后可以创建一个index.js文件， 以import的形式将这个变量进行引入：

import {myName} from "./test.js"
console.log(myName);// laownag 

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

let myName = 'laowang'
let myAge = 20
let myfn = function (){
	return "我是"+myName+"今年"+myAge+"岁了"
}
export {
	myName,
	myAge,
	myfn
}

import {myfn,myAge,myName} from "./text.js"
console.log(myfn())
console.log(myAge)
console.log(myName)

如果不想暴露模块当中的变量名，可以通过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())
console.log(age)
console.log(name)

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

import * as info from "./test.js";
console.log(info.fn())
console.log(info.age)
console.log(info.name)

默认导出（default export）

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

export default function(){
	return "默认导出一个方法"
}
import myFn form "./test.js"
console.log(myFn())

同样也支持混合导出

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

重命名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