在一個(gè)項(xiàng)目中，Js 代碼的量可能是巨大的沃但，
全放在一個(gè)文件里顯然不利于管理和運(yùn)行磁滚。
那么就要把功能不同的代碼劃分到不同的文件內(nèi)。
那么就可能出現(xiàn)這種情況：
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
甚至更多的網(wǎng)絡(luò)請求宵晚，
又如果垂攘，代碼文件之間，有互相依賴的代碼：
// 在 a.js 中
function getFormatDate (date, type) {
// type === 1 返回格式1
// type === 2 返回格式2等等
}
// 在 b.js 中
function aGetFormatDate (date) {
// 要求返回格式1
return getFormatDate (date, 2)
}
// 在 c.js 中
var dt = new Date()
console.log (aGetFormateDate(dt))
在以上代碼中淤刃，它們之間有聯(lián)系晒他，
但是，如果只看其中一個(gè)文件逸贾，我們并不知道這個(gè)方法來自哪里陨仅，
這同樣不利于管理。為了解決這些問題铝侵，就出現(xiàn)了—— Js 模塊化灼伤。
-
AMD - 異步模塊定義
這是一種運(yùn)行在客戶端的一種規(guī)則。
它的主要特征就是模塊異步加載咪鲜，
模塊加載的同時(shí)不影響后面的語句狐赡，
加載完后再運(yùn)行定義的回調(diào)函數(shù)。
其中最為熟知的是 require.js嗜诀，
它全局定義了 define 函數(shù)和 require 函數(shù)猾警，來實(shí)現(xiàn)功能孔祸。
<script src="require.js" data-main="main"></script>
引用 require.js ，然后加載核心文件 main （入口）來開始運(yùn)行发皿。
// a.js
define (function () {
return {
getFormatDate: function (date, type) {
if (type ===1) {
return "格式1"
}
if (type === 2) {
return "格式2"
}
}
}
})
// b.js
define (['./a.js'], function (a) {
return {
aGetFormatDate: function (date) {
return a.getFormatDate(date, 2)
}
}
})
// c.js
define (['./b'], function (b) {
return {
printDate: function (date) {
console.log (b.aGetFormateDate(date))
}
}
})
// main.js
require(['./c.js'], function (c) {
var date = new Date()
v.printDate(date)
})
以上就模擬了流程崔慧，我們可以清楚的看到每個(gè)回調(diào)函數(shù)所依賴的 js 文件。
而這些文件也是在被依賴是穴墅，才開始異步加載惶室。
-
CommonJS
一種 node.js 模塊化規(guī)范，也就是在服務(wù)器端的規(guī)范玄货。
有以下優(yōu)點(diǎn)：
前端開發(fā)以來的插件和庫皇钞，都可以從 npm 中獲取
構(gòu)建工具的高度自動(dòng)化，使得使用 npm 的成本非常低
CommonJS 不需要異步加載松捉，而是同步一次性加載（服務(wù)器端優(yōu)勢）
代碼演示一下
// a.js
module.exports = {
getFormatDate: function (date, type) {
if (type ===1) {
return "格式1"
}
if (type === 2) {
return "格式2"
}
}
}
// b.js
var reqA = require ('a.js')
module.exprots = {
aGetFormatDate: function (date) {
return a.getFormatDate(date, 2)
}
}
CommonJS定義的模塊分為：
- require()用來引入外部模塊夹界；
- exports對(duì)象用于導(dǎo)出當(dāng)前模塊的方法或變量，唯一的導(dǎo)出口隘世；
- module對(duì)象就代表模塊本身可柿。
AMD 和 CommonJS 的差異
需要異步加載的，就是用 AMD
CommonJS 需要構(gòu)建工具支持丙者，如果項(xiàng)目用 npm 的話可以優(yōu)先考慮复斥。
-
另外還有一種 CMD 模塊定義規(guī)范
Wait me back
