將一個複雜的程序依據必定的規範封裝成幾個文件,並進行組合在一塊兒javascript
下降複雜度,提升解耦性,部署方便前端
模塊的使用 舉例來講:前端框架layui 的js部分就是採用模塊化(用的本身定義的模塊化方法)java
layui.use就是引入模塊 layui,define就是定義模塊node
每個文件均可以當作一個模塊npm
在服務器端:模塊的加載 是運行時同步加載的瀏覽器
在瀏覽器端:模塊須要提早編譯打包處理前端框架
模塊引入:require(xxx)服務器
第三方模塊:xxx爲模塊名app
自定義模塊: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 是打包輸出的文件)
頁面使用引入:
<script type="text/javascript" src="js/dist/bundle.js"></script> (瀏覽器真正跑的是打包生成的文件)
專門用於瀏覽器端的模塊化規範,模塊的加載是異步的
定義暴露模塊:
//定義沒有依賴的模塊:
define(function(){
return 模塊
})
//定義有依賴的模塊:
define(['module1','module2'],function(m1,m2){
return 模塊
})
引入使用模塊:
require(['module1','module2'],function(m1,m2){
使用m1/m2
})
Require.js
定義暴露模塊:
//定義沒有依賴的模塊:
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()
})
導出模塊:export xxx
引入模塊:import xxx from "url"
頁面引入
使用Babel將ES6編譯爲ES5代碼
使用Browserify編譯打包js