RequireJS - 快速指南

時間  2019-11-06
標籤 requirejs 快速 指南 欄目 JavaScript 简体版
原文   原文鏈接

原文： https://www.tutorialspoint.com/requirejs/requirejs_quick_guide.htmjavascript

RequireJS - 概述

RequireJS是一個JavaScript庫和文件加載器，用於管理JavaScript文件和模塊化編程之間的依賴關係。它還有助於提升代碼的速度和質量。css

RequireJS由David Mark開發，其初始版本v1.0.0於2009年發佈。它是一個開源版本，2.3.3版本是其最近的穩定版本。html

爲何要使用RequireJS？

  • 它是MIT許可下的開源JavaScript庫。java

  • 它提供異步模塊加載。node

  • 它具備加載嵌套依賴項的能力。jquery

  • 若是您有許多小文件，則無需擔憂跟蹤依賴關係順序。git

  • 它爲插件提供支持並加載多個JavaScript文件。github

RequireJS的特色

  • 它管理JavaScript文件之間的依賴關係，並提升代碼的速度和質量。ajax

  • 它將模塊組合並縮小爲一個腳本，以優化體驗。npm

  • 它下降了大型應用程序中的代碼複雜度

  • 它在編譯時從不一樣的模塊收集不一樣的JavaScript文件。

  • 它容許輕鬆調試，由於它從普通腳本標記加載文件。

RequireJS - 環境設置

在本章中，咱們將瞭解如何爲RequireJS設置環境。爲此，您須要下載最新版本的RequireJS庫。您能夠下載縮小版或詳細版 。

下載後，咱們須要在您的libs文件夾中包含require.js文件，項目結構應以下所示 -

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

咱們須要將一個html文件定義爲index.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

RequireJS - 配置

能夠經過data-main屬性傳遞HTML模板中的主要配置來初始化RequireJS。RequireJS使用它來知道在您的應用程序中加載哪一個模塊。

例如 -

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

要包含Require.js文件，須要在html文件中添加腳本標記。在腳本標記內，添加data-main屬性以加載模塊。這能夠做爲您的應用程序的主要入口點。scripts / main是包含RequireJS配置的應用程序的主JavaScript文件。

配置選項

如下是可在加載第一個應用程序模塊時設置的配置選項 -

  • baseUrl - 它是經過RequireJS加載的全部模塊的路由路徑。 baseUrl由以「斜槓（/）」開頭的字符串表示，包含協議並以「.js」擴展名結尾。若是沒有指定baseUrl，則RequireJS使用data-main屬性路徑做爲baseUrl。

  • paths - 它指定相對於baseUrl的模塊的路徑映射。在映射模塊名稱時，它會自動將.js擴展名添加到路徑中。

  • shim - 它經過配置其依賴關係並導出其全局值，提供非AMD庫與RequireJS的使用。

  • map - 對於給定的模塊，應用程序經過共享其ID來爲不一樣的條件使用相同的代碼，從而針對不一樣的目標使用不一樣版本的相同模塊。

  • config - 它經過使用config選項爲模塊提供配置，這能夠經過使用特殊依賴「模塊」並調用其module.config（）函數來完成。

  • urlArgs - 查詢字符串參數用於獲取使用RequireJS加載的全部資源。當瀏覽器或服務器配置不正確時，它用於緩存清除。

  • waitSeconds - 它指定在拋出腳本加載以前等待的秒數。默認值爲「7」秒，「0」禁用超時。

  • packages - 它提供了用於配置加載模塊的CommonJS包。

  • context - 它提供了上下文加載的名稱，容許在頁面中加載不一樣的模塊。

  • deps - 在加載RequireJS以前將Require指定爲config對象時，它是一個依賴項數組。

  • 回調 - 它在加載依賴項後執行一個函數，而且在加載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. } );

模塊加載

RequireJS - 定義函數

define（）函數可用於加載模塊（模塊能夠是對象，函數，類或加載模塊後執行的代碼）。您能夠在同一頁面中加載同一模塊的不一樣版本。即便它們以不一樣的順序加載，也能夠按相同的順序分析不一樣的版本。

句法

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 - 優化工具

在本章中，咱們將討論RequireJS中的優化。 RequireJS中的優化器具備如下特徵 -

  • 將腳本文件與UglifyJS的幫助一塊兒用於默認用法或Closure Compiler for 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文件，該文件具備app的全部依賴項。此文件在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參數）複製到構建的輸出文件夾（dir參數），並將全部優化應用於位於輸出文件夾中的文件。運行如下命令在app文件夾中構建配置文件 -

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來指定它們的依賴關係。

Sr.No. 類型和描述
1 使用Shim Config

jQuery使用shim配置來定義jQuery插件的依賴項。
2 從CDN加載jQuery

jQuery使用CDN來定義jQuery插件的依賴項。

RequireJS - NodeJS

Node適配器能夠與Require和Node的搜索路徑一塊兒使用。若是RequireJS沒有使用模塊配置，則可使用現有的基於節點的模塊而無需更改它們。您可使用npm命令在項目的node_modules目錄中安裝節點包。

Node將僅從本地磁盤加載模塊，而且只有在RequireJS加載模塊時纔會應用配置選項，例如map，packages，path等。

安裝節點

您可使用如下命令安裝節點適配器，該命令將安裝最新版本文件 -

npm install requirejs

您也能夠經過如下方式安裝節點 -

  • 您能夠今後連接下載r.js並將其保存在項目文件夾中。

  • 從r.js存儲庫獲取源代碼或經過node dist.js安裝它。

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優化器做爲優化方法，使用函數調用而不是使用命令行工具。

例如 -

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規範推薦傳輸格式和異步需求 。您能夠輕鬆轉換傳統的CommonJS模塊格式以使用RequireJS。可是，全部模塊都不會轉換爲新格式。下面列出了一些例外狀況 -

  • 具備條件代碼的模塊執行require調用。
  • 具備循環依賴關係的模塊。

手動轉換

可使用如下語法將CommonJS模塊手動轉換爲RequireJS格式 -

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

轉換工具

可使用r.js項目轉換器工具將CommonJS模塊轉換爲RequireJS格式，該工具內置於r.js文件中。您應該指定要轉換的文件的路徑和輸出文件夾，以下所示 -

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

設置導出值

CommonJS中的一些系統容許經過將導出值指定爲module.exports來設置導出值。但RequireJS支持從傳遞給define的函數返回值的更簡單方法。這樣作的好處是你不須要export和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包加載模塊

要了解位置和包屬性，能夠經過設置RequireJS配置使用RequireJS在CommonJS包中加載模塊。

優化工具

RequireJS中提供了優化工具，能夠將模塊定義組合到優化的瀏覽器交付包中。它做爲命令行工具運行，所以您能夠將其用做代碼部署的一部分。

RequireJS - 插件

RequireJS包含一小組插件，容許將各類類型的資源做爲依賴項加載。如下是RequireJS中可用插件的列表 -

  • 文本
  • domready中
  • 國際化
  • CSS加載

文本

文本插件用於異步加載基於文本的資源，主要用於在JavaScript文件中插入HTML內容。它能夠在您使用文本時加載！ 任何require或define模塊調用中的前綴，並將文件擴展名傳遞給插件。與普通模塊加載相比， 文本插件使用XHR加載模塊，而且不會將代碼做爲腳本標記添加到標頭中。

文本文件資源能夠做爲依賴項包含在代碼中 -

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 bundle支持的多個語言環境一塊兒使用，當模塊或依賴項指定「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); }
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程