JavaScript模塊化編程規(guī)范

當(dāng)一個網(wǎng)站復(fù)雜度較高需要多人協(xié)作開發(fā)時履怯,傳統(tǒng)的非模塊化編程模式容易導(dǎo)致代碼沖突依賴等問題步咪,而模塊化編程的誕生正是為了解決此類問題。然而殖演,在ES6之前,原生JavaScript是不支持模塊化的年鸳,因此就出現(xiàn)了一系列的JavaScript庫來實現(xiàn)此功能趴久,這些庫主要遵循以下三種規(guī)范:

① CommonJS
② AMD
③ CMD

接下來我就粗略地講講這三種規(guī)范。

一阻星、CommonJS規(guī)范

關(guān)鍵詞: module朋鞍,exports已添,require

CommonJS規(guī)范下的模塊調(diào)用是同步的妥箕,也就是說必須等模塊加載完成之后,接下來的代碼才能繼續(xù)運行更舞。因此畦幢,該規(guī)范主要適用于服務(wù)端,因為服務(wù)端可以直接從硬盤中調(diào)用所需要的模塊缆蝉,而這個過程速度是非秤畲校快的。相比之下刊头,通過網(wǎng)絡(luò)調(diào)用所需模塊的瀏覽器客戶端則不適合使用該規(guī)范黍瞧。

目前使用該規(guī)范的典型代表有:Node.js、微信小程序原杂。

下面以Node.js中的兩個小例子印颤,簡單講講CommonJS規(guī)范下的模塊化編程。

1. 無返回值的模塊調(diào)用

//module.js
console.log('這是一個模塊穿肄。');
//main.js
require('./module');    // 或?qū)懗?require('./module.js')年局,但千萬注意不能寫成 require('module')

以上module.js和main.js兩個文件處于同一目錄下际看。

2. 有返回值的模塊調(diào)用

//module.js
function foo(){
    console.log('這是一個模塊。');
}
module.exports = {        // 此處提供模塊對外接口
    foo: foo    // 此處對外接口中的方法名不一定要與以上定義的方法名一致矢否,比如可以寫成 func: foo仲闽,那么此時調(diào)用時就應(yīng)該寫成 module.func()
};
//main.js
var module = require('./module.js');    // 加載module模塊
module.foo();   // 此處調(diào)用module模塊下的foo方法,該方法名須與模塊中對外接口方法名一致

二僵朗、AMD規(guī)范

關(guān)鍵詞: define赖欣,require

與CommonJS不同,AMD規(guī)范下的模塊調(diào)用是異步的验庙,主要適用于瀏覽器客戶端畏鼓。

目前使用該規(guī)范的典型代表有:require.js、curl.js壶谒。

下面以require.js為例云矫,簡單講講AMD規(guī)范下的模塊化編程。

<!--HTML-->
<script src="scripts/require.js"></script>
<script src="scripts/main.js" data-main="scripts/main"></script>

1. 無返回值的模塊調(diào)用

//module.js
console.log('這是一個模塊汗菜。');
//main.js
require(['scripts/module']);   // 請求的模塊路徑用數(shù)組表示

2. 有返回值的模塊調(diào)用

//module.js
function foo(){
    console.log('這是一個模塊让禀。');
}
define(function(){
    return {
        foo: foo
    }
});
//main.js
require(['scripts/module'],function(module){
    module.foo();
}); 

三、CMD規(guī)范

關(guān)鍵詞: use陨界,define巡揍,require,exports菌瘪,module

CMD規(guī)范結(jié)合了以上兩種規(guī)范的特點腮敌,既可以同步調(diào)用,也可以異步調(diào)用俏扩,在語法上也非常相似糜工。

目前使用該規(guī)范的典型代表有:sea.js。

下面就以sea.js為例录淡,簡單講講CMD規(guī)范下的模塊化編程捌木。

<!--HTML-->
<script src="scripts/sea.js"></script>
<!--引入主模塊,模塊根目錄為sea.js所在目錄嫉戚,有點類似于C語言中的main函數(shù)-->
<script type="text/javascript">
    seajs.use('main');
</script>

1. 無返回值的模塊調(diào)用

//module.js
console.log('這是一個模塊刨裆。');
//main.js
define(function(require,exports,module){
    require('module');
});

這里需要重點說明一下,define()中回調(diào)函數(shù)中所傳參數(shù)名稱不允許修改彬檀。

2. 有返回值的模塊調(diào)用

定義模塊

//module.js
function foo(){
    console.log('這是一個模塊帆啃。');
}
define(function(require,exports,module){
    //也可以直接通過return方式暴露模塊接口,這樣就與AMD規(guī)范相同
    module.exports = {
        foo: foo
    }
});

調(diào)用模塊存在同步和異步兩種方式:

① 同步調(diào)用

//main.js
define(function(require,exports,module){
    var module = require('module');
    module.foo();
});

② 異步調(diào)用

//main.js
define(function(require,exports,module){
    require.async('module',function(module){
        module.foo();
    }); 
});

本次有關(guān)JavaScript模塊化編程規(guī)范的分享就到這里窍帝,若有不到之處努潘,歡迎指正,謝謝!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末慈俯,一起剝皮案震驚了整個濱河市渤刃,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌贴膘,老刑警劉巖卖子,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異刑峡,居然都是意外死亡洋闽,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門突梦,熙熙樓的掌柜王于貴愁眉苦臉地迎上來诫舅,“玉大人,你說我怎么就攤上這事宫患】福” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵娃闲,是天一觀的道長虚汛。 經(jīng)常有香客問我,道長皇帮,這世上最難降的妖魔是什么卷哩? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮属拾,結(jié)果婚禮上将谊,老公的妹妹穿的比我還像新娘。我一直安慰自己渐白,他們只是感情好尊浓,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著礼预,像睡著了一般眠砾。 火紅的嫁衣襯著肌膚如雪虏劲。 梳的紋絲不亂的頭發(fā)上托酸,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天,我揣著相機與錄音柒巫,去河邊找鬼励堡。 笑死,一個胖子當(dāng)著我的面吹牛堡掏,可吹牛的內(nèi)容都是我干的应结。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼鹅龄!你這毒婦竟也來了揩慕?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤扮休,失蹤者是張志新(化名)和其女友劉穎迎卤,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體玷坠,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡蜗搔,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了八堡。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片樟凄。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖兄渺,靈堂內(nèi)的尸體忽然破棺而出缝龄,到底是詐尸還是另有隱情,我是刑警寧澤挂谍,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布二拐,位于F島的核電站,受9級特大地震影響凳兵,放射性物質(zhì)發(fā)生泄漏百新。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一庐扫、第九天 我趴在偏房一處隱蔽的房頂上張望饭望。 院中可真熱鬧,春花似錦形庭、人聲如沸铅辞。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽斟珊。三九已至,卻和暖如春富纸,著一層夾襖步出監(jiān)牢的瞬間囤踩,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工晓褪, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留堵漱,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓涣仿,卻偏偏與公主長得像勤庐,于是被迫代替她去往敵國和親示惊。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容