js模塊化開(kāi)發(fā)的價(jià)值
通過(guò) exports暴露接口园爷。這意味著不需要命名空間了，更不需要全局變量。這是一種徹底的命名沖突解決方案怕敬。
通過(guò) require引入依賴咖为。這可以讓依賴內(nèi)置秕狰，開(kāi)發(fā)者只需關(guān)心當(dāng)前模塊的依賴，其他事情 Sea.js 都會(huì)自動(dòng)處理好躁染。對(duì)模塊開(kāi)發(fā)者來(lái)說(shuō)鸣哀，這是一種很好的 關(guān)注度分離，能讓程序員更多地享受編碼的樂(lè)趣吞彤。
除了解決命名沖突和依賴管理我衬，使用 Sea.js 進(jìn)行模塊化開(kāi)發(fā)還可以帶來(lái)很多好處：
模塊的版本管理。通過(guò)別名等配置饰恕，配合構(gòu)建工具挠羔，可以比較輕松地實(shí)現(xiàn)模塊的版本管理。
提高可維護(hù)性埋嵌。模塊化可以讓每個(gè)文件的職責(zé)單一破加，非常有利于代碼的維護(hù)。Sea.js 還提供了 nocache莉恼、debug 等插件拌喉，擁有在線調(diào)試等功能速那，能比較明顯地提升效率。
前端性能優(yōu)化尿背。Sea.js 通過(guò)異步加載模塊端仰，這對(duì)頁(yè)面性能非常有益。Sea.js 還提供了 combo田藐、flush 等插件荔烧，配合服務(wù)端，可以很好地對(duì)頁(yè)面性能進(jìn)行調(diào)優(yōu)汽久。
跨環(huán)境共享模塊鹤竭。CMD 模塊定義規(guī)范與 Node.js 的模塊規(guī)范非常相近。通過(guò) Sea.js 的 Node.js 版本景醇，可以很方便實(shí)現(xiàn)模塊的跨服務(wù)器和瀏覽器共享臀稚。
模塊化開(kāi)發(fā)并不是新鮮事物，但在 Web 領(lǐng)域三痰，前端開(kāi)發(fā)是新生崗位吧寺，一直處于比較原始的刀耕火種時(shí)代。直到最近兩三年散劫，隨著 Dojo稚机、YUI3、Node.js 等社區(qū)的推廣和流行获搏，前端的模塊化開(kāi)發(fā)理念才逐步深入人心赖条。
前端的模塊化構(gòu)建可分為兩大類。一類是以 Dojo常熙、YUI3纬乍、國(guó)內(nèi)的 KISSY 等類庫(kù)為代表的大教堂模式。在大教堂模式下症概，所有組件都是顆晾俣睿化、模塊化的彼城，各組件之間層層分級(jí)诅蝶、環(huán)環(huán)相扣。另一類是以 jQuery募壕、RequireJS调炬、國(guó)內(nèi)的 Sea.js、OzJS 等類庫(kù)為基礎(chǔ)的集市模式舱馅。在集市模式下缰泡，所有組件彼此獨(dú)立、職責(zé)單一，各組件通過(guò)組合松耦合在一起棘钞，協(xié)同完成開(kāi)發(fā)缠借。
這兩類模塊化構(gòu)建方式各有應(yīng)用場(chǎng)景。從長(zhǎng)遠(yuǎn)來(lái)看宜猜，小而美更具備寬容性和競(jìng)爭(zhēng)力泼返，更能形成有活力的生態(tài)圈。
總之姨拥，模塊化能給前端開(kāi)發(fā)帶來(lái)很多好處绅喉。如果你還沒(méi)有嘗試，不妨從試用 Sea.js 開(kāi)始叫乌。
requireJS實(shí)現(xiàn)原理
requireJS實(shí)現(xiàn)原理研究1
流程
- 我們?cè)谑褂胷equireJS時(shí)柴罐，都會(huì)把所有的js交給requireJS來(lái)管理，也就是我們的頁(yè)面上只引入一個(gè)require.js憨奸，把data-main指向我們的main.js革屠。
- 通過(guò)我們?cè)趍ain.js里面定義的require方法或者define方法，requireJS會(huì)把這些依賴和回調(diào)方法都用一個(gè)數(shù)據(jù)結(jié)構(gòu)保存起來(lái)膀藐。
- 當(dāng)頁(yè)面加載時(shí)屠阻，requireJS會(huì)根據(jù)這些依賴預(yù)先把需要的js通過(guò)document.createElement的方法引入到dom中，這樣额各，被引入dom中的script便會(huì)運(yùn)行。
- 由于我們依賴的js也是要按照requireJS的規(guī)范來(lái)寫(xiě)的吧恃，所以他們也會(huì)有define或者require方法虾啦，同樣類似第二步這樣循環(huán)向上查找依賴，同樣會(huì)把他們村起來(lái)痕寓。
- 當(dāng)我們的js里需要用到依賴所返回的結(jié)果時(shí)(通常是一個(gè)key value類型的object),requireJS便會(huì)把之前那個(gè)保存回調(diào)方法的數(shù)據(jù)結(jié)構(gòu)里面的方法拿出來(lái)并且運(yùn)行傲醉，然后把結(jié)果給需要依賴的方法。
以上就是一個(gè)簡(jiǎn)單的流程呻率。
?? SeaJS與RequireJS最大的區(qū)別
SeaJS對(duì)模塊的態(tài)度是懶執(zhí)行, 而RequireJS對(duì)模塊的態(tài)度是預(yù)執(zhí)行
如下模塊通過(guò)SeaJS/RequireJS來(lái)加載, 執(zhí)行結(jié)果會(huì)是怎樣?
define(function(require, exports, module) {
console.log('require module: main');
var mod1 = require('./mod1');
mod1.hello();
var mod2 = require('./mod2');
mod2.hello();
return {
hello: function() {
console.log('hello main');
}
};
});
先試試SeaJS的執(zhí)行結(jié)果
require module: main require module: mod1 hello mod1 require module: mod2 hello mod2 hello main
再來(lái)是RequireJS的執(zhí)行結(jié)果
require module: mod1 require module: mod2 require module: main hello mod1 hello mod2 hello main
RequireJS你坑的我一滾啊, 這也就是為什么我不喜歡RequireJS的原因, 坑隱藏得太深了.終于明白玉伯說(shuō)的那句: "RequireJS 是沒(méi)有明顯的 bug硬毕，SeaJS 是明顯沒(méi)有 bug"是什么意思了因此我們得出結(jié)論(分別使用SeaJS 2.0.0和RequireJS 2.1.6進(jìn)行測(cè)試)-------------------------SeaJS只會(huì)在真正需要使用(依賴)模塊時(shí)才執(zhí)行該模塊SeaJS是異步加載模塊的沒(méi)錯(cuò), 但執(zhí)行模塊的順序也是嚴(yán)格按照模塊在代碼中出現(xiàn)(require)的順序, 這樣才更符合邏輯吧! 你說(shuō)呢, RequireJS?
而RequireJS會(huì)先盡早地執(zhí)行(依賴)模塊, 相當(dāng)于所有的require都被提前了, 而且模塊執(zhí)行的順序也不一定100%就是先mod1再mod2因此你看到執(zhí)行順序和你預(yù)想的完全不一樣! 顫抖吧~ RequireJS!
注意我這里說(shuō)的是執(zhí)行(真正運(yùn)行define中的代碼)模塊, 而非加載(load文件)模塊.模塊的加載都是并行的, 沒(méi)有區(qū)別, 區(qū)別在于執(zhí)行模塊的時(shí)機(jī), 或者說(shuō)是解析.
AMD 的 CommonJS wrapping
個(gè)人覺(jué)得，AMD 的這個(gè)特性有好有壞：
首先礼仗，盡早執(zhí)行依賴可以盡早發(fā)現(xiàn)錯(cuò)誤吐咳。上面的代碼中，假如 a 模塊中拋異常元践，那么 main.js 在調(diào)用 factory 方法之前一定會(huì)收到錯(cuò)誤韭脊，factory 不會(huì)執(zhí)行；如果按需執(zhí)行依賴单旁，結(jié)果是：1）沒(méi)有進(jìn)入使用 a 模塊的分支時(shí)沪羔，不會(huì)發(fā)生錯(cuò)誤；2）出錯(cuò)時(shí)象浑，main.js 的 factory 方法很可能執(zhí)行了一半蔫饰。
另外琅豆，盡早執(zhí)行依賴通常可以帶來(lái)更好的用戶體驗(yàn)篓吁，也容易產(chǎn)生浪費(fèi)趋距。例如模塊 a 依賴了另外一個(gè)需要異步加載數(shù)據(jù)的模塊 b，盡早執(zhí)行 b 可以讓等待時(shí)間更短越除，同時(shí)如果 b 最后沒(méi)被用到节腐，帶寬和內(nèi)存開(kāi)銷(xiāo)就浪費(fèi)了；這種場(chǎng)景下摘盆，按需執(zhí)行依賴可以避免浪費(fèi)翼雀，但是帶來(lái)更長(zhǎng)的等待時(shí)間。
我個(gè)人更傾向于 AMD 這種做法孩擂。舉一個(gè)不太恰當(dāng)?shù)睦樱篊hrome 和 Firefox 為了更好的體驗(yàn)狼渊，對(duì)于某些類型的文件，點(diǎn)擊下載地址后會(huì)詢問(wèn)是否保存类垦，這時(shí)候?qū)嶋H上已經(jīng)開(kāi)始了下載狈邑。有時(shí)候等了很久才點(diǎn)確認(rèn)，會(huì)開(kāi)心地發(fā)現(xiàn)文件已經(jīng)下好蚤认；如果點(diǎn)取消米苹，瀏覽器會(huì)取消下載，已下載的部分就浪費(fèi)了砰琢。
shim
這是因?yàn)?main.js 中 mod1 和 mod2 兩個(gè)模塊并行加載蘸嘶，且加載完就執(zhí)行，所以前兩行輸出順序取決于哪個(gè) js 先加載完陪汽。如果一定要讓 mod2 在 mod1 之后執(zhí)行训唱，需要在 define 模塊時(shí)申明依賴，或者通過(guò) require.config 配置依賴：
JSrequire.config({ shim: { 'mod2': { deps : ['mod1'] } }});
