使用RequireJS最佳化JavaScript引用代碼的方法，requirejs最佳化

使用RequireJS最佳化JavaScript引用代碼的方法，requirejs最佳化

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

在本文中，我會為你介紹RequireJS和應該如何使用它。我們討論引入檔案和定義模組，甚至還會接觸最佳化方面的知識。

簡單的說，require.js是一個指令碼載入程式，允許你把你的javascript代碼獨立成檔案和模組，同時管理每個模組間的依賴關係。

引入檔案

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

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

你可能會問data-main屬性是什麼，使用RequireJS意味著當你在文檔的頭部調用require的時候，你同時也會連結到你的javascript應用的主檔案，在這個例子裡面就是main.js（請注意，RequireJS自動添加.js尾碼到檔案名稱的後面）

在main.js檔案裡面，需要為RequireJS做配置，載入模組和定義一個base路徑，以便在引入檔案時使用。

Require函數

RequireJS使用一個簡單的require函數去匯入指令碼，在這個例子裡面，RequireJS匯入的是JQuery：
 

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

RequireJS的一個優點就是，它非常容易閱讀。在上面的代碼中，我們可以看到，首先require函數抓取名字為jquery.js的檔案，然後給一個匿名函數傳入$作為參數，當這個動作完成後，你就可以任意使用JQuery的代碼了。

現在，你的代碼中一般不會包含jquery.js檔案的jQuery庫，就如大多數的外掛程式和架構，我們通常選擇從他們的GitHub或者Google CDN中匯入進來，這樣我們就需要配置他們的真正路徑：
 

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

這就是說你可以通過Google匯入jquery（請注意我在這個例子裡面使用的是"jquery"名稱，你可以使用任何你喜歡的名稱）

定義模組

使用AMD模式，意味著我們的代碼可以結構化成為模組；這些模組實現應用中的某些功能。你可以在一個模組中只放兩行代碼或者100行代碼，這完全決定於你想通過模組實現什麼功能。

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

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

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

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

使用這種文法，我們告訴JavaScript首先匯入jquery，然後運行代碼，這樣任何時候都能使用jquery。我們也可以使用在Javascript檔案中定義的模組，不僅限於架構或者外掛程式。

最佳化

就像你看到的一樣，RequireJS是一個強大的工具，去把你的檔案組織成模組，並且在你需要的時候才匯入。其中的缺點就是大量的javascript檔案的時候，也需要大量的匯入時間，所以RequireJS包含了一個optimizer最佳化器去收集所有檔案的資料並把它放到一個壓縮檔裡面。

總的來說，RequireJS是一個很好的工具去組織和最佳化你web應用中的Javascript。