模塊

ES6之前，如果你想要模塊化你的代碼，或許你需要引入很多個 script 標(biāo)簽，然后還得小心翼翼的注意不要弄錯了他們的順序。或者，你需要通過某個工具把他們給合并成一個文件...喜！大！普！奔！ES6 終于開始支持模塊啦！

模塊的導(dǎo)出導(dǎo)入

雖然很像解構(gòu)賦值，但是只是一種導(dǎo)入的語法規(guī)范

• 通過 export default 命令默認(rèn)導(dǎo)出

// 導(dǎo)出
export default {
    apiKey: 'abc123'
}
// 導(dǎo)入
import key from './config.js';

值得注意的是，一個模塊中，只能有一個默認(rèn)導(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);