為什么要使用模塊化
- 解決命名沖突
- 實現(xiàn)依賴管理
- 避免污染全局變量
-可以實現(xiàn)代碼的異步加載，提高頁面性能 - 提高代碼可讀性
- 代碼解耦，提高復用性
- 有利于團隊分工
模塊化規(guī)范
| 模塊化規(guī)范 | 特點 | 應用 |
|---|---|---|
| CommonJS | 同步加載 | 服務(wù)器端 |
| AMD | 依賴前置 | 瀏覽器端 |
| CMD | 依賴延遲執(zhí)行 | 瀏覽器端 |
CommonJS
CommonJS 是 node 采用的模塊化規(guī)范，采用同步加載模塊的方式，在服務(wù)器端是沒問題的。
- 一個單獨的文件就是一個模塊，每個模塊都是一個單獨的作用域，在模塊內(nèi)部定義的變量，無法被其他模塊讀取，除非定義為 global 對象的屬性
- 模塊輸出：模塊只有一個出口，
module exports對象，把輸出的內(nèi)容放入該對象。模塊內(nèi)部的操作就好比打草稿紙，module exports就是把草稿的結(jié)果拿出來 - 加載模塊：加載模塊使用
require方法，該方法讀取一個文件并執(zhí)行，返回文件內(nèi)部的module exports對象，如果請求的模塊不能返回，那么require必須拋出一個錯誤
CommonJS 范例
/*
模塊定義model.js
*/
var name = "cg"
function printName(){
console.log(name);
}
function sayHello(){
console.log("hello " + name);
}
module.exports = {
printName: printName
sayHello: sayHello
}
/*
加載模塊
*/
var nameModule = require("./model.js")
nameModule.printName() //"cg"
nameModule.sayHello() //"hello cg"
AMD
Asynchronous Module Definition：是 RequireJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出，主要用于瀏覽器端。特點是：依賴前置，需要在定義時就寫好需要的依賴，提前執(zhí)行依賴，應用有 require.js
//定義模塊 myModule.js
define(["dependency"], function(){
var name = "cg"
function printName(){
console.log(name);
}
return {
printName:printName
}
})
//加載模塊
require(['myModule'], function(my){
my.printName()
})
CMD
Common Module Definition：是 Sea.js 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出，主要用于瀏覽器端，特點是：依賴延遲執(zhí)行。依賴可以就近書寫，等到需要用到這個依賴的時候，再引入這個依賴，應用有 sea.js
//定義模塊 myModule.js
define(function(require, exports, module){
var $ = require("jquery.js")
$("div").addClass("active")
})
//加載模塊
seajs.use(['myModule.js'], function(my){
})
模塊化實戰(zhàn)
效果
加載更多本地測試可行
r.js 打包壓縮成一條js
image.png
