模塊化
1.什么是模塊化
- 將一個復雜的程序依據一定的規(guī)則(規(guī)范)封裝成幾個塊(文件), 并進行組合在一起
- 塊的內部數據與實現是私有的, 只是向外部暴露一些接口(方法)與外部其它模塊通信
2.模塊化的理解
模塊化是一種處理復雜系統(tǒng)分解為更好的可管理模塊的方式础嫡。簡單來說就是解耦，簡化開發(fā)跺讯，一個模塊就是實現特定功能的文件判族，可以更方便地使用別人的代碼挡闰，想要什么功能把沼，就加載什么模塊详民。模塊開發(fā)需要遵循一定的規(guī)范
3.模塊化的好處
- 避免命名沖突(減少命名空間污染)
- 更好的分離, 按需加載
- 更高復用性
- 高可維護性
4.模塊化的作用
減少JS文件的請求次數
通過模塊化將JS文件整合為一個入口，然后引入頁面可以有效的減少對JS文件的請求使各JS文件的依賴關系清晰
在模塊化中可以清晰的分析各模塊的引用關系涛酗，明確JS代碼的結構降低項目的維護成本
當有某個模塊需要添加或減少某個功能使铡原，不需要將整個代碼重構，只需要在相應的模塊進行修改就可以
CommonJS規(guī)范
Node 應用由模塊組成商叹，采用 CommonJS 模塊規(guī)范燕刻，前端的webpack也是對CommonJS原生支持的。每個文件就是一個模塊剖笙，有自己的作用域卵洗。在一個文件里面定義的變量、函數弥咪、類过蹂，都是私有的，對其他文件不可見聚至。在服務器端酷勺，模塊的加載是運行時同步加載的；在瀏覽器端扳躬，模塊需要提前編譯打包處理脆诉。
基本語法
定義模塊
es1.js
var name = "Tom";
var age = 16;
function say(name,age){
console.log(name+"is"+age+"years old")
}
//語法1
module.exports.name = name;
module.exports.age = age;
module.exports.say = say;
//語法2
exports.name = name;
exports.age = age;
exports.say = say;
//語法3
module.exports = {
name,
age,
say
}
//語法4
module.exports = {
name : "Tom",
age : 16,
say(name,age){
console.log(name+"is"+age+"years old")
}
}
注：
1.exports 與module.exports 的區(qū)別：exports 是對 module.exports 的引用甚亭，不能直接給exports 賦值，直接賦值無效击胜，結果是一個空對象, module.exports 可以直接賦值
2.一個文件不能寫多個module.exports 亏狰，如果寫多個，對外暴露的接口是最后一個module.exports
3.模塊如果沒有指定使用module.exports 或者exports 對外暴露接口時偶摔，在其他文件就引用該模塊骚揍，得到的是一個空對象{}
4.瀏覽器不兼容CommonJS，在于缺少四個Node.js環(huán)境的變量啰挪。(module,exports,require,global)
引用模塊
var module = require('./es1.js')
consolo.log(module.name) //Tom
consolo.log(module.age) //16
module.say(name,age) //Tom is 16 years old
//直接引用模塊的方法
var name = require('./es1.js').name
var age = require('./es1.js').age
var say= require('./es1.js').say
console.log(name) //Tom
console.log(age) //16
say(name,age) //Tom is 16 years old
CMD規(guī)范
CMD規(guī)范專門用于瀏覽器端信不，模塊的加載是異步的，模塊使用時才會加載執(zhí)行亡呵。CMD規(guī)范整合了CommonJS和AMD規(guī)范的特點抽活。在 Sea.js 中，所有 JavaScript 模塊都遵循 CMD模塊定義規(guī)范锰什。
- 優(yōu)點 可以按需加載下硕，依賴就近。
- 缺點 依賴SPM打包汁胆，模塊的加載邏輯偏重
基本語法
定義模塊
// 使用 exports 直接向外提供接口梭姓。
define(function(require, exports) {
// 對外提供 name屬性
exports.name = 'Tom';
// 對外提供 say 方法
exports.say= function(name) {
console.log("hello"+name)
};
});
// 使用 return 直接向外提供接口。
define(function(require) {
return {
name : 'Tom',
say: function(name) {
console.log("hello"+name)
}
};
});
// 使用 module.exports 直接向外提供接口嫩码。
define(function(require, exports, module) {
module.exports = {
name: 'Tom',
say: function(name) {
console.log("hello"+name)
}
};
});
引用模塊
define(function (require) {
var m1 = require('./module1')
console.log(m1.name) // Tom
m1.say(m1.name) // Hello Tom
})
// require.async 方法用來在模塊內部異步加載模塊誉尖，并在加載完成后執(zhí)行指定回調。callback 參數可選铸题。
define(function(require, exports, module) {
// 異步加載一個模塊
require.async('./module1', function(a) {
a.doSomething();
});
// 異步加載多個模塊铡恕，在加載完成時，執(zhí)行回調
require.async(['./module2', './module3'], function(b, c) {
b.doSomething();
c.doSomething();
});
AMD規(guī)范
AMD 即 Asynchronous Module Definition丢间，中文名是“異步模塊定義”的意思探熔。在瀏覽器環(huán)境，要從服務器端加載模塊烘挫，就必須采用非同步模式诀艰，因此瀏覽器端一般采用AMD規(guī)范。AMD是一個在瀏覽器端模塊化開發(fā)的規(guī)范饮六，而AMD規(guī)范的實現其垄，就是require.js。
- 優(yōu)點 異步加載喜滨，不阻塞頁面的加載捉捅，能并行加載多個模塊
- 缺點 不能按需加載，必須提前加載所需依賴
定義模塊
// 獨立模塊 es1.js
define({
module1: function() {},
module2: function() {},
});
// 等價寫法
define(function () {
return {
module1: function() {},
module2: function() {},
};
});
// 非獨立模塊 只有先加載這兩個模塊虽风，新模塊才能正常運行 es2.js
define(['es1', 'es2'], function(m1, m2) {
return {
method: function() {
m1.methodA();
m2.methodB();
}
};
});
注：上面代碼表示新模塊返回一個對象棒口，該對象的method方法就是外部調用的接口寄月，menthod方法內部調用了m1模塊的methodA方法和m2模塊的methodB方法。
需要注意的是无牵，回調函數必須返回一個對象漾肮，這個對象就是你定義的模塊。
// 當依賴過多的時茎毁，引用變得十分繁瑣
define(
[ 'dep1', 'dep2', 'dep3', 'dep4', 'dep5', 'dep6', 'dep7', 'dep8'],
function(dep1, dep2, dep3, dep4, dep5, dep6, dep7, dep8){
...
}
);
// RequireJS提供一種更簡單的寫法
define(
function (require) {
var dep1 = require('dep1'),
dep2 = require('dep2'),
dep3 = require('dep3'),
dep4 = require('dep4'),
dep5 = require('dep5'),
dep6 = require('dep6'),
dep7 = require('dep7'),
dep8 = require('dep8');
...
}
});
引用模塊
require(['es1', 'es2'], function ( es1, es2) {
es1.module1()
es1.module2()
es2.mothod()
});
ES6 模塊化
ES6 在語言標準的層面上捐迫，實現了模塊功能两曼，而且非常簡單，ES6到來,完全可以取代 CommonJS 和 AMD規(guī)范，成為瀏覽器和服務器通用的模塊解決方案月劈。ES6 模塊的設計思想是盡量的靜態(tài)化堤尾，使得編譯時就能確定模塊的依賴關系最盅，以及輸入和輸出的變量榜跌。
注：由于ES6目前在部分版本的瀏覽器中無法執(zhí)行，所以碧库，我們需要通過babel將不被支持的import編譯為當前受到廣泛支持的 require柜与。
特點
- ES6 模塊之中，頂層的this指向undefined嵌灰，即不應該在頂層代碼使用this弄匕。
- 自動采用嚴格模式"use strict"。須遵循嚴格模式的要求
- ES6 模塊的設計思想是盡量的靜態(tài)化沽瞭，編譯時加載”或者靜態(tài)加載迁匠，編譯時輸出接口
- ES6 模塊export、import命令可以出現在模塊的任何位置秕脓，但是必須處于模塊頂層柒瓣。如果處于塊級作用域內，就會報錯
- ES6 模塊輸出的是值的引用
定義模塊 export
//變量 es3.js
export var m = 1;
//函數
export function fn(x, y) {
return x * y;
};
//類class
class Hello{
test(){
console.log("hello")
}
}
// 也可以合并為一個出口暴露
var m = 1;
function fn(x, y) {
return x * y;
};
class Hello{
test(){
console.log("hello")
}
}
export {
m,
fn,
Hello
}
// 在暴露模塊時吠架，可以通過 as 來進行重命名
export{
num as m,
foo as fn,
Test as Hello
}
引用模塊
//靜態(tài)加載,只加載es3.js 文件中三個變量，其他不加載
import {m, fn, Hello} from './es3.js';
//import命令要使用as關鍵字搂鲫，將輸入的變量重命名傍药。
import {fn as fn1} from './es3.js';
//整體加載模塊
improt * as all from './es3.js'
console.log(all.m) // 1
console.log(all.fn(3,4)) // 12
all.Hello.test() // hello
定義模塊 export default
// es4.js
export default function foo() {
console.log('foo');
}
// 或者寫成
function foo() {
console.log('foo');
}
export default foo;
// 當有多個變量或函數需要暴露時，也可以合并為一個出口同時暴露
// export default {
// m,
// fn,
// Hello
// }
//此時的引用方法也發(fā)生一點變化
import myfoo from './es4.js';
myfoo() // foo =>（string）
仔細對比可以發(fā)現魂仍，在引用模塊的時候第二種方法接收的變量不再需要包裹在{}中拐辽。
使用import命令的時候，用戶需要知道所要加載的變量名或函數名擦酌，否則無法加載俱诸。但是用戶肯定希望快速上手，未必愿意閱讀文檔赊舶，去了解模塊有哪些屬性和方法睁搭。
為了給用戶提供方便赶诊，讓他們不用閱讀文檔就能加載模塊，就要用到export default命令园骆，為模塊指定默認輸出舔痪。這樣在引用模塊的時候，我們就可以自己定義任意的變量來接收傳入的模塊锌唾，而不需要關注原模塊輸出的函數名了锄码。
