Common JS 是模塊化規範之一。每個文件都是一個作用域，文件裡面定義的變數/函數都是私有的，對其他模塊不可見。Common JS 規範在 Node 端和瀏覽器端有不同的實現。 ...
1 Common JS 介紹
Common JS 是模塊化規範之一。每個文件都是一個作用域，文件裡面定義的變數/函數都是私有的，對其他模塊不可見。Common JS 規範在 Node 端和瀏覽器端有不同的實現。
1.1 暴露模塊
暴露模塊有兩種方式：module.export 或 exports ，兩種方式均可以暴露一個函數或對象。兩種方式本質上是一樣的，Common JS 在每個模塊中隱式將 module.exports 指向（賦值）給 exports 語法格式如下：
// 暴露函數
module.exports = function () {}
// 暴露對象
module.exports = {
xxx: () => {}
}
exports.xxx = {}
exports.xxx = function() {}
1.2 載入模塊
載入模塊使用 require() 函數。格式如下：
const xxx = require('xxxx')
載入模塊是同步操作，按照在代碼中出現的順序進行載入。
可以在代碼中多次使用 require 載入模塊，但只會在首次載入時真正去載入，載入後就會將該模塊緩存。
2 Common JS 規範的 Node 實現
Node.js 實現了 Common JS 規範，所以在 Node 環境下可以直接使用 Common JS 規範，無須引入其他包。
2.1 創建模塊
創建 modules 目錄，在該目錄下創建四個文件：module1.js、module2.js、module3.js、module4.js 分別代表 4 個模塊。
module1.js 使用 module.exports 暴露一個匿名對象：
const msg = 'this is module1'
console.log(msg)
module.exports = {
testFun: () => {
console.log('in module1 test function.')
}
}
module2.js 使用 module.exports 暴露一個函數：
const msg = 'this is module2'
console.log(msg)
const testFun = () => {
console.log('in module2 test function.')
}
module.exports = testFun
module3.js 使用 exports 暴露一個函數：
const msg = 'this is module3'
console.log(msg)
exports.testFun = () => {
console.log('in module3 test function.')
}
module4.js 使用 exports 暴露對象：
const msg = 'this is module4'
console.log(msg)
exports.demo = {
testFun: () => {
console.log('in module4 test function.')
}
}
2.2 使用模塊
和 module 目錄同級創建入口 JS 文件 index.js，在該文件中載入並使用上面 4 個模塊：
console.log('---- 載入模塊 ----')
const demo1 = require('./modules/module1')
const demo2 = require('./modules/module2')
const demo3 = require('./modules/module3')
const demo4 = require('./modules/module4')
console.log('---- 使用模塊 ----')
demo1.testFun()
demo2()
demo3.testFun()
demo4.demo.testFun()
需要註意：使用模塊時，要與暴露模塊對應起來。
2.3 運行程式
在 Node 環境下運行 index.js。
在控制臺中輸入如下命令：
node ./index.js
控制台輸出：
3 Common JS 規範的瀏覽器實現
3.1 創建 HTML
在 module 目錄同級創建入口 HTML 文件：index.html，在該文件中通過 script 標簽引入上面編寫的 index.js 文件：
<script src="./index.js"></script>
在瀏覽器中訪問 index.html ，會發現瀏覽器的 console 中提示如下錯誤：
這是因為瀏覽器不認識 require ，所以需要使用工具將 Common JS 規範的代碼編譯為瀏覽器識別的 JS 語法。這裡咱們使用 browserify。
3.2 browserify
browserify 可以支持咱使用 Common JS 模塊化規範來組織瀏覽器端的 Javascript 代碼。
全局安裝 browserify ：
npm install -g browserify
查看 browserify 版本號：
browserify --version
使用 browserify 編譯 Common JS 規範的代碼：
browserify ./index.js -o ./bundle.js
執行該命令後，會在當前目錄下生成 bundle.js 文件。
在 index.html 文件中引入 bundle.js：
<script src="./bundle.js"></script>
3.3 運行HTML
再次在瀏覽器中訪問 index.html，此時在瀏覽器控制臺中會輸出正確的結果：
4 總結
Common JS 規範的語法：
- 暴露模塊：module.exports 或 exports
- 載入模塊： require()
Common JS 規範的使用：
- Node：Node JS 支持 Common JS 規範；
- 瀏覽器：需要使用 browserify 編譯。
感謝你閱讀本文，如果本文給了你一點點幫助或者啟發，還請三連支持一下，點贊、關註、收藏，作者會持續與大家分享更多乾貨
