模塊
ES6之前高诺，如果你想要模塊化你的代碼惹谐，或許你需要引入很多個 script 標簽，然后還得小心翼翼的注意不要弄錯了他們的順序砍的”陨福或者，你需要通過某個工具把他們給合并成一個文件...喜！大帚稠！普谣旁！奔！ES6 終于開始支持模塊啦翁锡！
模塊的導(dǎo)出導(dǎo)入
雖然很像解構(gòu)賦值蔓挖，但是只是一種導(dǎo)入的語法規(guī)范
- 通過
export default命令默認導(dǎo)出
// 導(dǎo)出
export default {
apiKey: 'abc123'
}
// 導(dǎo)入
import key from './config.js';
值得注意的是，一個模塊中馆衔，只能有一個默認導(dǎo)出瘟判。并且在導(dǎo)入的過程中，可以隨意命名角溃。
- 通過
export命名導(dǎo)出
// 導(dǎo)出
export const apiKey = 'abc123';
// 導(dǎo)入
import { apiKey } from './config.js';
值得注意的是拷获，導(dǎo)入的時候，命名必須跟導(dǎo)出的命名一致减细，并用花括號 {} 包裹匆瓜。
命名導(dǎo)出的時候，可以有多個導(dǎo)出內(nèi)容未蝌。
// 可以用as取別名驮吱，那么在導(dǎo)入的時候也取別名
export { name as n , age , greet }
示例
{
"dependencies": {
"lodash": "^4.17.4",
"md5": "^2.2.1",
"moment": "^2.19.1"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"webpack": "^3.0.0"
}
}
// config.js
export const url = 'https://www.baidu.com/'
// user.js
import { url } from './config';
import md5 from 'md5';
export default function User(name, email) {
return {
name, email
}
}
function createUrl(email) {
return `${url}/user/${email}`;
}
function getAvatar(email) {
return `https://www.gravatar.com/avatar/${md5(email)}`;
}
export { createUrl, getAvatar };
// app.js
import userprofile, { createUrl, getAvatar } from './src/user';
const user = new userprofile('dp', '457509824@qq.com');
const profile = createUrl(user.email);
const pic = getAvatar(user.email);
console.log(user);
console.log(profile);
console.log(pic);
