專案中大都使用模組化開發,requireJS作為AMD模組開發的典範,所以有必要學習下。透過一步步利用requireJS編寫demo,從而學習requireJS的一個整體開發流程以及自我使用requireJS的一些感受。
AMD:一種基於模組的非同步載入JavaScript程式碼的機制,它推薦開發人員將JavaScript程式碼封裝進一個個模組,對全域物件的依賴變成了對其他模組的依賴,無須再聲明一大堆的全域變數。透過延遲和按需載入來解決各個模組的依賴關係。模組化的JavaScript程式碼好處很明顯,各個功能組件的鬆散耦合性可以極大的提升程式碼的復用性、可維護性。這種非阻塞式的並發式快速載入JavaScript程式碼,讓Web頁面上其他不依賴JavaScript程式碼的UI元素,如圖片、CSS以及其他DOM節點得以先載入完畢,Web頁面載入速度更快,使用者也得到更好的體驗。
1、 下載requieJS
在用requieJS模組化開發之前,我們需要準備一些東西。那一定就是下載require.js檔咯,哈哈哈,因為是基於它開發嘛。
2、 建立一個HTML檔
建立一個HTML檔案後,導入requireJS肯定是使用<script>標籤的,這毫無疑問。然後在這個標籤中有data-main屬性,它的作用呢是作為一個出入口,就是說在載入requireJS後,從data-main這個屬性進入。 </script>
比如下面這樣:
<!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會加上。
3、 data-main
當程式執行後,透過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供其他模組呼叫。