項目中大都使用模塊化開發，requireJS做爲AMD模塊開發的典範，因此有必要學習下。經過一步步利用requireJS編寫demo，從而學習requireJS的一個總體開發流程以及自我使用requireJS的一些感覺。jquery
AMD：一種基於模塊的異步加載JavaScript代碼的機制，它推薦開發人員將JavaScript代碼封裝進一個個模塊，對全局對象的依賴變成了對其餘模塊的依賴，無須再聲明一大堆的全局變量。經過延遲和按需加載來解決各個模塊的依賴關係。模塊化的JavaScript代碼好處很明顯，各個功能組件的鬆耦合性能夠極大的提高代碼的複用性、可維護性。這種非阻塞式的併發式快速加載JavaScript代碼，使Web頁面上其餘不依賴 JavaScript代碼的UI元素，如圖片、CSS以及其餘DOM節點得以先加載完畢，Web頁面加載速度更快，用戶也獲得更好的體驗。git
一、 下載requieJSgithub
在用requieJS模塊化開發以前，咱們須要準備一些東西。那確定就是下載require.js文件咯，哈哈哈，由於是基於它開發嘛。併發
二、 建立一個HTML文件異步
建立一個HTML文件後，導入requireJS確定是使用<script>標籤的，這個毫無疑問。而後在這個標籤中有個data-main屬性，它的做用呢是做爲一個出入口，就是說在加載requireJS後，從data-main這個屬性進入。模塊化
好比下面這樣：函數
<!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>
當我經過加載js/require.js後，而後去執行js/main的js文件。main它也是個js文件，咱們能夠將它的.js後綴省略掉，requireJS會將其加上。requirejs
三、 data-mainpost
當程序執行<script data-main=’js/main’ src=’js/require.js’></script>後，經過data-main進入main.js，去執行main.js。那main.js裏是些什麼東東呢？
請看代碼：
/*
require.config執行baseUrl爲'js'，
baseUrl指的模塊文件的根目錄，能夠是絕對路徑或相對路徑
*/
require.config({
baseUrl: 'js',
paths: {
jquery: 'jquery-1.8.2.min'
}
});
/*
這裏經過require，來引入monkey.js，
而後經過後面的匿名函數給他們分配參數，如這裏的
monkey-->mk
*/
require(['monkey'],function(mk) {
mk.init();
});
從上面代碼中，能夠看見main.js中包含require.config和require兩個模塊。
require.config的做用就是配置requireJS的一些參數，而後公共引用。
例如，上面的baseUrl，它的做用就是，以它做爲基礎路徑，在這個路徑之下，查找文件。我是將全部.js文件都放在js文件夾下的。因此，在配置這個屬性後，之後的文件都是在js這個路徑下查找內容了。
以下：
require(['monkey'], function(monkey){
monkey.init();
});
它在引用monkey時，就是引用的monkey，而不是js/monkey。
paths的做用呢？就是將一些經常使用的js文件，換成通用的名字。例如jquery-1.8.2.min.js，咱們不可能每次調用它時，都寫這一啪啦吧，因此爲了方便，就將jquery替代jquery-1.8.2.min.js咯，之後咱們就能夠直接使用jquery了，快捷方便。
好了，require.config基本混了個臉熟，一句話，它的做用就是配置requireJS嘛。
那require呢？
require的做用就是執行。好比這裏我只須要monkey.js去執行，因此我就導入了monkey，而後經過mk參數，得到monkey執行後的返回值。若是有返回值，而後咱們就能夠對mk作相應的處理了。
咦，那monkey裏面是個什麼呢？
咱們看看：
/*
define的參數爲匿名函數，該匿名函數返回一個對象
*/
define(['jquery'],function($){
var init = function(){
console.log($.browser);
};
return {
init: init
};
});
define！它的做用是，定義一個js模塊，供其餘模塊或者require使用。它引用其餘js的模塊的方法和require差很少，都是將須要的js文件引入，而後參數一一對應。你們須要要注意的是，define裏定義的方法或者變量，其餘模塊是訪問不到的，因此，你若是想其餘模塊也能訪問，就將相應的方法拋出去(return)對象或者函數均可以。在這裏，我return的是一個對象，提供init供其餘模塊調用。
好了，詳細代碼見here