項(xiàng)目中大都使用模塊化開發(fā)，requireJS作為AMD模塊開發(fā)的典范，所以有必要學(xué)習(xí)下。通過一步步利用requireJS編寫demo，從而學(xué)習(xí)requireJS的一個(gè)整體開發(fā)流程以及自我使用requireJS的一些感受。
AMD：一種基于模塊的異步加載JavaScript代碼的機(jī)制，它推薦開發(fā)人員將JavaScript代碼封裝進(jìn)一個(gè)個(gè)模塊，對全局對象的依賴變成了對其他模塊的依賴，無須再聲明一大堆的全局變量。通過延遲和按需加載來解決各個(gè)模塊的依賴關(guān)系。模塊化的JavaScript代碼好處很明顯，各個(gè)功能組件的松耦合性可以極大的提升代碼的復(fù)用性、可維護(hù)性。這種非阻塞式的并發(fā)式快速加載JavaScript代碼，使Web頁面上其他不依賴 JavaScript代碼的UI元素，如圖片、CSS以及其他DOM節(jié)點(diǎn)得以先加載完畢，Web頁面加載速度更快，用戶也得到更好的體驗(yàn)。
1、 下載requieJS
在用requieJS模塊化開發(fā)之前，我們需要準(zhǔn)備一些東西。那肯定就是下載require.js文件咯，哈哈哈，因?yàn)槭腔谒_發(fā)嘛。
2、 創(chuàng)建一個(gè)HTML文件
創(chuàng)建一個(gè)HTML文件后，導(dǎo)入requireJS肯定是使用<script>標(biāo)簽的，這個(gè)毫無疑問。然后在這個(gè)標(biāo)簽中有個(gè)data-main屬性，它的作用呢是作為一個(gè)出入口，就是說在加載requireJS后，從data-main這個(gè)屬性進(jìn)入。
比如下面這樣：
<!DOCTYPE html> <head> <title>require</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> </head> <body> <!--這是requireJS，data-main是作為入口模塊，在這里就是js/main--> <script data-main="js/main" src="js/require.js"></script> </body></html>
當(dāng)我通過加載js/require.js后，然后去執(zhí)行js/main的js文件。main它也是個(gè)js文件，我們可以將它的.js后綴省略掉，requireJS會將其加上。
3、 data-main
當(dāng)程序執(zhí)行<script data-main='js/main' src='js/require.js'></script>后，通過data-main進(jìn)入main.js，去執(zhí)行main.js。那main.js里是些什么東東呢？
請看代碼：
/* require.config執(zhí)行baseUrl為'js'， baseUrl指的模塊文件的根目錄，可以是絕對路徑或相對路徑*/require.config({ baseUrl: 'js', paths: { jquery: 'jquery-1.8.2.min' }});/* 這里通過require，來引入monkey.js， 然后通過后面的匿名函數(shù)給他們分配參數(shù)，如這里的 monkey-->mk*/require(['monkey'],function(mk) { mk.init(); });從上面代碼中，可以看見main.js中包含require.config和require兩個(gè)模塊。
require.config的作用就是配置requireJS的一些參數(shù)，然后公共引用。
例如，上面的baseUrl，它的作用就是，以它作為基礎(chǔ)路徑，在這個(gè)路徑之下，查找文件。我是將所有.js文件都放在js文件夾下的。所以，在配置這個(gè)屬性后，以后的文件都是在js這個(gè)路徑下查找內(nèi)容了。
如下：
require(['monkey'], function(monkey){ monkey.init();});它在引用monkey時(shí)，就是引用的monkey，而不是js/monkey。
paths的作用呢？就是將一些常用的js文件，換成通用的名字。例如jquery-1.8.2.min.js，我們不可能每次調(diào)用它時(shí)，都寫這一啪啦吧，所以為了方便，就將jquery替代jquery-1.8.2.min.js咯，以后我們就可以直接使用jquery了，快捷方便。
好了，require.config基本混了個(gè)臉熟，一句話，它的作用就是配置requireJS嘛。
那require呢？
require的作用就是執(zhí)行。比如這里我只需要monkey.js去執(zhí)行，所以我就導(dǎo)入了monkey，然后通過mk參數(shù)，獲得monkey執(zhí)行后的返回值。如果有返回值，然后我們就可以對mk做相應(yīng)的處理了。
咦，那monkey里面是個(gè)什么呢？
我們看看：
/* define的參數(shù)為匿名函數(shù)，該匿名函數(shù)返回一個(gè)對象*/define(['jquery'],function($){ var init = function(){ console.log($.browser); }; return { init: init };});define！它的作用是，定義一個(gè)js模塊，供其他模塊或者require使用。它引用其他js的模塊的方法和require差不多，都是將需要的js文件引入，然后參數(shù)一一對應(yīng)。大家需要要注意的是，define里定義的方法或者變量，其他模塊是訪問不到的，所以，你如果想其他模塊也能訪問，就將相應(yīng)的方法拋出去(return)對象或者函數(shù)都可以。在這里，我return的是一個(gè)對象，提供init供其他模塊調(diào)用。
新聞熱點(diǎn)
疑難解答
