詳解JavaScript模塊化開發(fā)
什么是模塊化開發(fā)？
前端開發(fā)中，起初只要在script標(biāo)簽中嵌入幾十上百行代碼就能實現(xiàn)一些基本的交互效果，后來js得到重視，應(yīng)用也廣泛起來了，jQuery，Ajax，Node.Js，MVC，MVVM等的助力也使得前端開發(fā)得到重視，也使得前端項目越來越復(fù)雜，然而，JavaScript卻沒有為組織代碼提供任何明顯幫助，甚至沒有類的概念，更不用說模塊（module）了，那么什么是模塊呢？
一個模塊就是實現(xiàn)特定功能的文件，有了模塊，我們就可以更方便地使用別人的代碼，想要什么功能，就加載什么模塊。模塊開發(fā)需要遵循一定的規(guī)范，否則就都亂套了。
根據(jù)AMD規(guī)范，我們可以使用define定義模塊，使用require調(diào)用模塊。
目前，通行的js模塊規(guī)范主要有兩種：CommonJS和AMD。
AMD規(guī)范
AMD 即Asynchronous Module Definition，中文名是“異步模塊定義”的意思。它是一個在瀏覽器端模塊化開發(fā)的規(guī)范，服務(wù)器端的規(guī)范是CommonJS
模塊將被異步加載，模塊加載不影響后面語句的運行。所有依賴某些模塊的語句均放置在回調(diào)函數(shù)中。
AMD 是 RequireJS 在推廣過程中對模塊定義的規(guī)范化的產(chǎn)出。
define() 函數(shù)
AMD規(guī)范只定義了一個函數(shù) define，它是全局變量。函數(shù)的描述為：
define(id?, dependencies?, factory);
參數(shù)說明：
id：指定義中模塊的名字，可選；如果沒有提供該參數(shù)，模塊的名字應(yīng)該默認(rèn)為模塊加載器請求的指定腳本的名字。如果提供了該參數(shù)，模塊名必須是“頂級”的和絕對的（不允許相對名字）。
依賴dependencies：是一個當(dāng)前模塊依賴的，已被模塊定義的模塊標(biāo)識的數(shù)組字面量。
依賴參數(shù)是可選的，如果忽略此參數(shù)，它應(yīng)該默認(rèn)為["require", "exports", "module"]。然而，如果工廠方法的長度屬性小于3，加載器會選擇以函數(shù)的長度屬性指定的參數(shù)個數(shù)調(diào)用工廠方法。
工廠方法factory，模塊初始化要執(zhí)行的函數(shù)或?qū)ο蟆Ｈ绻麨楹瘮?shù)，它應(yīng)該只被執(zhí)行一次。如果是對象，此對象應(yīng)該為模塊的輸出值。
模塊名的格式
模塊名用來唯一標(biāo)識定義中模塊，它們同樣在依賴性數(shù)組中使用：
模塊名是用正斜杠分割的有意義單詞的字符串
單詞須為駝峰形式，或者"."，".."
模塊名不允許文件擴展名的形式，如“.js”
模塊名可以為 "相對的" 或 "頂級的"。如果首字符為“.”或“..”則為相對的模塊名
頂級的模塊名從根命名空間的概念模塊解析
相對的模塊名從 "require" 書寫和調(diào)用的模塊解析
使用 require 和 exports
創(chuàng)建一個名為"alpha"的模塊，使用了require，exports，和名為"beta"的模塊:
define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
exports.verb = function() {
return beta.verb();
//Or:
return require("beta").verb();
}
});
require API 介紹： https://github.com/amdjs/amdjs-api/wiki/require
AMD規(guī)范中文版：https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88)
目前，實現(xiàn)AMD的庫有RequireJS 、curl 、Dojo 、Nodules 等。
CommonJS規(guī)范
CommonJS是服務(wù)器端模塊的規(guī)范，Node.js采用了這個規(guī)范。Node.JS首先采用了js模塊化的概念。
根據(jù)CommonJS規(guī)范，一個單獨的文件就是一個模塊。每一個模塊都是一個單獨的作用域，也就是說，在該模塊內(nèi)部定義的變量，無法被其他模塊讀取，除非定義為global對象的屬性。
輸出模塊變量的最好方法是使用module.exports對象。
var i = 1;
var max = 30;
module.exports = function () {
for (i -= 1; i++ < max; ) {
console.log(i);
}
max *= 1.1;
};
上面代碼通過module.exports對象，定義了一個函數(shù)，該函數(shù)就是模塊外部與內(nèi)部通信的橋梁。
加載模塊使用require方法，該方法讀取一個文件并執(zhí)行，最后返回文件內(nèi)部的module.exports對象。
CommonJS 規(guī)范：http://javascript.ruanyifeng.com/nodejs/commonjs.html
RequireJS和SeaJS
RequireJS由James Burke創(chuàng)建，他也是AMD規(guī)范的創(chuàng)始人。
define方法用于定義模塊，RequireJS要求每個模塊放在一個單獨的文件里。
RequireJS 和 Sea.js 都是模塊加載器，倡導(dǎo)模塊化開發(fā)理念，核心價值是讓 JavaScript 的模塊化開發(fā)變得簡單自然。
SeaJS與RequireJS最大的區(qū)別:
SeaJS對模塊的態(tài)度是懶執(zhí)行, 而RequireJS對模塊的態(tài)度是預(yù)執(zhí)行
不明白？看這篇圖文并茂的文章吧：http://www.douban.com/note/283566440/
RequireJS API:http://www.requirejs.cn/docs/api.html
RequireJS的用法：http://www.ruanyifeng.com/blog/2012/11/require_js.html
為什么要用requireJS
試想一下，如果一個網(wǎng)頁有很多的js文件，那么瀏覽器在下載該頁面的時候會先加載js文件，從而停止了網(wǎng)頁的渲染，如果文件越多，瀏覽器可能失去響應(yīng)。其次，要保證js文件的依賴性，依賴性最大的模塊（文件）要放在最后加載，當(dāng)依賴關(guān)系很復(fù)雜的時候，代碼的編寫和維護都會變得困難。
RequireJS就是為了解決這兩個問題而誕生的：
（1）實現(xiàn)js文件的異步加載，避免網(wǎng)頁失去響應(yīng)；
（2）管理模塊之間的依賴性，便于代碼的編寫和維護。
RequireJS文件下載：http://www.requirejs.cn/docs/download.html
AMD和CMD
CMD（Common Module Definition） 通用模塊定義。該規(guī)范明確了模塊的基本書寫格式和基本交互規(guī)則。該規(guī)范是在國內(nèi)發(fā)展出來的。AMD是依賴關(guān)系前置，CMD是按需加載。
在 CMD 規(guī)范中，一個模塊就是一個文件。代碼的書寫格式如下：
define(factory);
factory 為函數(shù)時，表示是模塊的構(gòu)造方法。執(zhí)行該構(gòu)造方法，可以得到模塊向外提供的接口。factory 方法在執(zhí)行時，默認(rèn)會傳入三個參數(shù)：require、exports 和 module：
define(function(require, exports, module) {
// 模塊代碼
});
require是可以把其他模塊導(dǎo)入進來的一個參數(shù)，而export是可以把模塊內(nèi)的一些屬性和方法導(dǎo)出的。
CMD規(guī)范地址：https://github.com/seajs/seajs/issues/242
AMD 是 RequireJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。
CMD 是 SeaJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。
對于依賴的模塊，AMD 是提前執(zhí)行，CMD 是延遲執(zhí)行。
AMD:提前執(zhí)行（異步加載：依賴先執(zhí)行）+延遲執(zhí)行
CMD:延遲執(zhí)行（運行到需加載，根據(jù)順序執(zhí)行）
CMD 推崇依賴就近，AMD 推崇依賴前置。看如下代碼：
// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此處略去 100 行
var b = require('./b') // 依賴可以就近書寫
b.doSomething()
// ...
})
// AMD 默認(rèn)推薦的是
define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好
a.doSomething()
// 此處略去 100 行
b.doSomething()
...
})
另外一個區(qū)別是：
AMD:API根據(jù)使用范圍有區(qū)別，但使用同一個api接口
CMD:每個API的職責(zé)單一
AMD的優(yōu)點是：異步并行加載，在AMD的規(guī)范下，同時異步加載是不會產(chǎn)生錯誤的。
CMD的機制則不同，這種加載方式會產(chǎn)生錯誤，如果能規(guī)范化模塊內(nèi)容形式，也可以
jquery1.7以上版本會自動模塊化，支持AMD模式：主要是使用define函數(shù)，sea.js雖然是CommonJS規(guī)范，但卻使用了define來定義模塊
所以jQuery已經(jīng)自動模塊化了
seajs.config({
'base':'/',
'alias':{
'jquery':'jquery.js'//定義jQuery文件
}
});
define函數(shù)和AMD的define類似：
define(function(require, exports, module{
//先要載入jQuery的模塊
var $ = require('jquery');
//然后將jQuery對象傳給插件模塊
require('./cookie')($);
//開始使用 $.cookie方法
});
sea.js如何使用？
引入sea.js的庫
如何變成模塊？
define
3.如何調(diào)用模塊？
-exports
-sea.js.use
4.如何依賴模塊？
-require
<script type="text/javascript">
define(function (require,exports,module) {
//exports : 對外的接口
//requires : 依賴的接口
require('./test.js');//如果地址是一個模塊的話，那么require的返回值就是模塊中的exports
})
</script>
sea.js 開發(fā)實例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠標(biāo)拖拽的模塊化開發(fā)實踐</title>
<style type="text/css">
#div1{ width:200px; height:200px; background:black; position:absolute; display:none;}
#div2{ width:30px; height:30px; background:yellow; position:absolute; bottom:0; right:0;}
#div3{ width:100px; height:100px; background:blue; position:absolute; right:0; top:0;}
</style>
<script type="text/javascript" src="./sea.js"></script>
<script type="text/javascript">
//A同事 ：
seajs.use('./main.js');
</script>
</head>
<body>
<input type="button" value="確定" id="input1" />
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>
</body>
</html>
A同事
//A同事寫的main.js:
define(function (require,exports,module) {
var oInput = document.getElementById('input1');
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
require('./drag.js').drag(oDiv3);
oInput.onclick = function () {
oDiv1.style.display = 'block';
require('./scale.js').scale(oDiv1,oDiv2);
require.async('./scale.js', function (ex) {
ex.scale(oDiv1,oDiv2);
})
}
});
B同事
//B同事寫的drag.js:
define(function(require,exports,module){
function drag(obj){
var disX = 0;
var disY = 0;
obj.onmousedown = function(ev){
var ev = ev || window.event;
disX = ev.clientX - obj.offsetLeft;
disY = ev.clientY - obj.offsetTop;
document.onmousemove = function(ev){
var ev = ev || window.event;
var L = require('./range.js').range(ev.clientX - disX , document.documentElement.clientWidth - obj.offsetWidth , 0 );
var T = require('./range.js').range(ev.clientY - disY , document.documentElement.clientHeight - obj.offsetHeight , 0 );
obj.style.left = L + 'px';
obj.style.top = T + 'px';
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
}
exports.drag = drag;//對外提供接口
});
C同事
//C同事寫的scale.js:
define(function(require,exports,module){
function scale(obj1,obj2){
var disX = 0;
var disY = 0;
var disW = 0;
var disH = 0;
obj2.onmousedown = function(ev){
var ev = ev || window.event;
disX = ev.clientX;
disY = ev.clientY;
disW = obj1.offsetWidth;
disH = obj1.offsetHeight;
document.onmousemove = function(ev){
var ev = ev || window.event;
var W = require('./range.js').range(ev.clientX - disX + disW , 500 , 100);
var H = require('./range.js').range(ev.clientY - disY + disH , 500 , 100);
obj1.style.width = W + 'px';
obj1.style.height = H + 'px';
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
}
exports.scale = scale;
});
D同事
// D同事的range.js--限定拖拽范圍
define(function(require,exports,module){
function range(iNum,iMax,iMin){
if( iNum > iMax ){
return iMax;
}
else if( iNum < iMin ){
return iMin;
}
else{
return iNum;
}
}
exports.range = range;
});
requirejs開發(fā)實例
require.config是用來定義別名的，在paths屬性下配置別名。然后通過requirejs(參數(shù)一，參數(shù)二)；參數(shù)一是數(shù)組，傳入我們需要引用的模塊名，第二個參數(shù)是個回調(diào)函數(shù)，回調(diào)函數(shù)傳入一個變量，代替剛才所引入的模塊。
main.js文件
//別名配置
requirejs.config({
paths: {
jquery: 'jquery.min' //可以省略.js
}
});
//引入模塊，用變量$表示jquery模塊
requirejs(['jquery'], function ($) {
$('body').css('background-color','red');
});
引入模塊也可以只寫require()。requirejs通過define()定義模塊，定義的參數(shù)上同。在此模塊內(nèi)的方法和變量外部是無法訪問的，只有通過return返回才行.
define 模塊
define(['jquery'], function ($) {//引入jQuery模塊
return {
add: function(x,y){
return x + y;
}
};
});
將該模塊命名為math.js保存。
main.js引入模塊方法
require(['jquery','math'], function ($,math) {
console.log(math.add(10,100));//110
});
沒有依賴
如果定義的模塊不依賴其他模塊，則可以：
define(function () {
return {
name: "trigkit4",
age: "21"
}
});
AMD推薦的風(fēng)格通過返回一個對象做為模塊對象，CommonJS的風(fēng)格通過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas繪制漸變顏色的矩形，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了JS實現(xiàn)中文漢字按拼音排序的方法,涉及javascript針對中文字符串的轉(zhuǎn)換、遍歷、排序等相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
JavaScript Image對象實現(xiàn)原理實例解析
這篇文章主要介紹了JavaScript Image對象實現(xiàn)原理實例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-08-08
JS彈出對話框返回值代碼，需要的朋友可以參考下。2010-12-12
在js文件中寫el表達式取不到值，百度一下，將經(jīng)驗總結(jié)如下，有類似情況的朋友可以參考下2013-12-12
這篇文章主要介紹了JS運動基礎(chǔ)框架,實例分析了javascript定時器及div樣式的使用技巧,需要的朋友可以參考下2015-03-03
本文主要介紹了JS數(shù)組去重的4種方法。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了自定義javascript驗證框架,結(jié)合實例形式分析了javascript正則驗證相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了基于js實現(xiàn)判斷瀏覽器類型代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
websocket是H5才開始提供的一種在單個TCP連接上進行全雙工通訊的協(xié)議,下面這篇文章主要給大家介紹了關(guān)于JS前端中WebSocket使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03