RequireJS 入門指南

jopen 11年前發布 | 28K 次閱讀 RequireJS JavaScript開發

簡介

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

異步模塊定義(AMD) 

談起RequireJS，你無法繞過提及JavaScript模塊是什么，以及AMD是什么。

JavaScript模塊只是遵循SRP(Single Responsibility Principle單一職責原則) 的代碼段，它暴露了一個公開的API。在現今JavaScript開發中，你可以在模塊中封裝許多功能，而且在大多數項目中，每個模塊都有其自己的文件。 這使得JavaScript開發者日子有點難過，因為它們需要持續不斷的關注模塊之間的依賴性，按照一個特定的順序加載這些模塊，否則運行時將會放生錯 誤。

當你要加載JavaScript模塊時，就會使用script標簽。為了加載依賴的模塊，你就要先加載被依賴的，之后再加載依賴的。使用script標簽時，你需要按照此特定順序安排它們的加載，而且腳本的加載是同步的。可以使用async和defer關鍵字使得加載異步，但可能因此在加載過程中丟失加載的順序。另一個選擇是將所有的腳本捆綁打包在一起，但在捆綁的時候你仍然需要把它們按照正確的順序排序。

AMD就是這樣一種對模塊的定義，使模塊和它的依賴可以被異步的加載，但又按照正確的順序。

RequireJS 入門指南

CommonJS, 是對通用的JavaScript模式的標準化嘗試，它包含有 AMD 定義 ，我建議你在繼續本文之前先讀一下。在ECMAScript 6這個下一版本JavaScript 規范中，有關于輸出，輸入以及模塊的規范定義，這些將成為JavaScript語言的一部分，而且這不會太久。這也是關于RequireJS我們想說的東西。

RequireJS?

RequireJS是一個Javascript 文件和模塊框架，可以從 http://requirejs.org/下載，如果你使用Visual Studio也可以通過Nuget獲取。它支持瀏覽器和像node.js之類的服務器環境。使用RequireJS,你可以順序讀取僅需要相關依賴模塊。

RequireJS所做的是，在你使用script標簽加載你所定義的依賴時，將這些依賴通過head.appendChild()函數來加載他們。當依 賴加載以后，RequireJS計算出模塊定義的順序，并按正確的順序進行調用。這意味著你需要做的僅僅是使用一個“根”來讀取你需要的所有功能，然后剩 下的事情只需要交給RequireJS就行了。為了正確的使用這些功能，你定義的所有模塊都需要使用RequireJS的API，否者它不會像期望的那樣 工作。

RequireJS API 存在于RequireJS載入時創建的命名空間requirejs下。其主要API主要是下面三個函數:

  • define– 該函數用戶創建模塊。每個模塊擁有一個唯一的模塊ID，它被用于RequireJS的運行時函數，define函數是一個全局函數，不需要使用requirejs命名空間.
  • require– 該函數用于讀取依賴。同樣它是一個全局函數，不需要使用requirejs命名空間.
  • config– 該函數用于配置RequireJS.

在后面，我們將教你如果使用這些函數，但首先讓我們先了解下RequireJS的加載流程。

data-main屬性

當你下載RequireJS之后，你要做的第一件事情就是理解RequireJS是怎么開始工作的。當RequireJS被加載的時候，它會使用 data-main屬性去搜尋一個腳本文件（它應該是與使用src加載RequireJS是相同的腳本）。data-main需要給所有的腳本文件設置一 個根路徑。根據這個根路徑，RequireJS將會去加載所有相關的模塊。下面的腳本是一個使用data-main例子：

1

另外一種方式定義根路勁是使用配置函數，后面我們將會看到。requireJs假設所有的依賴都是腳本，那么當你聲明一個腳本依賴的時候你不需要使用.js后綴。

配置函數

如果你想改變RequireJS的默認配置來使用自己的配置，你可以使用require.configh函數。config函數需要傳入一個可選參數對象，這個可選參數對象包括了許多的配置參數選項。下面是一些你可以使用的配置：

  • baseUrl——用于加載模塊的根路徑。
  • paths——用于映射不存在根路徑下面的模塊路徑。
  • shims——配置在腳本/模塊外面并沒有使用RequireJS的函數依賴并且初始化函數。假設underscore并沒有使用  RequireJS定義，但是你還是想通過RequireJS來使用它，那么你就需要在配置中把它定義為一個shim。
  • deps——加載依賴關系數組

下面是使用配置的一個例子：

01 require.config({
02     //By default load any module IDs from scripts/app
03     baseUrl: 'scripts/app',
04     //except, if the module ID starts with "lib"
05      paths: {
06         lib: '../lib'
07     },
08     // load backbone as a shim
09     shim: {
10         'backbone': {
11             //The underscore script dependency should be loaded before loading backbone.js
12             deps: ['underscore'],
13             // use the global 'Backbone' as the module name.
14             exports: 'Backbone'
15         }
16     }
17 });

在這個例子中把根路徑設置為了scripts/app，由lib開始的每個模塊都被配置在scripts/lib文件夾下面，backbone 加載的是一個shim依賴。

Defining Modules Using RequireJS

Modules are just well-scoped objects that expose an API and encapsulate their internals. In order to define a module, RequireJS exposes thedefinefunction. There should be only one call fordefinein each JavaScript file by convention. Thedefinefunction receives an array of dependencies and a function which is going to hold all the module definitions. By convention the module definition function receives as parameters all the previous dependencies and in the order they were supplied in the array. For example, here is a simple module definition:

01 define(["logger"], function(logger) {       
02         return {
03              firstName: “John",
04              lastName: “Black“,
05              sayHello: function () {
06                 logger.log(‘hello’);
07              }
08         }
09     }
10 );

As you can see, an array is passed to thedefinefunction with a logger dependency which is later used in the module. Also, you can see that in the module definition function there is a parameter calledloggerwhich will be set to the loaded logger module. Every module should return its API which in this case is two properties (firstNameandlastName) and a function (sayHello). Later on, if you will load this module as another module dependency with a module ID, you will be able to use the exposed API.

使用require函數

在RequireJS中另外一個非常有用的函數是require函數。require函數用于加載模塊依賴但并不會創建一個模塊。例如：下面就是使用require定義了能夠使用jQuery的一個函數。

1 require(['jquery'], function ($) {
2     //jQuery was loaded and can be used now
3 });

小結

在這篇文章中我介紹了RequireJS庫,它是我創建每個Javascript項目都會用到的庫函數之一。它不僅僅用于加載模塊依賴和相關的命令，RequireJS幫助我們寫出模塊化的JavaScript代碼，這非常有利于代碼的可擴展性和重用性。
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！