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