RequireJS 快速指南

上一頁
下一頁

RequireJS - 概述

RequireJS 是一個 JavaScript 庫和檔案載入器，它管理 JavaScript 檔案之間的依賴關係以及模組化程式設計。它還有助於提高程式碼的速度和質量。

RequireJS 由 David Mark 開發，其初始版本 v1.0.0 於 2009 年釋出。它是一個開源專案，版本 2.3.3 是其最新的穩定版本。

為什麼要使用 RequireJS？

  • 它是一個在 MIT 許可證下的開源 JavaScript 庫。

  • 它提供非同步模組載入。

  • 它能夠載入巢狀的依賴關係。

  • 如果您有很多小檔案，則無需擔心跟蹤依賴項的順序。

  • 它提供對外掛的支援並載入多個 JavaScript 檔案。

RequireJS 的特性

  • 它管理 JavaScript 檔案之間的依賴關係，並提高程式碼的速度和質量。

  • 它將模組組合並壓縮成一個指令碼，以獲得最佳化的體驗。

  • 它降低了大型應用程式中的程式碼複雜性。

  • 它在編譯時從不同模組收集不同的 JavaScript 檔案。

  • 它允許輕鬆除錯，因為它從普通指令碼標籤載入檔案。

RequireJS - 環境設定

在本章中，我們將瞭解如何為 RequireJS 設定環境。為此，您需要下載最新版本的 RequireJS 庫。您可以下載 壓縮版本 或 詳細版本。

下載後，我們需要將 require.js 檔案包含在您的 libs 資料夾中，並且專案的結構應如下所示：

projectname/
|--index.html
|--libs/
   |---main.js
   |---require.js
   |---helper/
      |----util.js

我們需要定義一個名為 index.html 的 html 檔案，其中載入 RequireJS，如下所示。

<html>
   <head>
      <script data-main = "libs/main" src = "libs/require.js"></script>
   </head>
   
   <body>
      <h1> RequireJS Sample Page </h1>
   </body>
</html>

請注意，指令碼標籤中只包含帶有 RequireJS 呼叫的 require.js 來載入指令碼。

Node 中的 RequireJS

有兩種方法可以獲取 Node 介面卡。

  • npm - 您可以從命令提示符安裝最新版本的 requirejs，如下所示。

npm install requirejs

  • 下載 r.js - 您可以從 下載 頁面下載 r.js 檔案，並從 r.js 倉庫 頁面獲取原始碼。

RequireJS - 配置

RequireJS 可以透過在 HTML 模板中透過 data-main 屬性傳遞主配置來初始化。RequireJS 使用它來了解在您的應用程式中載入哪個模組。

例如：

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

要包含 Require.js 檔案，您需要在 html 檔案中新增 script 標籤。在 script 標籤內，新增 data-main 屬性以載入模組。這可以作為應用程式的主要入口點。scripts/main 是應用程式的主要 JavaScript 檔案，其中包含 RequireJS 配置。

配置選項

以下是載入第一個應用程式模組時可以設定的配置選項：

  • baseUrl - 它是透過 RequireJS 載入的所有模組的路由路徑。baseUrl 由以“斜槓 (/)”開頭的字串指示，包含協議並以“.js”副檔名結尾。如果沒有指定 baseUrl，則 RequireJS 使用 data-main 屬性路徑作為 baseUrl。

  • paths - 它指定相對於 baseUrl 的模組的路徑對映。在對映模組名稱時，它會自動向路徑新增 .js 副檔名。

  • shim - 透過配置其依賴項並匯出其全域性值，它提供了將非 AMD 庫與 RequireJS 一起使用的功能。

  • map - 對於給定的模組，應用程式使用不同版本的相同模組來實現不同的目標，透過共享其 ID 來利用相同程式碼滿足不同條件。

  • config - 它透過使用 config 選項為模組提供配置，這可以透過使用特殊的依賴項“module”並呼叫其 module.config() 函式來完成。

  • urlArgs - 查詢字串引數用於獲取使用 RequireJS 載入的所有資源。當瀏覽器或伺服器配置不正確時，它用於快取清除。

  • waitSeconds - 它指定在指令碼載入超時之前等待的秒數。預設值為“7”秒，“0”停用超時。

  • packages - 它提供用於配置載入模組的 CommonJS 包。

  • context - 它提供上下文載入的名稱，允許在頁面中載入不同的模組。

  • deps - 它是載入 RequireJS 之前將 Require 指定為 config 物件時所需的依賴項陣列。

  • callback - 載入依賴項後執行函式，並且在載入 RequireJS 之前將 Require 指定為 config 物件時需要此函式。

  • xhtml - 當此選項設定為 true 時，它用於透過使用 document.createElementNS() 方法建立指令碼元素。

  • scriptType - 它定義文件中使用的指令碼型別屬性的值。預設型別為“text/javascript”。

  • skipDataMain - 如果此選項設定為 true，則在載入模組時跳過 data-main 屬性掃描。

RequireJS - AMD 模組

RequireJS 中的模組是一個作用域物件，在全域性名稱空間中不可用。因此，全域性名稱空間不會被汙染。RequireJS 語法允許更快地載入模組，而無需擔心跟蹤依賴項的順序。您可以在同一頁面中載入同一模組的多個版本。

定義模組

模組使用 define() 函式定義；相同的函式也用於載入模組。

簡單的名稱/值對

如果模組只是一組名稱和值對，則可以使用以下語法：

define({
   state: "karnataka",
   city: "bangalore"
});

定義函式

模組也可以為框架使用函式，而無需依賴項。這可以透過使用以下語法來完成：

define(function () {
   
   //Do setup work here
   return {
      state: "karnataka",
      city: "bangalore"
   }
});

定義具有依賴項的函式

如果模組具有依賴項，則第一個引數（依賴項名稱陣列）、第二個引數（定義函式）和定義模組的返回物件的放置位置在以下語法中顯示：

define(["./mnc", "./startup"], 
   function(mnc, startup) {
        
      return {
         state: "karnataka",
         city: "bangalore",
      
         addCompany: function() {
            mnc.decrement(this);
            startup.add(this);
         }
      
      }
   }
);

將模組定義為函式

模組不必只返回物件，函式中的任何有效值也可以返回。以下語法用於將模組定義為函式：

define(["./mnc", "./startup"],
   function(mnc, startup) {
       
      return function(title) {
         return title ? (window.title = title) :
         startup.storeName + ' ' + mnc.name;
      }
      
   }
);

使用名稱定義模組

在某些情況下，您可能必須將名稱作為第一個引數包含在 define() 中。這可以透過使用以下語法來完成：

define("js2/title",
   ["js1/mnc", "js1/startup"],
   
   function(mnc, startup) {
      //Define js2/title object in here.
   }
   
);

define() 函式可以用來載入模組（模組可以是物件、函式、類或載入模組後執行的程式碼）。您可以在同一頁面中載入同一模組的不同版本。即使這些版本以不同的順序載入，也可以按相同的順序進行分析。

RequireJS - 定義函式

模組載入

語法

define(['module1', 'module2'], function (module1, module2) {
   //define the module value by returning a value
   return function () {};
});

在定義模組時，您可以傳遞模組名稱列表，並且可以使用 RequireJS 在執行模組之前檢索這些模組。這些模組可以作為 定義函式的引數傳遞。

示例

以下示例顯示了在載入模組時 define() 函式的使用。建立一個名為 index.html 的 html 檔案，並將以下程式碼放在其中：

<!DOCTYPE html>
<html>
   <head>
      <title>Define() Function</title>
      <script data-main = "main" src = "require.js"></script>
   </head>
   
   <body>
      <h2>RequireJS Define() Function Example</h2>
   </body>
</html>

建立一個名為 main.js 的 js 檔案，並在其中新增以下程式碼：

define(function (require) {
   var myteam = require("./team");
   var mylogger = require("./player");
   alert("Player Name : " + myteam.player);
   mylogger.myfunc();
});

現在，再建立兩個名為 team.js 和 player.js 的 js 檔案，並分別放置以下程式碼：

team.js

define({
   player: "Sachin Tendulkar",
   team : "India"
});

player.js

define(function (require) {
   var myteam = require("./team");

   return {
      myfunc: function () {
         document.write("Name: " + myteam.player + ", Country: " + myteam.team);
      }
   };
});

輸出

在瀏覽器中開啟 HTML 檔案；您將收到如下面的螢幕截圖所示的輸出：

RequireJS Define Function

點選“確定”按鈕，您將從模組獲得另一個輸出：

RequireJS Define Function

RequireJS - 最佳化器

在本章中，我們將討論 RequireJS 中的最佳化。RequireJS 中的最佳化器具有以下特性：

  • 藉助 UglifyJS（預設使用）或 Closure Compiler（Java 使用）將指令碼檔案組合在一起

  • 將 CSS 檔案組合在一起。

最佳化器是 Node 和 Nashorn 的 r.js 介面卡的一個元件。它被開發為構建過程的一部分，而不是開發過程的一部分。

示例

在將 r.js 下載到您的專案資料夾後，資料夾的結構應如下所示：

projectfolder/
   |-->index.html
   |-->CSS/
      |--->main.css
      |--->other.css
   |-->libs
      |--->require.js
      |--->main.js
         |--->dependent1.js
         |--->dependent2.js
         |--->dependent3.js

您的 HTML 檔案將如下所示：

<html>
   <head>
      <script data-main = "libs/main" src = "libs/require.js"></script>
   </head>
   
   <body>
      <h1> RequireJS Sample Page </h1>
   </body>
</html>

您的 main.js 檔案將如下所示：

require(["dependent1", "dependent2", "dependent3"], function (dependent1, dependent2, 
   dependent3) {
});

您的 main.css 檔案將如下所示：

@import url("other.css");

.app {
   background: transparent url(../../img/app.png);
}

最佳化器的基本設定

您可以使用命令列引數或配置檔案構建屬性來設定專案，兩者可以互換。

以下是命令列的語法：

node r.js -o baseUrl = . paths.jquery = content/path/jquery 
   name = main out = main-built.js

以下是構建配置檔案的語法：

({
   baseUrl: ".",
  
   paths: {
      jquery: "content/path/jquery"
   },
   
   name: "main",
   out: "main-built.js"
})

之後，您可以將構建配置檔名稱傳遞給命令列中的最佳化器，如下所示：

node r.js -o build.js

命令列引數語法存在一些缺點。組合使用命令列引數或配置檔案構建屬性可以克服這些缺點。

最佳化單個 JS 檔案

要最佳化單個 JS 檔案，您需要建立一個 JS 檔案，其中包含其所有依賴項的內容。您的檔案應如下所示：

({
   baseUrl: "js/shop",
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "department": ["underscore", "jquery"],
         "dependent": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   name: "../main",
   out: "../built/js/main.js"
})

現在，您可以建立包含應用程式所有依賴項的main.js檔案。此檔案在 HTML 檔案中用於透過一個請求載入所有 JS 檔案。請注意，建立的檔案不應位於原始碼目錄中；這些檔案應位於專案的副本中。

CDN 資源的使用

最佳化器不會使用網路資源/CDN（內容分發網路）載入指令碼。如果需要使用 CDN 載入指令碼，則需要將這些檔案對映到模組名稱並將檔案下載到本地檔案路徑。您可以使用特殊單詞“empty”在構建配置檔案的路徑配置中，如下面的語法所示：

({
   baseUrl: "js",
   name: "mainCDN",
   out: "js/mainCDN-built.js",
   
   paths: {
      jquery: "empty:"
   }
   
})

主檔案將如下所示：

requirejs.config({
   paths: {
      'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'
   }
});

require(['jquery'], function ($) {
});

最佳化單個 CSS 檔案

CSS 檔案使用以下引數直接在命令列中進行最佳化，如下所示：

node ../../r.js -o cssIn = main.css out = main-built.css

CSS 檔案也可以在構建檔案中使用相同的屬性進行最佳化，如下所示：

...
cssIn:"main.css",
out:"main-built.css"
...

以上兩種方法都是允許的，並且都會建立一個名為projectfolder/css/mainbuild.css的檔案。此檔案將包含 main.css 的內容、正確調整的 url() 路徑以及已刪除的註釋。

最佳化整個專案

最佳化器使用構建配置檔案來最佳化所有css和js檔案。在以下示例中，建立了build.js檔案。

({
   baseUrl: "js/shop",
   appDir: '.',
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "deps": ["underscore", "jquery"],
         "exports": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   optimizeCss: "standard.keepLines",
   modules: [
      {
         name: "app"
      }
   ],
   
   dir: "../built"
})

build.js檔案指示 RequireJS 將所有應用程式資料夾（appDir 引數）複製到輸出資料夾 built（dir 引數），並將所有最佳化應用於輸出資料夾中的檔案。執行以下命令以在應用程式資料夾中構建配置檔案：

node r.js -o build.js

RequireJS - jQuery

RequireJS 使用 jQuery 作為另一個依賴項，並將其註冊為小寫字母的命名模組jquery，並且預設情況下，還在使用 AMD/RequireJS 時透過全域性函式$和jQuery註冊自身。

載入 jQuery

require(['jquery'], function($) {
   //code here
}

您可以載入多個自定義庫以及 jQuery，如下所示：

require(['custom_library_path','jquery'], function(load_library,$) {
   //related code of $ and load_library
});

下表顯示了使用 RequireJS 指定 jQuery 依賴項的方法。

序號 型別和描述
1 使用 Shim 配置

jQuery 使用 shim 配置來定義 jQuery 外掛的依賴項。
2 從 CDN 載入 jQuery

jQuery 使用 CDN 來定義 jQuery 外掛的依賴項。

RequireJS - NodeJS

Node 介面卡可以與 Require 和 Node 的搜尋路徑的實現一起使用。如果 RequireJS 未使用模組配置，則可以使用現有的基於 Node 的模組，而無需更改它們。您可以使用 npm 命令在專案的node_modules目錄中安裝節點包。

Node 僅從本地磁碟載入模組，並且僅在 RequireJS 載入模組時應用 map、packages、paths 等配置選項。

安裝 Node

您可以使用以下命令安裝 Node 介面卡，該命令將安裝最新的發行版檔案：

npm install requirejs

您也可以透過以下方式安裝 Node：

  • 您可以從此連結下載r.js並將其儲存在您的專案資料夾中。

  • 從r.js 儲存庫獲取原始碼或透過node dist.js安裝它。

Node 的用法

要使用 node，您需要擁有require('requirejs')並將require函式在配置中移動到頂層 main.js 檔案。

例如：

var requirejs = require('requirejs');

requirejs.config({
   //load the mode modules to top level JS file 
   //by passing the top level main.js require function to requirejs
   nodeRequire: require
});

requirejs(['name1', 'name2'],
   function (name1, name2) {
      //by using requirejs config, name1 and name2 are loaded
      //node's require loads the module, if they did not find these
   }
);

使用 AMD 或 RequireJS 構建節點模組

您可以使程式碼模組與 RequireJS 和 Node 一起工作，而無需庫的使用者，然後使用amdefine包來完成此工作。

例如：

if (typeof define !== 'function') {
   var define = require('amdefine')(module);
}

define(function(require) {
   var myval = require('dependency');

   //The returned value from the function can be used 
   //as module which is visible to Node.
   return function () {};
});

最佳化器作為節點模組

節點模組使用 RequireJS 最佳化器作為optimize方法，透過使用函式呼叫而不是使用命令列工具。

例如：

var requirejs = require('requirejs');

var config = {
   baseUrl: '../directory/scripts',
   name: 'main',
   out: '../build/main-built.js'
};

requirejs.optimize(config, function (buildResponse) {

   //The text output of the modules specify by using buildResponse 
   //and loads the built file for the contents
   //get the optimized file contents by using config.out 
   var contents = fs.readFileSync(config.out, 'utf8');
}, function(err) {
   //code for optimization err callback
});

RequireJS - Dojo

Dojo 是一個基於 AMD 模組架構的 JavaScript 工具包，它提供額外的模組來為 Web 應用程式新增額外功能，並節省 Web 應用程式開發過程中的時間和規模。

示例

以下示例顯示了 Dojo 與 RequireJS 一起使用的用法。建立一個名為index.html的 html 檔案，並將以下程式碼放在其中：

<!DOCTYPE html>
<html>
   <head>
      <title>RequireJS Dojo</title>
      <script data-main="app" src="lib/require.js"></script>
   </head>
   
   <body>
      <h2>RequireJS  Dojo</h2>
      <p>
         Hello... ...
      </p>
   </body>
</html>

建立一個名為app.js的js檔案，並在其中新增以下程式碼：

require ({
   //You can configure loading modules from the lib directory
   baseUrl: 'lib',
   
   paths: {
      //mapping of package
      dojo: 'http://sfoster.dojotoolkit.org/dojobox/1.7-branch/dojo'
   }
   
}, [
      //modules which we are using here
      'dojo/dom'
   ], function(dom) { 
   
      //using the 'byId' method from dom module
      var mydojo = dom.byId('dojo_val')
      mydojo.innerHTML = "The text is displaying via dojo/dom";   
   }
);

輸出

在瀏覽器中開啟 HTML 檔案；您將收到以下輸出：

RequireJS Dojo

RequireJS - CommonJS

模組格式由 CommonJS 定義。它在不提供瀏覽器與其他 JavaScript 環境相同選項的情況下定義。因此，CommonJS 規範推薦傳輸格式和非同步 require。您可以輕鬆地轉換傳統的 CommonJS 模組格式以與 RequireJS 一起使用。但是，並非所有模組都將轉換為新格式。一些例外情況如下：

  • 具有條件程式碼以執行 require 呼叫的模組。
  • 具有迴圈依賴關係的模組。

手動轉換

CommonJS 模組可以使用以下語法手動轉換為 RequireJS 格式：

define(function(require, exports, module) {
   //place CommonJS module content here
});

轉換工具

CommonJS 模組可以使用r.js 專案轉換器工具轉換為 RequireJS 格式，該工具內置於r.js檔案中。您應該指定要轉換的檔案的路徑和輸出資料夾，如下所示：

node r.js -convert path/to/commonjs/modules/ path/to/output

設定匯出值

CommonJS 中的一些系統允許透過將匯出值分配為module.exports來設定匯出值，但 RequireJS 支援更簡單的從傳遞給 define 的函式中返回值的方法。這樣做的好處是您不需要 exports 和 module 函式引數，因此您可以像下面這樣將它們從模組定義中刪除：

define(function (require) {
   var name = require('name');

   //Define the module as exporting a function
   return function () {
      name.doSomething();
   };
});

替代語法

指定依賴項的另一種方法是透過依賴項陣列引數define()。但是，依賴項陣列中名稱的順序應與傳遞給定義函式define()的引數順序匹配，如下所示：

define(['name'], function (name) {
   
   return function () {
      name.doSomething();
   };
});

從 CommonJS 包載入模組

要了解模組在 CommonJS 包中使用 RequireJS 載入的位置和包屬性，請設定 RequireJS 配置。

最佳化工具

RequireJS 中存在最佳化工具，它可以將模組定義組合在一起，形成瀏覽器交付的最佳化包。它作為命令列工具執行，因此您可以將其用作程式碼部署的一部分。

RequireJS - 外掛

RequireJS 包含一小組外掛，這些外掛允許將各種型別的資源載入為依賴項。以下是 RequireJS 中可用外掛的列表：

  • text
  • domReady
  • i18n
  • CSS 載入

text

text外掛用於非同步載入基於文字的資源，主要用於將 HTML 內容插入 JavaScript 檔案中。當您在任何 require 或 define 模組呼叫中使用text!字首並將副檔名傳遞給外掛時，可以載入它。與正常的模組載入相比，text外掛使用 XHR 載入模組，並且不會將程式碼作為script標籤新增到標題中。

文字檔案資源可以作為程式碼中的依賴項包含在內，如下所示：

require(["mymodule", "text!mymodule.html", "text!mymodule.css"],
   
   function(mymodule, html, css) {
      //the html and css variables will be the text
      //of the mymodule.html file and mymodule.css files respectively
   }
);

domReady

RequireJS 可用於在 DOM 準備好之前載入指令碼，開發人員僅在指令碼完全載入後才能與 DOM 互動。有時，指令碼可以在 DOM 準備好之前載入。因此，為了克服此問題，RequireJS 提供了一種現代方法，稱為DOMContentLoaded事件，該事件在 DOM 準備好後呼叫 domReady 函式。

require(['domReady'], function(domReady) {
   
   domReady(function() {
      //the domReady function is called when DOM is ready 
      //which is safe to manipulate DOM nodes in this function
   });
});

i18n

它可以與提供i18n捆綁包支援的多個語言環境一起使用，這些捆綁包將在模組或依賴項指定“i18n!”字首時自動載入。要使用此功能，請下載它並將其放在主 JavaScript 檔案所在的同一目錄中。將此外掛放在名為“nls”的目錄中以找到您的本地化檔案。

例如，假設我們有一個名為country.js的 js 檔案，其內容如下，並將其放在mydirectory/nls/country.js目錄中：

define({
   
   "root": {
      "india": "india",
      "australia": "australia",
      "england": "england"
   }
});

您可以透過使用fr-fr語言環境向檔案新增特定的翻譯，以上程式碼將更改為：

define({
   
   "root": {
      "title": "title",
      "header": "header",
      "description": "description"
   },
   
   "es-es": true
});

接下來，在mydirectory/nls/es-es/country.js處指定具有以下內容的檔案：

define({
   
   "root": {
      "title": "título",
      "header": "cabecera",
      "description": "descripción"
   },
   
   "es-es": true
});

您可以透過在main.js檔案中使用模組配置將其傳遞給外掛來設定語言環境，如下所示：

requirejs.config({
   
   config: {
      //set the config for the i18n plugin
      
      i18n: {
         locale: 'es-es'
      }
      
   }
});

使用 RequireJS 載入 CSS

您可以使用一些外掛透過簡單地附加到標題連結來載入 CSS 檔案以載入 CSS 檔案。

可以使用您自己的函式載入 CSS，如下所示：

function myCss(url) {
   var mylink = document.createElement("mylink");
   mylink.type = "text/css";
   mylink.rel = "stylesheet";
   mylink.href = url;
   document.getElementsByTagName("head")[0].appendChild(mylink);
}
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.