前言：模块加载的出现，使得JavaScript更加强大。学会并使用模块也成为我们的必修课之一了。
一、输出区别
① export输出：export在一个模块中可以多次使用
//test.js
//export可以多次使用
export const name = 'freddy';
export const age = 24;
export function sayName(){
console.log(name);
};
//test.js
const name = 'freddy';
const age = 24;
function sayName(){
console.log(name);
};
export { name,age,sayName }
//test.js
const name = 'freddy';
const age = 24;
function sayName(){
console.log(name);
};
export { //改变输出的变量名
name as newName,
age as newAge,
sayName as newSayName
}
② export default输出：export default在一个模块中只能使用一次
//test.js
const name = 'freddy';
const age = 24;
export default function(){ //只输出一个function
console.log(name);
};
//test.js
const name = 'freddy';
const age = 24;
function sayName(){
console.log(name);
};
export default sayName;
//test.js
const name = 'freddy';
const age = 24;
function sayName(){
console.log(name);
};
export default name; //只输出一个name
//test.js
const name = 'freddy';
const age = 24;
function sayName(){
console.log(name);
};
export default { //只输出一个对象
name,
age,
sayName
};
一、输入区别
①、export：export输出时用的变量名是什么，输入时也必须用那些变量名
//test.js
export const name = 'freddy';
export const age = 24;
export function sayName(){
console.log(name);
};
-------------------------------------------
//index.js
import { name,age,sayName } from './test';
console.log(name);
console.log(age);
console.log(sayName);
//test.js
const name = 'freddy';
const age = 24;
function sayName(){
console.log(name);
};
export { //改变输出的变量名
name as newName,
age as newAge,
sayName as newSayName
}
----------------------------------------
//index.js
import { newName,newAge,newSayName } from './test';
console.log(newName);
console.log(newAge);
console.log(newSayName);
②、export default：输入时用的变量名可以随便取。
//test.js
const name = 'freddy';
const age = 24;
export default function(){ //只输出一个function
console.log(name);
};
-------------------------------------------------
import abc from './test'
abc();
//test.js
const name = 'freddy';
const age = 24;
function sayName(){
console.log(name);
};
export default { //只输出一个对象
name,
age,
sayName
};
-----------------------------------------
import obj from './test'
console.log(obj);
