這篇文章主要介紹了關於JS模組化的解析，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
將一個複雜的程式依據一定的規格封裝成幾個文件，並進行組合在一起
降低複雜度，提高解耦性，部署方便
避免命名衝突（減少命名空間污染）
更好的分離，按需載入
#更高復用性
高可維護性
每個檔案都可以當做一個模組
在伺服器端：模組的載入是運行時同步載入的
在瀏覽器端：模組需要提前編譯打包處理
模組引入：require（xxx）
第三方模組：xxx為模組名稱
自訂模組：xxx為模組檔案路徑
暴露模組：exports.xxx = value 和module.exports = value
# 暴露的模組本質是exports 物件
exports本身是一個空物件 exports.xxx = value是為exports物件新增屬性或方法
module.exports = value 是直接用value新物件來覆寫原來的空白物件
##實作：#伺服器端實作：Node .js
瀏覽器端實作：Browserify （CommonJS的瀏覽器端的打包工具）
##下載安裝browserify全域：npm install browserify -g
局部：npm install browserify --save-dev
定義模組程式碼（ js檔案程式碼並揭露對應內容）
引入模組 在app.js 中用require引入模組但是瀏覽器不認識require方法，需要打包處理js
在根目錄下終端輸入browserify js/src/app.js -o js/dist/bundle.js （js/src/app.js來源檔案js/dist/bundle.js 是打包輸出的檔案)
頁面使用引入：
（瀏覽器真正跑的是打包生成的檔案）
#2、AMD
基本語法：
//定义没有依赖的模块：
define(function(){
return 模块
})
//定义有依赖的模块：
define(['module1','module2'],function(m1,m2){
return 模块
})登入後複製
require(['module1','module2'],function(m1,m2){
使用m1/m2
})登入後複製
3、CMD（了解）
說明：專門用於瀏覽器端，模組的載入是異步的，模組使用時才會載入執行 //定义没有依赖的模块：
define(function(require,exports,module){
exports.xxx = value
module.exports = value
})
//定义有依赖的模块：
define(function(require,exports,module){
//引入依赖模块(同步)
var module2 = require("./module2")
//引入依赖模块（异步）
require.async("./module3",function(m3){
})
//暴露模块
exports.xxx = value
})登入後複製
require(function(require){
var m1 = require('./module1')
var m4 = require('./module4')
m1.show()
m4.show()
})登入後複製
引入模組：import xxx from "url"
#頁面引入
實作（瀏覽器端）：
使用Browserify編譯打包js
#以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
以上是對於JS模組化的解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
