前端模塊化
共有四種規(guī)范
- ES6 Module
- CommonJS
- AMD
- CMD
ES6 Module
ES6模塊并非對象，import命令會被 JavaScript 引擎靜態(tài)分析
在編譯的時候被 JavaScript 引擎靜態(tài)分析并加載，所以無法實現(xiàn)條件加載
使用方法
兩種情況
情況1: export { 變量1, 變量2 }
/** 定義模塊 math.js **/
const a = 1;
const b = 2;
+ export { a, b }
/** 引用模塊 **/
+ import { a, b} from './math.js'
console.log(a)
console.log(b)
情況2: export default
/** export default **/
//定義
const a = 1;
const b = 2;
+ export default { a,b };
//引用
+ import math from './math';
console.log(math.a) // 1
console.log(math.b) // 2
CommonJS
CommonJS 采用同步加載模塊，在服務器端模塊文件都保存在磁盤，讀取速度特別塊，所以這樣做不會有什么問題，但是對于瀏覽器來說，由于網(wǎng)速等原因，采用異步加載的方式更合適，所以一般CommonJS一般用在Node.js中；
四個環(huán)境變量: module、exports、require、global
module.exports使用方法
- module.exports定義當前模塊對外輸出的接口（不推薦直接用exports），
- require 引入模塊;
/*
* 舉例1：導出多個變量
*/
var basicNum = 0;
function add(a, b) {
return a + b;
}
module.exports = {
add,
basicNum
}
var math = require('./math');
math.add(2, 5);
const { add } = require('./math')
// 引用“核心”模塊時，不需要帶路徑
var http = require('http');
http.createService(...).listen(3000);
/*
* 使用舉例2：導出一個對象
*/
module.exports = function(name, age) {
this.name = name;
this.age = age;
this.about = function() {
console.log(this.name + 'is' + this.age + '歲');
};
};
var Rocker = require('./rocker.js');
var r = new Rocker('occy',98);
r.about();
exports使用方法
- exports是指向的module.exports的引用
// 定義
function handleAdd(a, b) {
return a + b;
}
exports.handleAdd = handleAdd;
// 引用
const test = require('./components/test')
console.log(test.handleAdd(1,2)) // 3
ES6 模塊與 CommonJS 模塊的差異
- 輸出不同: CommonJS模塊是值的拷貝; ES6 模塊是值的引用;
- 加載時機不同: CommonJS 模塊是運行時加載; ES6 模塊是編譯時加載;
- 輸出不同的影響
- CommonJS模塊：一旦輸出一個值，模塊內部的變化就影響不到這個值;
- ES6 ：動態(tài)引用，不緩存值，模塊里面的變量綁定其所在的模塊;???
- 返回值不同:
- module.exports返回的是模塊對象本身 ———— 需要new對象之后使用;
- exports返回的是模塊函數(shù) —— 可以直接使用
- JS引擎對腳本靜態(tài)分析的時候，遇到模塊加載命令import，就會生成一個只讀引用。等到腳本真正執(zhí)行時，再根據(jù)這個只讀引用，到被加載的那個模塊里面去取值。ES6 的import有點像 Unix 系統(tǒng)的“符號連接”，原始值變了，import加載的值也會跟著變。
運行時加載和編譯時加載區(qū)別
- 運行時加載：（common.js）模塊就是對象，也就是在輸入時是先加載整個模塊，生成一個對象，然后再從這個對象上面讀取方法，
- 編譯時加載: (ES6) 模塊不是對象，而是通過 export 命令顯式指定輸出的代碼，import是采用靜態(tài)命令的形式。即在import時可以指定加載某個輸出值，而不是加載整個模塊。
CommonJS 加載的是一個對象（即module.exports屬性），該對象只有在腳本運行完才會生成。而 ES6 模塊不是對象，它的對外接口只是一種靜態(tài)定義，在代碼靜態(tài)解析階段就會生成。
