使用 RequireJS 來優化你的 JavaScript 程式碼

類別: IT

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。

你在你的專案中用到RequireJS了嗎?它改善了你的工作流程了嗎?讓我們在回覆討論一下。

使用 RequireJS 來優化你的 JavaScript 程式碼原文請看這裡

推薦文章