項(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è)模塊，對(duì)全局對(duì)象的依賴變成了對(duì)其他模塊的依賴，無(wú)須再聲明一大堆的全局變量。通過延遲和按需加載來(lái)解決各個(gè)模塊的依賴關(guān)系。模塊化的JavaScript代碼好處很明顯，各個(gè)功能組件的松耦合性可以極大的提升代碼的復(fù)用性、可維護(hù)性。這種非阻塞式的并發(fā)式快速加載JavaScript代碼，使Web頁(yè)面上其他不依賴 JavaScript代碼的UI元素，如圖片、CSS以及其他DOM節(jié)點(diǎn)得以先加載完畢，Web頁(yè)面加載速度更快，用戶也得到更好的體驗(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è)毫無(wú)疑問。然后在這個(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會(huì)將其加上。
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里是些什么東東呢？
請(qǐng)看代碼：
/*
require.config執(zhí)行baseUrl為'js'，
baseUrl指的模塊文件的根目錄，可以是絕對(duì)路徑或相對(duì)路徑
*/
require.config({
baseUrl: 'js',
paths: {
jquery: 'jquery-1.8.2.min'
}
});
/*
這里通過require，來(lái)引入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í)行后的返回值。如果有返回值，然后我們就可以對(duì)mk做相應(yīng)的處理了。
咦，那monkey里面是個(gè)什么呢？
我們看看：
/*
define的參數(shù)為匿名函數(shù)，該匿名函數(shù)返回一個(gè)對(duì)象
*/
define(['jquery'],function($){
var init = function(){
console.log($.browser);
};
return {
init: init
};
});
define！它的作用是，定義一個(gè)js模塊，供其他模塊或者require使用。它引用其他js的模塊的方法和require差不多，都是將需要的js文件引入，然后參數(shù)一一對(duì)應(yīng)。大家需要要注意的是，define里定義的方法或者變量，其他模塊是訪問不到的，所以，你如果想其他模塊也能訪問，就將相應(yīng)的方法拋出去(return)對(duì)象或者函數(shù)都可以。在這里，我return的是一個(gè)對(duì)象，提供init供其他模塊調(diào)用。
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試