CommonJS與ES Module模塊化開發導入、導出

從前端各大框架的出現到現在，模塊化和組件化開發已經變得流行，模塊化最終的目的是將程序划分成一個個小的結構，這種結構有編寫自己的邏輯代碼、有自己的作用域，不會影響到其他模塊，通過暴露變量、函數、對象等導出其結構使用，也可以通過某種方式導入另外結構中的變量、函數、對象等；而這個結構就是模塊，按照這種結構化發開程序的過程，就是模塊化開發的過程。

此篇文章主要介紹模塊化開發中的導出導入細節。

1、CommonJS導入和導出

CommonJS規范的核心變量：exports、module.exports、require

exports和module.exports可以負責對模塊中的內容進行導出； 

require函數可以幫助我們導入其他模塊（自定義模塊、系統模塊、第三方庫模塊）中的內容；

Node中實現CommonJS的本質就是對象的引用賦值；

導出的是對象：

bar.js

var name = '小劉';
var msg = 'wgInfo';
function say() {
  console.log('say...');
} 
// 導出的exports是對象
// 方式一：
exports.name = name; 
exports.msg = msg; 
exports.say = say;

// 方式二：
module.exports = { name, msg, say };

main.js

// 方式一：
const base = require('./bar');

console.log(base.name);
console.log(base.msg);
base.say();

// 方式二：
const { name, msg, say } = require('./bar');

console.log(name);
console.log(msg);
say();

2、ES Module導出和導入

ES Module 中 import 和 export 是關鍵字，與CommonJS中的exports和module.exposts不同，

foo.js

const person = '張靜';
const sex = '女';
const eat = function (food) {
  console.log(person + '  正在吃：' + food);
};

// 方式一：
export const person = '張靜';
export const sex = '女';
export const eat = function (food) {
  console.log(person + '  正在吃：' + food);
};

// 方式二：在 大括號 {} 中統一導出
// {}大括號，它不是一個對象
// 里面放置要導出的變量的引用列表
export { person, sex, eat };

// 方式三：{} 導出時，可以給變量起別名
export { person as perPople, sex as perSex, eat as eatFoo };

// 默認導出
export default function (name) {
  console.log('我的名字叫：' + name);
}

main.js

// 導入方式一：import {} from '路徑'; 此時文件必須加上文件的后綴，因為在瀏覽器解析時時根據這個文件進行解析的，在webpack中，因為有webpack幫助我們進行解析，所以可以不用加文件名稱后綴
import { person, sex, eat } from './modules/foo.js';

console.log(person);
console.log(sex);
eat('香蕉');

// 導入方式二：導出變量之后可以起別名
import { person as WP, sex as Ws, eat as eatFun } from './modules/foo.js';
import { perPople as WP, perSex as Ws, eatFoo as eatFun } from './modules/foo.js';

console.log(WP);
console.log(Ws);
eatFun('火龍果');

// 方式三：* as PerFoo
import * as PerFoo from './modules/foo.js';
console.log(PerFoo.perPople);
console.log(PerFoo.perSex);
PerFoo.eatFoo('栗子');

// 演練：export 和 import 結合使用
import { person, sex, eat } from './modules/bar.js';

console.log(person);
console.log(sex);
eat('桃子');

// 演練：default export 如何導入
import myName from './modules/foo.js';
myName('張麗華');

3. 補充

CommonJS模塊加載js文件的過程是運行時加載的，並且是同步的，運行時加載意味着是JS引擎在執行js代碼的過程中加載模塊的；同步意味着一個文件沒有加載結束之前，后面代碼是不會執行的；

const flag = true；
if（flag）{
   const foo = require('../foo.js');
   console.log('if語句繼續執行');
}

ES Module加載js文件的過程是編譯時加載的，並且是異步的；這里編譯（解析）時加載，意味着import不能和運行時相關內容放到一起使用；