RequireJS是一個提高你的javascript代碼速度和質(zhì)量的有效方法，同時它還讓你的代碼更容易閱讀和維護(hù)。

在本文中，我會為你介紹RequireJS和應(yīng)該如何使用它。我們討論引入文件和定義模塊，甚至還會接觸優(yōu)化方面的知識。

簡單的說，require.js是一個腳本載入程序，允許你把你的javascript代碼獨立成文件和模塊，同時管理每個模塊間的依賴關(guān)系。

引入文件

在開始使用RequireJS前，我們需要先下載它的庫和Asynchronous Module Definition（AMD）文件。然后在文檔頭部鏈接到require.js文件，就如：

 
<script src="require.js" data-main="main"></script>

你可能會問data-main屬性是什么，使用RequireJS意味著當(dāng)你在文檔的頭部調(diào)用require的時候，你同時也會鏈接到你的javascript應(yīng)用的主文件，在這個例子里面就是main.js（請注意，RequireJS自動添加.js后綴到文件名的后面）

在main.js文件里面，需要為RequireJS做配置，載入模塊和定義一個base路徑，以便在引入文件時使用。

Require函數(shù)

RequireJS使用一個簡單的require函數(shù)去導(dǎo)入腳本，在這個例子里面，RequireJS導(dǎo)入的是JQuery：
 

require(["jquery"], function($) {
 $(‘#mydiv”).html(‘Hello this is RequireJS talking”);
});

RequireJS的一個優(yōu)點就是，它非常容易閱讀。在上面的代碼中，我們可以看到，首先require函數(shù)抓取名字為jquery.js的文件，然后給一個匿名函數(shù)傳入$作為參數(shù)，當(dāng)這個動作完成后，你就可以任意使用JQuery的代碼了。

現(xiàn)在，你的代碼中一般不會包含jquery.js文件的jQuery庫，就如大多數(shù)的插件和框架，我們通常選擇從他們的GitHub或者Google CDN中導(dǎo)入進(jìn)來，這樣我們就需要配置他們的真正路徑：
 

require.config({
 paths: {
  "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
 }
});

這就是說你可以通過Google導(dǎo)入jquery（請注意我在這個例子里面使用的是"jquery"名稱，你可以使用任何你喜歡的名稱）

定義模塊

使用AMD模式，意味著我們的代碼可以結(jié)構(gòu)化成為模塊；這些模塊實現(xiàn)應(yīng)用中的某些功能。你可以在一個模塊中只放兩行代碼或者100行代碼，這完全決定于你想通過模塊實現(xiàn)什么功能。

定義模塊，我們可以這樣寫：
 

define(function () {
 function add (x,y) {
  return x + y;
 }
});

這個里面里面，我定義了一個add函數(shù)，并且沒有任何依賴，但是如果這個函數(shù)需要jquery才能正常工作，定義代碼可能就是這樣：
 

define([‘jquery'], function () {
 function place(mydiv) {
$(mydiv).html(‘My Sample Text');
 }
});

使用這種語法，我們告訴JavaScript首先導(dǎo)入jquery，然后運行代碼，這樣任何時候都能使用jquery。我們也可以使用在Javascript文件中定義的模塊，不僅限于框架或者插件。

優(yōu)化

就像你看到的一樣，RequireJS是一個強(qiáng)大的工具，去把你的文件組織成模塊，并且在你需要的時候才導(dǎo)入。其中的缺點就是大量的javascript文件的時候，也需要大量的導(dǎo)入時間，所以RequireJS包含了一個optimizer優(yōu)化器去收集所有文件的數(shù)據(jù)并把它放到一個壓縮文件里面。

總的來說，RequireJS是一個很好的工具去組織和優(yōu)化你web應(yīng)用中的Javascript。

最新評論