前言
JS模組化程式設計是前端小夥伴們必不可少的知識，下面妹子將於自認為比較清晰的方式列舉出來。
1 require
特點：
- 1.執行時載入
- 2.拷貝到本頁面
- 3.全部引入
1.1 CommonJS
Node.js就是用CommonJS思想。 在CommonJS中，有一個全域性性方法require()，用於載入模組。
1.1.1 用法
var math = require('math');
math.add(2, 3);
複製程式碼var math = require('math');
const Math = new math(2, 3)
Math.add();
複製程式碼1.1.2 模組寫法
模組寫法分exports和module.exports。
exports.add = (x,y) => x+y;
複製程式碼module.exports = class math {
constructor(x,y) {
this.x = x;
this.y = y;
}
add() {
return x+y;
}
};
複製程式碼1.2 AMD
require.js和cujo.js就是用AMD思想。
AMD是”Asynchronous Module Definition”的縮寫，意思就是”非同步模組定義”。它採用非同步方式載入模組，模組的載入不影響它後面語句的執行。所有依賴這個模組的語句，都定義在一個回撥函式中，等到載入完成之後，這個回撥函式才會執行。
第二行math.add(2, 3)，在第一行require(‘math’)之後執行，因此必須等math.js載入完成。也就是說，如果載入時間很長，整個應用就會停在那裡等。 這對伺服器端不是一個問題，因為所有的模組都存放在本地硬碟，可以同步載入完成，等待時間就是硬碟的讀取時間。但是，對於瀏覽器，這卻是一個大問題，因為模組都放在伺服器端，等待時間取決於網速的快慢，可能要等很長時間，瀏覽器處於”假死”狀態。 因此，瀏覽器端的模組，不能採用”同步載入”（synchronous），只能採用”非同步載入”（asynchronous）。這就是AMD規範誕生的背景。
1.2.1 用法
//require([module], callback);
require(['math'], function (math) {
 math.add(2, 3);
});
複製程式碼1.2.1 模組寫法
define(id?, dependencies?, factory)
- id:字串，模組名稱(可選)
- dependencies: 是我們要載入的依賴模組(可選)，使用相對路徑。,注意是陣列格式
- factory: 工廠方法，返回一個模組函式
一個模組不依賴其他模組寫法
// math.js
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});
複製程式碼模組還依賴其他模組
define(['a','b'], function(a,b){
function foo(){
a.doSomething();// 依賴前置，提前執行
b.doSomething();
}
return {
foo : foo
};
});
複製程式碼當require()函式載入上面這個模組的時候，就會先載入Lib.js檔案。
1.3 CMD
sea.js就是用CMD思想。 CMD是"Common Module Definition"的縮寫。類似於requirejs，但是seajs是依賴就近，延遲執行，requirejs是依賴前置，提前執行。
1.3.1 用法
seajs.config({
alias: {
'jquery': 'http://modules.seajs.org/jquery/1.7.2/jquery.js'
}
});
seajs.use(['./hello', 'jquery'], function(hello, $) {
$('#beautiful-sea').click(hello.sayHello);
});
複製程式碼1.3.1 模組寫法
define(function(require, exports, module) {
var $ = require('jquery');
exports.sayHello = function() {
$('#hello').toggle('slow');
};
var b = require("b");
b.doSomething(); // 依賴就近，延遲執行
});
複製程式碼2 import
特點：
- 1.編譯時載入
- 2.只引用定義
- 3.按需載入
可對比
require的特點，發現import完勝require,推薦用import取代require
2.1.1 用法
import有兩種模組匯入方式：命名式匯入（名稱匯入）和預設匯入（定義式匯入），以及 import()。
import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";
複製程式碼- name－從將要匯入模組中收到的匯出值的名稱
- member, memberN－從匯出模組，匯入指定名稱的多個成員
- defaultMember－從匯出模組，匯入預設匯出成員
- alias, aliasN－別名，對指定匯入成員進行的重新命名
- module-name－要匯入的模組。是一個檔名
- as－重新命名匯入成員名稱（“識別符號”）
- from－從已經存在的模組、指令碼檔案等匯入
import()
import()返回一個 Promise 物件。
// 報錯
if (x === 2) {
import MyModual from './myModual';
}
複製程式碼引擎處理import語句是在編譯時，這時不會去分析或執行if語句，所以import語句放在if程式碼塊之中毫無意義，因此會報句法錯誤，而不是執行時錯誤。沒辦法像require樣根據條件動態載入。 於是提案引入import()函式，編譯時分析if語句,完成動態載入。
if(x === 2){
import('myModual').then((MyModual)=>{
new MyModual();
})
}
複製程式碼2.2.1 模組寫法
export有兩種模組匯出方式：命名式匯出（名稱匯出）和預設匯出（定義式匯出），命名式匯出每個模組可以多個，而預設匯出每個模組僅一個。
export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var
export let name1 = …, name2 = …, …, nameN; // also var, const
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
複製程式碼- name1… nameN－匯出的“識別符號”。匯出後，可以通過這個“識別符號”在另一個模組中使用* import引用
- default－設定模組的預設匯出。設定後import不通過“識別符號”而直接引用預設匯入
- －繼承模組並匯出繼承模組所有的方法和屬性
- as－重新命名匯出“識別符號”
- from－從已經存在的模組、指令碼檔案…匯出
參考資料
Happy coding .. :)