一. ES6模块化
默认：通过一个对象对模块的全部信息做输出、输入处理
注意：一个模块中只能用一次默认导出
- 默认导出的语法：
let a = 1; let b = 2;
export default { a,b }
- 默认导入的语法：
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
