快捷導(dǎo)航

requireJS使用指南

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

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

項(xiàng)目中大都使用模塊化開(kāi)發(fā)，requireJS作為AMD模塊開(kāi)發(fā)的典范，所以有必要學(xué)習(xí)下。通過(guò)一步步利用requireJS編寫(xiě)demo，從而學(xué)習(xí)requireJS的一個(gè)整體開(kāi)發(fā)流程以及自我使用requireJS的一些感受。

AMD：一種基于模塊的異步加載JavaScript代碼的機(jī)制，它推薦開(kāi)發(fā)人員將JavaScript代碼封裝進(jìn)一個(gè)個(gè)模塊，對(duì)全局對(duì)象的依賴(lài)變成了對(duì)其他模塊的依賴(lài)，無(wú)須再聲明一大堆的全局變量。通過(guò)延遲和按需加載來(lái)解決各個(gè)模塊的依賴(lài)關(guān)系。模塊化的JavaScript代碼好處很明顯，各個(gè)功能組件的松耦合性可以極大的提升代碼的復(fù)用性、可維護(hù)性。這種非阻塞式的并發(fā)式快速加載JavaScript代碼，使Web頁(yè)面上其他不依賴(lài) JavaScript代碼的UI元素，如圖片、CSS以及其他DOM節(jié)點(diǎn)得以先加載完畢，Web頁(yè)面加載速度更快，用戶(hù)也得到更好的體驗(yàn)。

1、下載requieJS

在用requieJS模塊化開(kāi)發(fā)之前，我們需要準(zhǔn)備一些東西。那肯定就是下載require.js文件咯，哈哈哈，因?yàn)槭腔谒_(kāi)發(fā)嘛。

2、創(chuàng)建一個(gè)HTML文件

創(chuàng)建一個(gè)HTML文件后，導(dǎo)入requireJS肯定是使用<script>標(biāo)簽的，這個(gè)毫無(wú)疑問(wèn)。然后在這個(gè)標(biāo)簽中有個(gè)data-main屬性，它的作用呢是作為一個(gè)出入口，就是說(shuō)在加載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)我通過(guò)加載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>后，通過(guò)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'
  }
});
/*
  這里通過(guò)require，來(lái)引入monkey.js，
  然后通過(guò)后面的匿名函數(shù)給他們分配參數(shù)，如這里的
  monkey-->mk
*/
require(['monkey'],function(mk) {
  mk.init();  
});

從上面代碼中，可以看見(jiàn)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í)，都寫(xiě)這一啪啦吧，所以為了方便，就將jquery替代jquery-1.8.2.min.js咯，以后我們就可以直接使用jquery了，快捷方便。

好了，require.config基本混了個(gè)臉熟，一句話(huà)，它的作用就是配置requireJS嘛。

那require呢？

require的作用就是執(zhí)行。比如這里我只需要monkey.js去執(zhí)行，所以我就導(dǎo)入了monkey，然后通過(guò)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里定義的方法或者變量，其他模塊是訪(fǎng)問(wèn)不到的，所以，你如果想其他模塊也能訪(fǎng)問(wèn)，就將相應(yīng)的方法拋出去(return)對(duì)象或者函數(shù)都可以。在這里，我return的是一個(gè)對(duì)象，提供init供其他模塊調(diào)用。

您可能感興趣的文章: