在學(xué)習(xí)javascript時(shí),我們經(jīng)常會(huì)看到一些縮寫(xiě),比如DOM、CSS、AJAX等等,今天我們要討論的是其中之一——ADM。那么ADM是什么意思?
ADM全稱為Asynchronous Module Definition,它是JavaScript中用于管理模塊依賴關(guān)系的解決方案之一。所謂模塊,就是把一個(gè)大的程序拆分成若干個(gè)小的可復(fù)用的部分,不同的模塊相互交互組合,形成完整的程序。
ADM的出現(xiàn)是為了解決JavaScript應(yīng)用中模塊依賴的問(wèn)題,在傳統(tǒng)的JavaScript開(kāi)發(fā)中,我們通常會(huì)使用script標(biāo)簽引入各種JS文件。如果這些JS文件中存在依賴關(guān)系,我們就必須手動(dòng)管理這些依賴。比如,如果我們需要一個(gè)名為A的模塊并且它依賴于一個(gè)名為B的模塊,我們就要在HTML頁(yè)面中按正確的順序引入這兩個(gè)模塊的JS文件。這樣做不僅繁瑣,而且容易出錯(cuò),特別是在大型項(xiàng)目中更為明顯。
ADM解決了這個(gè)問(wèn)題,它允許我們?cè)谌魏蔚胤蕉x和使用模塊,無(wú)需手動(dòng)解決它們之間的依賴關(guān)系。在ADM中定義模塊的方式一般是通過(guò)定義一個(gè)函數(shù),這個(gè)函數(shù)返回一個(gè)對(duì)象。這個(gè)對(duì)象就是模塊的API接口,其他模塊可以通過(guò)該接口調(diào)用該模塊提供的功能。
define(function(){ //定義模塊實(shí)現(xiàn) return { method1: function(){ //方法實(shí)現(xiàn) }, method2: function(){ //方法實(shí)現(xiàn) } }; });
該代碼片段是一個(gè)簡(jiǎn)單的ADM模塊定義。define是ADM的核心關(guān)鍵字,其功能是定義一個(gè)AMD模塊,其中的參數(shù)是該模塊的依賴,如果沒(méi)有依賴可以省略。如果你需要使用該模塊的方法,只需要通過(guò)require進(jìn)行引入即可。
require(['myModule'], function(myModule){ //使用模塊 myModule.method1(); })
該代碼片段演示了如何使用require來(lái)引入一個(gè)模塊并使用該模塊提供的方法。這里的myModule就是前面定義的那個(gè)模塊。
ADM是非常流行的模塊定義方案,如果你使用的是jQuery、Backbone.js或Require.js等框架,那么ADM會(huì)是你最常使用的模塊規(guī)范。當(dāng)然,現(xiàn)在也有ES6中的模塊規(guī)范,可以通過(guò)import和export進(jìn)行相關(guān)操作。無(wú)論你使用那種規(guī)范,只要能合理地組織你的代碼,都會(huì)使你的代碼變得更可維護(hù),更易擴(kuò)展。