requireJS使用指南

更新時間：2016年04月27日 09:42:00 投稿：hebedich

如今最常用的JavaScript庫之一是RequireJS。最近我參與的每個項目，都用到了RequireJS，或者是我向它們推薦了增加RequireJS。在這篇文章中，我將描述RequireJS是什么，以及它的一些基礎場景。 

項目中大都使用模塊化開發(fā)，requireJS作為AMD模塊開發(fā)的典范，所以有必要學習下。通過一步步利用requireJS編寫demo，從而學習requireJS的一個整體開發(fā)流程以及自我使用requireJS的一些感受。

AMD：一種基于模塊的異步加載JavaScript代碼的機制，它推薦開發(fā)人員將JavaScript代碼封裝進一個個模塊，對全局對象的依賴變成了對其他模塊的依賴，無須再聲明一大堆的全局變量。通過延遲和按需加載來解決各個模塊的依賴關系。模塊化的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，它的作用就是，以它作為基礎路徑，在這個路徑之下，查找文件。我是將所有.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的作用就是執(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供其他模塊調用。

您可能感興趣的文章: