前端模塊化開發(fā)

1、前端模塊化開發(fā)By: 陳益國命名空間的困惑過長的命名空間對于編碼和記憶都是一個(gè)負(fù)擔(dān)依賴文件的困惑組件的使用者需要關(guān)注該組件的每一個(gè)依賴dialog需要依賴drag：使用時(shí)可能就漏掉了drag：依賴文件的困惑文件顆粒度小 但依賴太多5173首頁開發(fā)環(huán)境的一堆引用：單個(gè)大文件的困惑依賴沒有了 但單個(gè)文件的體積卻越來越臃腫圖搜開發(fā)初期沒有自動化合并工具，只能人肉合并:傳統(tǒng)開發(fā)模式的主要問題 命名的沖突 代碼量巨大的單文件的可維護(hù)性 小顆粒度文件的依賴模塊化就是為了解決這些問題模塊化并不是新鮮玩意Java、python、c#、php等都有 include、import連css都有 importJava

2、Script在ES6也會增加 import 的功能JavaScript中目前的模塊化方案 Common Module Definition （CMD） - SeaJS Asynchronous Module Definition ( AMD ) - RequireJS 其他非標(biāo)準(zhǔn)的實(shí)現(xiàn) - YUI3 - Dojo - KissyCMD 的一個(gè)栗子 CMD 規(guī)范的定義define( factory ) factory : 模塊體function( require, exports, module ) / 模塊實(shí)現(xiàn)的代碼 require : 用于加載依賴模塊 exports : 用于向外部提供接口

3、 AMD 的一個(gè)栗子AMD 規(guī)范的定義define( id?, deps?, factory ) id : 模塊名(可省) deps : 依賴模塊列表(可省) factory : 模塊體CMD vs AMDCMDAMD嚴(yán)謹(jǐn)require, exports, moduls 都是偽關(guān)鍵詞寬松依賴和模塊代碼混雜在一起依賴和模塊代碼是分離的一個(gè)模塊 一個(gè)文件One Moudle One file匿名模塊hello.js模塊名隨著文件名的變化可以隨時(shí)變換具名模塊183.js模塊名固定,文件名不固定,需要配置別名依賴處理hello.jsmain.jsmain.js依賴了hello.jsseed.js 一個(gè)簡單純粹的AMD模塊加載器https:/ 與 jQuery 的結(jié)合seed + jQuery = seed-jquery.js 節(jié)省請求 可靠性 無需關(guān)注基礎(chǔ)庫的依賴性seed 與 jQuery 的結(jié)合lightbox_render.jslightbox.jslightbox_render.jsendlayer.jslightbox_dd.jslig