javascript模塊化開發(fā)小是某個(gè)創(chuàng)業(yè)團(tuán)隊(duì)的前端工程師負(fù)責(zé)編寫項(xiàng)目Javascrip

了解模塊化開于2013-6-12varvar_=$:function(id){ ementById(id); :function(key){... :function(key,value){...隨著業(yè)務(wù)的發(fā)展，小A又編寫了一系列的函數(shù)庫(kù)和UI組件，比方說(shuō)切換組以及ADtabs.jsbase.jsutil.js，他并沒有添<script<script<script<script小的 的優(yōu)化了小 { ementById(id);=function(key){...=function(key,value){... =require('base.js'),util=vardivtabs= 和，那也可以用varbase=require('base.js'),util=require('util.js');vardiv_tabs=base.$('tabs'); varbase=require('base.js'),ui=require('ui.js');vardiv_tabs=base.$('tabs'); 研究JavaScript模塊化開發(fā)【精華匯DavidPadburyDavidPadbury寫的《JavaScript模塊化開發(fā)一瞥》正在考慮將模塊（Modules）Harmony/ECMAScript6的語(yǔ)言級(jí)別功能。這多虧了模塊系統(tǒng)編寫者們的奇思妙aScript應(yīng)用程序的語(yǔ)言。JavaScript不甚了解的開發(fā)者而言，他們最初必須要（patterns它們必將來(lái)自于語(yǔ)言本身實(shí)現(xiàn)之外。——RebeccaMurphyJavaScript不甚了解的開發(fā)者而言，他們最初必須要跑起來(lái)，不過(guò)很快代碼就會(huì)變得一塌糊涂。而問題是，JavaScript沒有為組織代碼提供任何明顯幫助。從字面上看，C#有using，Java（patterns它們必將來(lái)自于語(yǔ)言本身實(shí)現(xiàn)之外?！猂ebeccaMurphy模塊模式（TheModulePatternBenCherry的帖子——JavaScriptModulePattern:In-Depth（深入理解JavaScript模塊模式。1(function(lab49)2functionprivateAdder(n1,n2)returnn1+ 6lab49.add function(n1,n2)returnprivateAdder(n1, 11})(window.lab49=window.lab49||（ealuated的任何內(nèi)容都是隨處可用的。想象一下，要是先在lib1.js中了varname='...'，然后又在lib2.js了varname='...'。那么后一句var就會(huì)替掉前一句的值——這可不太妙。然而，由于JavaScript擁有函數(shù)作用域級(jí)別，上例中所的一切都位于函數(shù)自身作命名空間window.lab49賦給其自身，要么將空對(duì)象{}賦給它。盡管看起來(lái)有點(diǎn)兒怪，不過(guò)讓我們一起來(lái)看下這樣一個(gè)虛構(gòu)系統(tǒng)，系統(tǒng)中的那些js文件一律使用了上例中的函數(shù)包裝器（functionwrapper。（...||...window.lab49目前已是對(duì)私有狀態(tài)（Privatelab49window對(duì)象上，因此它是全局可用的。為了把其中的內(nèi)容公布給模addlab49.add(22)add函數(shù)CommonJS（CommonJSCommonJSJavaScript運(yùn)行庫(kù)（server-sideJavaScriptruntimes）塊系統(tǒng)并非標(biāo)準(zhǔn)，因?yàn)樗皇浅龆↗avaScript標(biāo)準(zhǔn)的同一社團(tuán)，所以它更像是服務(wù)器端JavaScript運(yùn)行庫(kù)編寫者彼此之間的非正式約定。我通常會(huì)支持CommonJS的想法，但要搞清楚的是：它并不是一份崇高而神圣的規(guī)（ES5一樣；它只不過(guò)是一些人在郵件列表中所討論的想法。而且多數(shù)想法都未付諸——RyanDahlnode.js全局變量exports供模塊使用。而全局變量exports只是個(gè)普通的我通常會(huì)支持CommonJS的想法，但要搞清楚的是：它并不是一份崇高而神圣的規(guī)（ES5一樣；它只不過(guò)是一些人在郵件列表中所討論的想法。而且多數(shù)想法都未付諸——RyanDahlnode.js exports.add function(n1,n2)456 10varcalculator=require('./calculator');12calculator.add(2,Browserifyjsjs文件中，并把那些代碼用生成的模塊CommonJSJavaScript運(yùn)行庫(kù)設(shè)計(jì)的，而且由于有幾個(gè)屬性使得它們難以require必須立即返回——要是已經(jīng)擁有所有內(nèi)容時(shí)這會(huì)工作得很好，不過(guò)這導(dǎo)致難以使用加載器（scriptloader）去異步。每個(gè)模塊占一個(gè)文件——CommonJS模塊，必須把它們以某種風(fēng)格組織異步模塊定義（AsynchronousModuleDefini異步模塊定義（AsynchronousModuleDefinition，通常稱為AMD）已被設(shè)計(jì)為適合于瀏覽CommonJS社團(tuán)的提案，不過(guò)自從遷移到上以后，現(xiàn)已加入了配套的測(cè)試套件，以便模塊系統(tǒng)編寫者來(lái)驗(yàn)證其代碼是否符合AMD的API。AMD的是define函數(shù)。調(diào)用define函數(shù)最常見的方式是傳入三個(gè)參數(shù)——模塊名（也廠函數(shù)。（define函數(shù)的其他方式——AMDwiki。//calculator（計(jì)算器）define('calculator',['adder'],function(adder)returnadd:function(n1,n2) 78實(shí)際調(diào)用的是9*而且adder模塊已一參數(shù)['adder']returnadder.add(n1,}define函數(shù)的調(diào)用中，因此這意味著可以欣然將多個(gè)模塊都放在單jsdefine時(shí)，模塊加載器已擁有控制權(quán)，因此為了與原先的CommonJS模塊提案保持兼容已做出了巨大的努力。有些特殊行為是為了能在模塊工廠函數(shù)中使用require及exportsCommonJS模塊可直接拿JScurl.jsDojoAMDJavaScript應(yīng)用程序，情JavaScript（DoesthismeanJavaScriptsucks?）我們已經(jīng)能夠隨著JavaScript應(yīng)用程序的發(fā)展進(jìn)行迭代并改進(jìn)。欲深入了解此請(qǐng)Tagneto的博客。10年前就已將此類功能引入語(yǔ)言。那么他們也不可能想到后來(lái)的那些需JavaScripttext（適合于構(gòu)建現(xiàn)代JavaScript應(yīng)用程序的語(yǔ)言。組織方式，本文試著對(duì)JavaScript模塊化開發(fā)的一些基礎(chǔ)知識(shí)做一些闡釋。對(duì)象字面量（Object 對(duì)象字面量表示，其實(shí)就是用一對(duì)大括號(hào)括起來(lái)的鍵值對(duì)，也就是JavaScript對(duì)象的 }}functionKey:function()variableKey:varmyObject=654321varvarvariableName=21}}function}function876543立即執(zhí)行函數(shù)（IIFEImmedia y-InvokedFunction當(dāng)我們?cè)陬愃朴趘arname1=function(){…}這樣的函數(shù)時(shí)，在后面加一對(duì)括號(hào)()，就可以讓它立即執(zhí)行，但是如果是functionname1(){…}這樣的函數(shù)，則會(huì)有問function321上面代碼在執(zhí)行時(shí)會(huì)拋出錯(cuò)誤，Unexpectedtoken（意外的標(biāo)記），因?yàn)楹竺娴?)會(huì)被解1(function1(function(){/*code*/}223(function3(function(){/*code*/ 1varmyObject=2name:3getName:4return5}678 9myObject.getName();varmyObject=varname=returngetName:return}} myObject.getName();導(dǎo)入全局變varvarmyModule=(function(jQ)21})(jQuery}}function876543模塊導(dǎo)varvarmyModule=(function()1returnmodule.publicMethod=function()}//varmodule={},privateVariable=擴(kuò)展模myModule模塊增加幾個(gè)方法，通過(guò)前面的“立即執(zhí)})(})(myModulereturnmy.xxMethod=function()varmyModule=(function(my)987654321myModulemyModule必須已經(jīng)定義，如果擴(kuò)展的xxMethod方法和myModule本身沒有任何的依賴，那么要求myModule必須已經(jīng)定義就毫無(wú)必要了，怎么解決這個(gè)問題呢，非常簡(jiǎn)單，只需要或一個(gè)//松//松散擴(kuò)my.xxMethod=function()varmyModule=(function(my)43215 566778return8return99})(})(myModule||{} 了varmyModule=…，b.js中varmyModulea.jsb.js時(shí)，后者會(huì)將前者覆蓋，這并不是我們期})(})(window.myModule=window.myModule||{}}my.xxMethod=function()(function(my)7654321JavaScript模塊化開發(fā)的基礎(chǔ)知識(shí)作了介紹，接下來(lái)，會(huì)進(jìn)一步介紹常見的規(guī)范和 modules/JavaScript模塊化開發(fā)（二）CommonJS規(guī)方式來(lái)加載，C#using，JavaScript本身沒有內(nèi)置的模塊系統(tǒng)（ES6中引入了模塊n年后的事情了，JavaScript的模塊化規(guī)范，一般都是致力于提高JavaScript程序的可移植性和可交換性，朝著統(tǒng)一模塊化交互方式的方向而努力。際上就是CommonJS的一個(gè)實(shí)現(xiàn)。CommonJSvarvarmath=132123exports.add=function()4varsum=0,i=0,args=arguments,l=5while(i<l)6sum+=7}8return9通過(guò)CommonJS的規(guī)范和代碼可以看出，require是同步的，模塊系統(tǒng)需要同步模塊node.js，這一般來(lái)說(shuō)沒有問題，CommonJSServerJS，Modules1.0node.js上實(shí)踐的很好，由于知道自了，在這個(gè)中，分出了AMD規(guī)范。由于風(fēng)格和機(jī)制的差異，最終，AMDCommonJS社區(qū)中獨(dú)立了出來(lái)，成為了現(xiàn)在最受 本條目發(fā)布于2013年9月26日。屬于[01]前端開發(fā)分類，被貼了CommonJS、JavaScript。作者是Wayne.J。文章導(dǎo)→1.back通告：JavaScript模塊化開發(fā)（四）——RequireJS|Feeldesign*3+三=您可以使用這些HTML和屬性：<ahref=""title=""><abbr<acronymtitle=""><b><blockquotecite=""><cite><codeclass=""title=""data-url=""><deldatetime=""><em><i><qcite=""><strike><strong><preclass=""title=""data-url=""><spanclass=""title=""JavaScript模塊化開發(fā)（三）AMD本文介紹一下AMD規(guī)范（AMDcpu的AMD可不是一回事）。AMD是“AsynchronousModuleDefinition”的縮寫，意思就是“異步模塊定義”。從名稱上就AMD規(guī)范的API1過(guò)id才能知道從什么位置去加載依賴的模塊）}returnmath.add(x,addTen:function(x)returndefine("adder",["math"],function(math)7654321如果這個(gè)模塊并沒有依賴，那么默認(rèn)的依賴是["require"exportsmodule"]，這時(shí)模塊可returnx+exports.addTen=function(x)define("adder",function(require,exports)543211define(["math"],1define(["math"],function(math)2return2return3addTen3addTen:function(x)4return4returnmath.add(x,5}5}6677 一個(gè)和第二個(gè)參數(shù)，下面代碼展示了這種用法，這也是CommonJS的寫法，算是一種兼12345define(function(require,exports,module)vara= b=7exports.action=function() Dojo還有很多jsAMD規(guī)范，自己作為一個(gè)模塊而存在，比如jQuery，MooTools等，所以AMD規(guī)范基本上已經(jīng)是非常普及了，成為了事實(shí)上的標(biāo)準(zhǔn)。RhinoNode等環(huán)境。RequireJS遵循了AMD規(guī)范。本文主要說(shuō)一說(shuō)RequireJS的使用。獲取和開始使用要充分使用RequireJS，在index.html文件中，應(yīng)該把所有的內(nèi)聯(lián)都移除，只留下一<!DOCTYPE<!DOCTYPE12 2334<title>My4<title>MySample5<!--data-main5<!--data-main屬性告require.jsrequire.js加載之后加js/main.js6677889<h1>My9<h1>MySample在main.js中，可以通過(guò)require()加載依賴 ，這樣不用在html中顯 main.js相當(dāng)于是一個(gè)點(diǎn)12//scripts/helper/util.js加載完畢，會(huì)執(zhí)行這個(gè)回調(diào)函3//如果util.js也了依賴的文件（模塊），那么這個(gè)函數(shù)會(huì)等到那些依賴的文件（模塊456js通過(guò)剛才的介紹，可以看出來(lái)RequireJS采用了不同于傳統(tǒng)<script>的加載方式，傳統(tǒng)的<script>方式一般都會(huì)有下面的代碼：123456789 RequireJSRequireJSbaseUrldata-main了1的路徑，在這句代碼里也就是js文件夾；如果不data-main，則baseUrl默認(rèn)指向這個(gè)html頁(yè)面所在的文件夾。當(dāng)然，也可以通過(guò)配置來(lái)baseUrl，下文會(huì)詳述。注意，data-main中的模塊會(huì)被異步加載，也就意味著如果頁(yè)面后面通過(guò)<script>加載多個(gè)，這些不一定在data-main中的模塊加載之后才加載；或者后面的js代碼如果有對(duì)data-main中的模塊的依賴，則有可能會(huì)出現(xiàn)錯(cuò)誤。RequireJS會(huì)假定所有依賴項(xiàng)默認(rèn)都是，所以書寫依賴時(shí)可以省略“.js”后綴（path），我們也可以在配置中多個(gè)路徑（paths），通過(guò)baseUrl+paths，可以用很少的代碼找到相應(yīng)的js文件，比起<script>要優(yōu)雅簡(jiǎn)潔很多。一般來(lái)說(shuō)，通過(guò)baseUrlpaths就可以找到j(luò)s文件，不過(guò)有時(shí)候，可能會(huì)有例外，一旦RequireJS發(fā)現(xiàn)模塊ID中包含如下的字符，那么它就不按照baseUrlpaths的方式來(lái)尋找這個(gè)模塊的js文件了，而是采用URL的方式：ID“.js”ID以“/”ID“http:”“https:”一般來(lái)說(shuō)，最好使用baseUrl+paths的方式來(lái)模塊ID，這樣做會(huì)有的靈活性。同樣的，我們?cè)诮M織js代碼文件的時(shí)候，盡量避免使用很深的路徑，而最好把js文件都放置在baseUrl下面，最好不要超過(guò)兩層的深度，下面就是一個(gè)很好的例子：index.html1app.js//默認(rèn)從js/lib中加載模baseUrl://如果模塊ID以app開頭，則會(huì)//不過(guò)要注意千萬(wàn)不要加上".12//默認(rèn)js/lib中加載模3baseUrl:45 67paths:8app:9}function($,canvas,sub)//jQuerycanvasapp/sub模塊都加載完畢后，會(huì)執(zhí)行這個(gè)函使用RequireJSjQueryRequireJSjs文件只定義一個(gè)模塊。不過(guò)這樣的話，每加載一個(gè)模塊，就會(huì)產(chǎn)生一個(gè)HTTP請(qǐng)求，RequireJS提供了一個(gè)優(yōu)化工具，在最后生產(chǎn)環(huán)境中，可以打包所有模定義模塊可以使用define()方法，define()有三個(gè)參數(shù)，可以參文中的介紹。sizesize:color:4321define(functiondefine(function()21334return5color:6size:7}81234define(["cart"],function(cart)returncolor:size:addToCart:function() 1define(["cart"],function(cart)2returnfunction(title)returntitle?(window.title=title):}3456的API可以參考說(shuō)明RequireJSRequireJS采用head.appendChild()的方式來(lái)加載所有依賴的，這個(gè)方式的原理很varfilerefiffiletypejsjs文件載432156}7elseiffiletypecss"){//css文件載8varfileref=9}if(typeoffileref!=}RequireJS會(huì)順著依賴鏈（也就是順著模塊的依賴層層進(jìn)入，直到?jīng)]有依賴為止）把加載非規(guī)范的模在加載沒有實(shí)現(xiàn)AMD規(guī)范的模塊（這種模塊比實(shí)現(xiàn)了AMD規(guī)范的模塊）時(shí)123//要使用shim來(lái)配置沒AMD規(guī)范4//shim不能用來(lái)配置已經(jīng)實(shí)AMD規(guī)范的模5shim:6'backbone':7//定義依賴backbone.js載入前載入這些依8deps:['underscore',9//exports:'underscore':exports:}}shim:deps:exports:'jquery.scroll':deps:exports:}}Sea.jsJavaScript模塊加載框架。Sea.js的主要目的是令JavaScript開發(fā)模塊化并可以輕松愉悅進(jìn)行加載，將前端工程師從繁重的JavaScript文件及對(duì)象依賴處理中解放出來(lái)，可以專注于代碼本身的邏輯。Sea.js是國(guó)內(nèi)比較流行的JavaScript模塊加載框架，Sea.jsMIT協(xié)議，無(wú)論個(gè)人還Sea.jsJavaScriptCMD模塊定義規(guī)范，定義規(guī)范。該規(guī)范明確詳細(xì)信息，可以參閱Sea.jsLABjs是由KyleSimpson編寫，用來(lái)管理JS執(zhí)行的一個(gè)開源模塊。下圖是LABjs的分析圖（轉(zhuǎn)自攜程UED）一些輕量級(jí)的可以使用Do，源碼可以在這里找到。 20121026 塊"（module）了。（正在制定中的ECMAScript 不是初級(jí)，但是只要稍稍了解Javascript的基本語(yǔ)法，就能看懂。}}上面的函數(shù)varmodule1=new_count:m1:functionm2:function} y-InvokedFunctionExpression，IIFE），可 varmodule1=var_count=varm1=varm2=m1:m1,m2: (module1._count);上面的代碼為module1模塊添加了一個(gè)新方法m3()，然后返回新的module1模})(jQuery,模塊）當(dāng)作參數(shù)輸入module1。這樣做除了保證模塊的獨(dú)立性，還使得模塊之間 的討論，參見BenCherry的著名文章Javascript模塊化編程（二AMD20121030 的寫法，我有我的寫法，豈不是亂了套！考慮到Javascript模塊現(xiàn)在還沒有AMD，但是CommonJS2009年， 一個(gè)全局性方法require()，用于加載模塊。假定有一個(gè)數(shù)學(xué)模塊math.js，就可varmath=varmath=varmath=第二行math.add(2,3)，在第一行require('math')之后運(yùn)行，因此必須等完成，等待時(shí)間就是硬盤的時(shí)間。但是，對(duì)于瀏覽器，這卻是一個(gè)大問題，因此，瀏覽器端的模塊，不能采用"同步加載"（synchronous），只能采用"異步加載"（asynchronous）。這就是AMD規(guī)范誕生的背景。AMD是"AsynchronousModuleDefinition"的縮寫，意思就是"異步模塊定義"。AMD也采用require()語(yǔ)句加載模塊，但是不同于CommonJS，它要求兩個(gè)參require([module],第一個(gè)參數(shù)[module]，是一個(gè)數(shù)組，里面的成員就是要加載的模塊；第二個(gè)參數(shù)math.add()與 模塊加載不是同步的，瀏覽器不會(huì)發(fā)生假死。所以很顯然AMD比較適合瀏覽器列的第三部分，將通過(guò)介紹require.js，進(jìn)一步AMD的用法，以及如何將rqur.js2012117我采用的是一個(gè)非常流行的庫(kù)require.js一、為什么要用js文件之間存在依賴關(guān)大的模塊一定要放到最后加載，當(dāng)依賴關(guān)系很復(fù)雜的時(shí)候，代碼的編寫和都會(huì)變得。 性，只支持defer，所以把defer也寫上。文件是main.js，也放在js <scriptsrc="js/require.js"data-data-mainjs下面js，所以可以把main.js簡(jiǎn)寫成main。 像C語(yǔ)言的main()函數(shù)，所有代碼都從這兒開始運(yùn)行。下面就來(lái)看，怎么寫main.jsalert("加載成他模塊，這時(shí)就要使用AMD 規(guī)范定義的的require()函數(shù)。require(['moduleA','moduleB','moduleC'],function(moduleA,moduleB,require()函數(shù)接受兩個(gè)參數(shù)。第一個(gè)參數(shù)是一個(gè)數(shù)組，表示所依賴的模塊，上例就是['moduleA','moduleB','moduleC']，即主模塊依賴這三個(gè)模塊；第二個(gè)參數(shù)require()異步加載moduleA，moduleB和moduleC，瀏覽器不會(huì)失去響應(yīng)；它require.js會(huì)先加載jQuery、underscore和backbone，然后再運(yùn)行回調(diào)函數(shù)。上一節(jié)最后的示例中，主模塊的依賴模塊是['jquery','underscore','backbone']。默認(rèn)情況下，require.js假定這三個(gè)模塊與main.js在同一個(gè) 為jquery.js，underscore.js 和backbone.js，然后自動(dòng)加載。使用requir.config()