模塊化在項(xiàng)目中十分的重要，一個(gè)復(fù)雜的項(xiàng)目肯定有很多相似的功能模塊，如果每次都需要重新編寫模塊肯定既費(fèi)時(shí)又耗力。但是引用別人編寫模塊的前提是要有統(tǒng)一的“打開姿勢(shì)”，如果每個(gè)人有各自的寫法，那么肯定會(huì)亂套，下面介紹幾種JS的模塊化的規(guī)范。

一:模塊化進(jìn)程一：script標(biāo)簽

這是最原始的 JavaScript 文件加載方式，如果把每一個(gè)文件看做是一個(gè)模塊，那么他們的接口通常是暴露在全局作用域下，也就是定義在 window 對(duì)象中，不同模塊的接口調(diào)用都是一個(gè)作用域中，一些復(fù)雜的框架，會(huì)使用命名空間的概念來組織這些模塊的接口。

缺點(diǎn):

1、污染全局作用域

2、開發(fā)人員必須主觀解決模塊和代碼庫的依賴關(guān)系

3、文件只能按照script標(biāo)簽的書寫順序進(jìn)行加載

4、在大型項(xiàng)目中各種資源難以管理，長期積累的問題導(dǎo)致代碼庫混亂不堪

二:模塊化進(jìn)程二：CommonJS規(guī)范

該規(guī)范的核心思想是允許模塊通過require方法來同步加載所要依賴的其他模塊，然后通過 exports 或 module.exports 來導(dǎo)出需要暴露的接口。

require("module");require("../file.js");exports.doStuff = function(){};module.exports = someValue;

優(yōu)點(diǎn)：

1、簡單并容易使用

2、服務(wù)器端模塊便于重用

缺點(diǎn):

1、同步的模塊加載方式不適合在瀏覽器環(huán)境中，同步意味著阻塞加載，瀏覽器資源是異步加載的

2、不能非阻塞的并行加載多個(gè)模塊

module.exports與exports的區(qū)別

1、exports 是指向的 module.exports 的引用

2、module.exports 初始值為一個(gè)空對(duì)象 {}，所以 exports 初始值也是 {}

3、require() 返回的是 module.exports 而不是 exports

exports示例：

// app.jsvar circle = require('./circle');console.log(circle.area(4));// circle.jsexports.area = function(r){ return r * r * Math.PI;}

module.exports示例：

// app.jsvar area = require('./area');console.log(area(4));// area.jsmodule.exports = function(r){ return r * r * Math.PI;}

錯(cuò)誤的情況：

// app.jsvar area = require('./area');console.log(area(4));// area.jsexports = function(r){ return r * r * Math.PI;}

其實(shí)是對(duì) exports 進(jìn)行了覆蓋，也就是說 exports 指向了一塊新的內(nèi)存（內(nèi)容為一個(gè)計(jì)算圓面積的函數(shù)），也就是說 exports 和 module.exports 不再指向同一塊內(nèi)存，也就是說此時(shí) exports 和 module.exports 毫無聯(lián)系，也就是說 module.exports 指向的那塊內(nèi)存并沒有做任何改變，仍然為一個(gè)空對(duì)象{}，也就是說area.js導(dǎo)出了一個(gè)空對(duì)象，所以我們?cè)?app.js 中調(diào)用 area(4) 會(huì)報(bào) TypeError: object is not a function 的錯(cuò)誤。

總結(jié)：當(dāng)我們想讓模塊導(dǎo)出的是一個(gè)對(duì)象時(shí)， exports 和 module.exports 均可使用（但 exports 也不能重新覆蓋為一個(gè)新的對(duì)象），而當(dāng)我們想導(dǎo)出非對(duì)象接口時(shí)，就必須也只能覆蓋 module.exports 。