僅需一篇，搞定前端模組化
【51CTO.com原創稿件】
前言
在JavaScript/">JavaScript發展初期就是為了實現簡單的頁面互動邏輯，寥寥數語即可;如今CPU、瀏覽器效能得到了極大的提升，很多頁面邏輯遷移到了客戶端(表單驗證等)，隨著web2.0時代的到來，Ajax技術得到廣泛應用，jQuery等前端庫層出不窮，前端程式碼日益膨脹，此時在JS方面就會考慮使用模組化規範去管理。
本文內容主要有理解模組化，為什麼要模組化，模組化的優缺點以及模組化規範,並且介紹下開發中最流行的CommonJS, AMD, ES6、CMD規範。本文試圖站在小白的角度，用通俗易懂的筆調介紹這些枯燥無味的概念，希望諸君閱讀後，對模組化程式設計有個全新的認識和理解!
如需本文的原始碼，請猛戳 ofollow,noindex" target="_blank">原始碼
一、模組化的理解
1.什麼是模組?
- 將一個複雜的程式依據一定的規則(規範)封裝成幾個塊(檔案), 並進行組合在一起
- 塊的內部資料與實現是私有的, 只是向外部暴露一些介面(方法)與外部其它模組通訊
2.模組化的進化過程
- 全域性function模式 : 將不同的功能封裝成不同的全域性函式
- 編碼: 將不同的功能封裝成不同的全域性函式
- 問題: 汙染全域性名稱空間, 容易引起命名衝突或資料不安全，而且模組成員之間看不出直接關係
function m1(){
//...
}
function m2(){
//...
}
- namespace模式 : 簡單物件封裝
- 作用: 減少了全域性變數，解決命名衝突
- 問題: 資料不安全(外部可以直接修改模組內部的資料)
let myModule = {
data: 'www.baidu.com',
foo() {
console.log(`foo() ${this.data}`)
},
bar() {
console.log(`bar() ${this.data}`)
}
}
myModule.data = 'other data' //能直接修改模組內部的資料
myModule.foo() // foo() other data
這樣的寫法會暴露所有模組成員，內部狀態可以被外部改寫。
- IIFE模式：匿名函式自呼叫(閉包)
- 作用: 資料是私有的, 外部只能通過暴露的方法操作
- 編碼: 將資料和行為封裝到一個函式內部, 通過給window新增屬性來向外暴露介面
- 問題: 如果當前這個模組依賴另一個模組怎麼辦?
// index.html檔案 <script type="text/javascript" src="module.js"></script> <script type="text/javascript"> myModule.foo() myModule.bar() console.log(myModule.data) //undefined 不能訪問模組內部資料 myModule.data = 'xxxx' //不是修改的模組內部的data myModule.foo() //沒有改變 </script>
// module.js檔案
(function(window) {
let data = 'www.baidu.com'
//操作資料的函式
function foo() {
//用於暴露有函式
console.log(`foo() ${data}`)
}
function bar() {
//用於暴露有函式
console.log(`bar() ${data}`)
otherFun() //內部呼叫
}
function otherFun() {
//內部私有的函式
console.log('otherFun()')
}
//暴露行為
window.myModule = { foo, bar } //ES6寫法
})(window)
最後得到的結果：
- IIFE模式增強 : 引入依賴
這就是現代模組實現的基石
// module.js檔案
(function(window, $) {
let data = 'www.baidu.com'
//操作資料的函式
function foo() {
//用於暴露有函式
console.log(`foo() ${data}`)
$('body').css('background', 'red')
}
function bar() {
//用於暴露有函式
console.log(`bar() ${data}`)
otherFun() //內部呼叫
}
function otherFun() {
//內部私有的函式
console.log('otherFun()')
}
//暴露行為
window.myModule = { foo, bar }
})(window, jQuery)
// index.html檔案 <!-- 引入的js必須有一定順序 --> <script type="text/javascript" src="jquery-1.10.1.js"></script> <script type="text/javascript" src="module.js"></script> <script type="text/javascript"> myModule.foo() </script>
上例子通過jquery方法將頁面的背景顏色改成紅色，所以必須先引入jQuery庫，就把這個庫當作引數傳入。這樣做除了保證模組的獨立性，還使得模組之間的依賴關係變得明顯。
3. 模組化的好處
- 避免命名衝突(減少名稱空間汙染)
- 更好的分離, 按需載入
- 更高複用性
- 高可維護性
4. 引入 <script> 多個 後出現出現問題
- 請求過多
首先我們要依賴多個模組，那樣就會發送多個請求，導致請求過多
- 依賴模糊
我們不知道他們的具體依賴關係是什麼，也就是說很容易因為不瞭解他們之間的依賴關係導致載入先後順序出錯。
- 難以維護
以上兩種原因就導致了很難維護，很可能出現牽一髮而動全身的情況導致專案出現嚴重的問題。
模組化固然有多個好處，然而一個頁面需要引入多個js檔案，就會出現以上這些問題。而這些問題可以通過模組化規範來解決，下面介紹開發中最流行的commonjs, AMD, ES6, CMD規範。
二、模組化規範
1.CommonJS
(1)概述
Node 應用由模組組成，採用 CommonJS 模組規範。每個檔案就是一個模組，有自己的作用域。在一個檔案裡面定義的變數、函式、類，都是私有的，對其他檔案不可見。在伺服器端，模組的載入是執行時同步載入的;在瀏覽器端，模組需要提前編譯打包處理。
(2)特點
- 所有程式碼都執行在模組作用域，不會汙染全域性作用域。
- 模組可以多次載入，但是隻會在第一次載入時執行一次，然後執行結果就被快取了，以後再載入，就直接讀取快取結果。要想讓模組再次執行，必須清除快取。
- 模組載入的順序，按照其在程式碼中出現的順序。
(3)基本語法
- 暴露模組：module.exports = value或exports.xxx = value
- 引入模組：require(xxx),如果是第三方模組，xxx為模組名;如果是自定義模組，xxx為模組檔案路徑
此處我們有個疑問：CommonJS暴露的模組到底是什麼? CommonJS規範規定，每個模組內部，module變數代表當前模組。這個變數是一個物件，它的exports屬性(即module.exports)是對外的介面。載入某個模組，其實是載入該模組的module.exports屬性。
// example.js
var x = 5;
var addX = function (value) {
return value + x;
};
module.exports.x = x;
module.exports.addX = addX;
上面程式碼通過module.exports輸出變數x和函式addX。
var example = require('./example.js');//如果引數字串以“./”開頭，則表示載入的是一個位於相對路徑
console.log(example.x); // 5
console.log(example.addX(1)); // 6
require命令用於載入模組檔案。require命令的基本功能是，讀入並執行一個JavaScript檔案，然後返回該模組的exports物件。如果沒有發現指定模組，會報錯。
(4)模組的載入機制
CommonJS模組的載入機制是，輸入的是被輸出的值的拷貝。也就是說，一旦輸出一個值，模組內部的變化就影響不到這個值。這點與ES6模組化有重大差異(下文會介紹)，請看下面這個例子：
// lib.js
var counter = 3;
function incCounter() {
counter++;
}
module.exports = {
counter: counter,
incCounter: incCounter,
};
上面程式碼輸出內部變數counter和改寫這個變數的內部方法incCounter。
// main.js
var counter = require('./lib').counter;
var incCounter = require('./lib').incCounter;
console.log(counter); // 3
incCounter();
console.log(counter); // 3
上面程式碼說明，counter輸出以後，lib.js模組內部的變化就影響不到counter了。這是因為counter是一個原始型別的值，會被快取。除非寫成一個函式，才能得到內部變動後的值。
(5)伺服器端實現
①下載安裝node.js
②建立專案結構
注意：用npm init 自動生成package.json時，package name(包名)不能有中文和大寫
|-modules
|-module1.js
|-module2.js
|-module3.js
|-app.js
|-package.json
{
"name": "commonJS-node",
"version": "1.0.0"
}
③下載第三方模組
npm install uniq --save // 用於陣列去重
④定義模組程式碼
//module1.js
module.exports = {
msg: 'module1',
foo() {
console.log(this.msg)
}
}
//module2.js
module.exports = function() {
console.log('module2')
}
//module3.js
exports.foo = function() {
console.log('foo() module3')
}
exports.arr = [1, 2, 3, 3, 2]
// app.js檔案
// 引入第三方庫，應該放置在最前面
let uniq = require('uniq')
let module1 = require('./modules/module1')
let module2 = require('./modules/module2')
let module3 = require('./modules/module3')
module1.foo() //module1
module2() //module2
module3.foo() //foo() module3
console.log(uniq(module3.arr)) //[ 1, 2, 3 ]
⑤通過node執行app.js
命令列輸入node app.js，執行JS檔案
(6)瀏覽器端實現(藉助Browserify)
①建立專案結構
|-js
|-dist //打包生成檔案的目錄
|-src //原始碼所在的目錄
|-module1.js
|-module2.js
|-module3.js
|-app.js //應用主原始檔
|-index.html //運行於瀏覽器上
|-package.json
{
"name": "browserify-test",
"version": "1.0.0"
}
②下載browserify
- 全域性: npm install browserify -g
- 區域性: npm install browserify --save-dev
③定義模組程式碼(同伺服器端)
注意：index.html檔案要執行在瀏覽器上，需要藉助browserify將app.js檔案打包編譯，如果直接在index.html引入app.js就會報錯!
④打包處理js
根目錄下執行browserify js/src/app.js -o js/dist/bundle.js
⑤頁面使用引入
在index.html檔案中引入
2.AMD
CommonJS規範載入模組是同步的，也就是說，只有載入完成，才能執行後面的操作。AMD規範則是非同步載入模組，允許指定回撥函式。由於Node.js主要用於伺服器程式設計，模組檔案一般都已經存在於本地硬碟，所以載入起來比較快，不用考慮非同步載入的方式，所以CommonJS規範比較適用。但是，如果是瀏覽器環境，要從伺服器端載入模組，這時就必須採用非同步模式，因此瀏覽器端一般採用AMD規範。此外AMD規範比CommonJS規範在瀏覽器端實現要來著早。
(1)AMD規範基本語法
定義暴露模組:
//定義沒有依賴的模組
define(function(){
return 模組
})
//定義有依賴的模組
define(['module1', 'module2'], function(m1, m2){
return 模組
})
引入使用模組:
require(['module1', 'module2'], function(m1, m2){
使用m1/m2
})
(2)未使用AMD規範與使用require.js
通過比較兩者的實現方法，來說明使用AMD規範的好處。
未使用AMD規範
// alerter.js檔案
(function (window) {
let msg = 'www.baidu.com'
function getMsg() {
return msg.toUpperCase()
}
window.dataService = {getMsg}
})(window)
// dataService.js檔案
(function (window, dataService) {
let name = 'Tom'
function showMsg() {
alert(dataService.getMsg() + ', ' + name)
}
window.alerter = {showMsg}
})(window, dataService)
// main.js檔案
(function (alerter) {
alerter.showMsg()
})(alerter)
// index.html檔案
// index.html檔案 <div><h1>Modular Demo 1: 未使用AMD(require.js)</h1></div> <script type="text/javascript" src="js/modules/dataService.js"></script> <script type="text/javascript" src="js/modules/alerter.js"></script> <script type="text/javascript" src="js/main.js"></script>
最後得到如下結果：
這種方式缺點很明顯：首先會發送多個請求，其次引入的js檔案順序不能搞錯，否則會報錯!
- 使用require.js
RequireJS是一個工具庫，主要用於客戶端的模組管理。它的模組管理遵守AMD規範，RequireJS的基本思想是，通過define方法，將程式碼定義為模組;通過require方法，實現程式碼的模組載入。
接下來介紹AMD規範在瀏覽器實現的步驟：
①下載require.js, 並引入
- 官網: http://www.requirejs.cn/
- github : https://github.com/requirejs/requirejs
然後將require.js匯入專案: js/libs/require.js
②建立專案結構
|-js |-libs |-require.js |-modules |-alerter.js |-dataService.js |-main.js |-index.html
③定義require.js的模組程式碼
// dataService.js檔案
// 定義沒有依賴的模組
define(function() {
let msg = 'www.baidu.com'
function getMsg() {
return msg.toUpperCase()
}
return { getMsg } // 暴露模組
})
//alerter.js檔案
// 定義有依賴的模組
define(['dataService'], function(dataService) {
let name = 'Tom'
function showMsg() {
alert(dataService.getMsg() + ', ' + name)
}
// 暴露模組
return { showMsg }
})
// main.js檔案
(function() {
require.config({
baseUrl: 'js/', //基本路徑 出發點在根目錄下
paths: {
//對映: 模組標識名: 路徑
alerter: './modules/alerter', //此處不能寫成alerter.js,會報錯
dataService: './modules/dataService'
}
})
require(['alerter'], function(alerter) {
alerter.showMsg()
})
})()
// index.html檔案 <!DOCTYPE html> <html> <head> <title>Modular Demo</title> </head> <body> <!-- 引入require.js並指定js主檔案的入口 --> <script data-main="js/main" src="js/libs/require.js"></script> </body> </html>
④頁面引入require.js模組:
在index.html引入
此外在專案中如何引入第三方庫?只需在上面程式碼的基礎稍作修改：
// alerter.js檔案
define(['dataService', 'jquery'], function(dataService, $) {
let name = 'Tom'
function showMsg() {
alert(dataService.getMsg() + ', ' + name)
}
$('body').css('background', 'green')
// 暴露模組
return { showMsg }
})
// main.js檔案
(function() {
require.config({
baseUrl: 'js/', //基本路徑 出發點在根目錄下
paths: {
//自定義模組
alerter: './modules/alerter', //此處不能寫成alerter.js,會報錯
dataService: './modules/dataService',
// 第三方庫模組
jquery: './libs/jquery-1.10.1' //注意：寫成jQuery會報錯
}
})
require(['alerter'], function(alerter) {
alerter.showMsg()
})
})()
上例是在alerter.js檔案中引入jQuery第三方庫，main.js檔案也要有相應的路徑配置。
小結：通過兩者的比較，可以得出AMD模組定義的方法非常清晰，不會汙染全域性環境，能夠清楚地顯示依賴關係。AMD模式可以用於瀏覽器環境，並且允許非同步載入模組，也可以根據需要動態載入模組。
3.CMD
CMD規範專門用於瀏覽器端，模組的載入是非同步的，模組使用時才會載入執行。CMD規範整合了CommonJS和AMD規範的特點。在 Sea.js 中，所有 JavaScript 模組都遵循 CMD模組定義規範。
(1)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
})
引入使用模組：
define(function (require) {
var m1 = require('./module1')
var m4 = require('./module4')
m1.show()
m4.show()
})
(2)sea.js簡單使用教程
①下載sea.js, 並引入
- 官網: http://seajs.org/
- github : https://github.com/seajs/seajs
然後將sea.js匯入專案: js/libs/sea.js
②建立專案結構
|-js |-libs |-sea.js |-modules |-module1.js |-module2.js |-module3.js |-module4.js |-main.js |-index.html
③定義sea.js的模組程式碼
// module1.js檔案
define(function (require, exports, module) {
//內部變數資料
var data = 'atguigu.com'
//內部函式
function show() {
console.log('module1 show() ' + data)
}
//向外暴露
exports.show = show
})
// module2.js檔案
define(function (require, exports, module) {
module.exports = {
msg: 'I Will Back'
}
})
// module3.js檔案
define(function(require, exports, module) {
const API_KEY = 'abc123'
exports.API_KEY = API_KEY
})
// module4.js檔案
define(function (require, exports, module) {
//引入依賴模組(同步)
var module2 = require('./module2')
function show() {
console.log('module4 show() ' + module2.msg)
}
exports.show = show
//引入依賴模組(非同步)
require.async('./module3', function (m3) {
console.log('非同步引入依賴模組3 ' + m3.API_KEY)
})
})
// main.js檔案
define(function (require) {
var m1 = require('./module1')
var m4 = require('./module4')
m1.show()
m4.show()
})
④在index.html中引入
<script type="text/javascript" src="js/libs/sea.js"></script>
<script type="text/javascript">
seajs.use('./js/modules/main')
</script>
最後得到結果如下：
4.ES6模組化
ES6 模組的設計思想是儘量的靜態化，使得編譯時就能確定模組的依賴關係，以及輸入和輸出的變數。CommonJS 和 AMD 模組，都只能在執行時確定這些東西。比如，CommonJS 模組就是物件，輸入時必須查詢物件屬性。
(1)ES6模組化語法
export命令用於規定模組的對外介面，import命令用於輸入其他模組提供的功能。
/** 定義模組 math.js **/
var basicNum = 0;
var add = function (a, b) {
return a + b;
};
export { basicNum, add };
/** 引用模組 **/
import { basicNum, add } from './math';
function test(ele) {
ele.textContent = add(99 + basicNum);
}
如上例所示，使用import命令的時候，使用者需要知道所要載入的變數名或函式名，否則無法載入。為了給使用者提供方便，讓他們不用閱讀文件就能載入模組，就要用到export default命令，為模組指定預設輸出。
// export-default.js
export default function () {
console.log('foo');
}
// import-default.js import customName from './export-default'; customName(); // 'foo'
模組預設輸出, 其他模組載入該模組時，import命令可以為該匿名函式指定任意名字。
(2)ES6 模組與 CommonJS 模組的差異
它們有兩個重大差異：
① CommonJS 模組輸出的是一個值的拷貝，ES6 模組輸出的是值的引用。
② CommonJS 模組是執行時載入，ES6 模組是編譯時輸出介面。
第二個差異是因為 CommonJS 載入的是一個物件(即module.exports屬性)，該物件只有在指令碼執行完才會生成。而 ES6 模組不是物件，它的對外介面只是一種靜態定義，在程式碼靜態解析階段就會生成。
下面重點解釋第一個差異，我們還是舉上面那個CommonJS模組的載入機制例子:
// lib.js
export let counter = 3;
export function incCounter() {
counter++;
}
// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4
ES6 模組的執行機制與 CommonJS 不一樣。ES6 模組是動態引用，並且不會快取值，模組裡面的變數繫結其所在的模組。
(3) ES6-Babel-Browserify使用教程
簡單來說就一句話：使用Babel將ES6編譯為ES5程式碼，使用Browserify編譯打包js。
①定義package.json檔案
{
"name" : "es6-babel-browserify",
"version" : "1.0.0"
}
②安裝babel-cli, babel-preset-es2015和browserify
- npm install babel-cli browserify -g
- npm install babel-preset-es2015 --save-dev
- preset 預設(將es6轉換成es5的所有外掛打包)
③定義.babelrc檔案
{
"presets": ["es2015"]
}
④定義模組程式碼
//module1.js檔案
// 分別暴露
export function foo() {
console.log('foo() module1')
}
export function bar() {
console.log('bar() module1')
}
//module2.js檔案
// 統一暴露
function fun1() {
console.log('fun1() module2')
}
function fun2() {
console.log('fun2() module2')
}
export { fun1, fun2 }
//module3.js檔案
// 預設暴露 可以暴露任意資料類項，暴露什麼資料，接收到就是什麼資料
export default () => {
console.log('預設暴露')
}
// app.js檔案
import { foo, bar } from './module1'
import { fun1, fun2 } from './module2'
import module3 from './module3'
foo()
bar()
fun1()
fun2()
module3()
⑤ 編譯並在index.html中引入
- 使用Babel將ES6編譯為ES5程式碼(但包含CommonJS語法) : babel js/src -d js/lib
- 使用Browserify編譯js : browserify js/lib/app.js -o js/lib/bundle.js
然後在index.html檔案中引入
<script type="text/javascript" src="js/lib/bundle.js"></script>
最後得到如下結果：
【51CTO原創稿件，合作站點轉載請註明原文作者和出處為51CTO.com】
【責任編輯：龐桂玉 TEL：（010）68476606】