為什么要使用模塊化
- 解決命名沖突
- 實(shí)現(xiàn)依賴管理
- 避免污染全局變量
-可以實(shí)現(xiàn)代碼的異步加載法精，提高頁面性能 - 提高代碼可讀性
- 代碼解耦，提高復(fù)用性
- 有利于團(tuán)隊分工
模塊化規(guī)范
| 模塊化規(guī)范 | 特點(diǎn) | 應(yīng)用 |
|---|---|---|
| CommonJS | 同步加載 | 服務(wù)器端 |
| AMD | 依賴前置 | 瀏覽器端 |
| CMD | 依賴延遲執(zhí)行 | 瀏覽器端 |
CommonJS
CommonJS 是 node 采用的模塊化規(guī)范槐臀，采用同步加載模塊的方式，在服務(wù)器端是沒問題的。
- 一個單獨(dú)的文件就是一個模塊，每個模塊都是一個單獨(dú)的作用域邮偎，在模塊內(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)出馏鹤，主要用于瀏覽器端征椒。特點(diǎn)是：依賴前置，需要在定義時就寫好需要的依賴湃累，提前執(zhí)行依賴勃救，應(yīng)用有 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)出，主要用于瀏覽器端治力，特點(diǎn)是：依賴延遲執(zhí)行蒙秒。依賴可以就近書寫，等到需要用到這個依賴的時候宵统，再引入這個依賴晕讲，應(yīng)用有 sea.js
//定義模塊 myModule.js
define(function(require, exports, module){
var $ = require("jquery.js")
$("div").addClass("active")
})
//加載模塊
seajs.use(['myModule.js'], function(my){
})
模塊化實(shí)戰(zhàn)
效果
加載更多本地測試可行
r.js 打包壓縮成一條js
image.png
