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
我们需要定义一个 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 - 配置
RequireJS 可以通过将 HTML 模板中的主配置通过 data-main 属性进行初始化。RequireJS 使用它来了解在应用程序中要加载哪个模块。
例如 −
<script 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 − 它通过配置依赖项并导出其全局值，为 RequireJS 提供非 AMD 库的使用。
map − 对于给定的模块，应用程序通过共享其 id 来使用不同版本的相同模块以实现不同的目标，从而在不同条件下使用相同的代码。
config − 它通过使用 config 选项为模块提供配置，这可以通过使用特殊依赖项"模块"并调用其 module.config() 函数来完成。
urlArgs − 查询字符串参数用于获取使用 RequireJS 加载的所有资源。当浏览器或服务器配置不正确时，它用于缓存清除。
waitSeconds − 它指定在脚本加载前等待的秒数。默认值为"7"秒，"0"表示禁用超时。
packages − 它提供用于配置加载模块的 CommonJS 包。
context − 它提供上下文加载的名称，允许在页面中加载不同的模块。
deps − 它是在加载 RequireJS 之前将 Require 指定为配置对象时所需的依赖项数组。
callback −它在加载依赖项后执行一个函数，并且在加载 RequireJS 之前将 Require 指定为配置对象时是必需的。
xhtml − 当此选项设置为 true 时，它用于使用 document.createElementNS() 方法创建脚本元素。
scriptType − 它定义文档中使用的脚本类型属性的值。默认类型为"text/javascript"。
skipDataMain − 如果此选项设置为 true，则在加载模块时跳过 data-main 属性扫描。
RequireJS - AMD 模块
RequireJS 中的模块是一个作用域对象，在全局命名空间中不可用。因此，全局命名空间不会受到污染。RequireJS 语法允许更快地加载模块，而无需担心跟踪依赖项的顺序。您可以在同一页面中加载同一模块的多个版本。
定义模块
使用 define() 函数定义模块;相同的函数也用于加载模块。
简单的名称/值对
如果模块只是名称和值对的集合，那么您可以使用以下语法 −
define({
state: "karnataka",
city: "bangalore"
});
定义函数
模块还可以使用框架的函数，而无需依赖项。这可以通过使用以下语法来实现 −
define(function () {
//在这里进行设置工作
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() 函数可用于加载模块(模块可以是对象、函数、类或在加载模块后执行的代码)。您可以在同一页面中加载同一模块的不同版本。即使以不同的顺序加载，也可以按相同的顺序分析不同版本。
语法
define(['module1', 'module2'], function (module1, module2) {
//通过返回值定义模块值
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();
});
现在，再创建两个 js 文件，分别命名为 team.js 和 player.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 或 Java 使用的情况下，借助 Closure Compiler 将脚本文件组合在一起
将 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 参数)复制到输出文件夹 build(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,$) {
//$ 和 load_library 的相关代码
});
下表显示了jQuery 使用 RequireJS 指定其依赖项。
| Sr.No. | 类型和说明 |
|---|---|
| 1 | 使用 Shim Config
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 −
Node 的使用
要使用 node，您需要有 require('requirejs') 并将配置中的 require 函数移动到顶层 main.js 文件。
例如 −
var requirejs = require('requirejs');
requirejs.config({
//将模式模块加载到顶层 JS 文件
//通过将顶层 main.js require 函数传递给 requirejs
nodeRequire: require
});
requirejs(['name1', 'name2'],
function (name1, name2) {
//通过使用 requirejs 配置，name1 和 name2 被加载
//如果 node 的 require 没有找到这些，则会加载模块
}
);
使用 AMD 或 RequireJS 构建节点模块
您可以使代码模块与 RequireJS 和 Node 一起工作，而无需库的用户，然后使用 amdefine 包来完成这项工作。
例如 −
if (typeof define !== 'function') {
var define = require('amdefine')(module);
}
define(function(require) {
var myval = require('dependency');
//函数返回的值可以用作
//对 Node 可见的模块。
return function () {};
});
优化器作为 Node 模块
Node 模块使用 RequireJS 优化器作为优化方法，通过使用函数调用而不是使用命令行工具。
例如 −
var requirejs = require('requirejs');
var config = {
baseUrl: '../directory/scripts',
name: 'main',
out: '../build/main-built.js'
};
requirejs.optimize(config, function (buildResponse) {
//使用 buildResponse 指定模块的文本输出
//并加载构建的文件内容
//使用 config.out 获取优化的文件内容
var contents = fs.readFileSync(config.out, 'utf8');
}, function(err) {
//优化错误回调的代码
});
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 ({
//您可以配置从 lib 目录加载模块
baseUrl: 'lib',
paths: {
//mapping of package
dojo: 'http://sfoster.dojotoolkit.org/dojobox/1.7-branch/dojo'
}
}, [
//我们在这里使用的模块
'dojo/dom'
], function(dom) {
//使用 dom 模块中的 'byId' 方法
var mydojo = dom.byId('dojo_val')
mydojo.innerHTML = "The text is displaying via dojo/dom";
}
);
输出
在浏览器中打开 HTML 文件;您将收到以下输出 −
RequireJS - CommonJS
模块格式由 CommonJS 定义。它的定义并不提供与其他 JavaScript 环境同等的浏览器选项。因此，CommonJS 规范推荐 Transport 格式 和 异步 require。您可以轻松地将传统的 CommonJS 模块格式转换为与 RequireJS 兼容。但是，并非所有模块都会转换为新格式。下面列出了一些例外情况 −
- 带有条件代码以执行 require 调用的模块。
- 具有循环依赖关系的模块。
手动转换
可以使用以下语法将 CommonJS 模块手动转换为 RequireJS 格式 −
define(function(require, exports, module) {
//place CommonJS module content here
});
转换工具
CommonJS 模块可以使用 r.js project 转换工具转换为 RequireJS 格式，该工具内置于 r.js 文件中。您应该指定要转换的文件的路径和输出文件夹，如下所示 −
node r.js -convert path/to/commonjs/modules/ path/to/output
设置导出值
CommonJS 中的某些系统允许通过将导出值分配为 module.exports 来设置导出值，但 RequireJS 支持更简单的方法，即从传递给定义的函数返回值。这样做的好处是你不需要导出和模块函数参数，因此你可以将它们从模块定义中删除，如下所示−
define(function (require) {
var name = require('name');
//将模块定义为导出函数
return function () {
name.doSomething();
};
});
替代语法
指定依赖项的替代方法是通过依赖项数组参数 define()。但是，依赖项数组中名称的顺序应与传递给定义函数 define() 的参数顺序相匹配，如下所示 −
define(['name'], function (name) {
return function () {
name.doSomething();
};
});
从 CommonJS 包加载模块
要了解位置和包属性，请使用 RequireJS 通过设置 RequireJS 配置来加载 CommonJS 包中的模块。
优化工具
RequireJS 中有一个优化工具，它可以将模块定义组合成优化的包，以便浏览器交付。它以命令行工具的形式运行，因此您可以将其用作代码部署的一部分。
RequireJS - 插件
RequireJS 包含一小部分插件，允许将各种类型的资源作为依赖项加载。以下是 RequireJS 中可用的插件列表 −
- text
- domReady
- i18n
- CSS loading
text
text 插件用于异步加载基于文本的资源，主要用于在 JavaScript 文件中插入 HTML 内容。当您在任何 require 或 define 模块调用中使用 text! 前缀并将文件扩展名传递给插件时，即可加载它。与普通模块加载相比，text 插件使用 XHR 加载模块，不会将代码作为 script 标记添加到标题中。
文本文件资源可以作为依赖项包含在代码中，如 −
require(["mymodule", "text!mymodule.html", "text!mymodule.css"],
function(mymodule, html, css) {
//html 和 css 变量将分别是 mymodule.html 文件和 mymodule.css 文件的文本
}
);
domReady
RequireJS 可用于在 DOM 准备就绪之前加载脚本，并且只有脚本完全加载后，开发人员才能与 DOM 交互。有时，脚本可以在 DOM 准备就绪之前加载。因此，为了解决这个问题，RequireJS 提供了一种称为 DOMContentLoaded 事件的现代方法，该方法在 DOM 准备就绪后调用 domReady 函数。
require(['domReady'], function(domReady) {
domReady(function() {
//DOM 准备就绪时调用 domReady 函数
//在此函数中操作 DOM 节点是安全的
});
});
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: {
//设置 i18n 插件的配置
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);
}
