RequireJS - 快速指南
原文： https://www.tutorialspoint.com/requirejs/requirejs_quick_guide.htm
RequireJS - 概述
RequireJS是一个JavaScript库和文件加载器，用于管理JavaScript文件和模块化编程之间的依赖关系。它还有助于提高代码的速度和质量。
RequireJS由David Mark开发，其初始版本v1.0.0于2009年发布。它是一个开源版本，2.3.3版本是其最近的稳定版本。
为什么要使用RequireJS？
它是MIT许可下的开源JavaScript库。
它提供异步模块加载。
它具有加载嵌套依赖项的能力。
如果您有许多小文件，则无需担心跟踪依赖关系顺序。
它为插件提供支持并加载多个JavaScript文件。
RequireJS的特点
它管理JavaScript文件之间的依赖关系，并提高代码的速度和质量。
它将模块组合并缩小为一个脚本，以优化体验。
它降低了大型应用程序中的代码复杂度
它在编译时从不同的模块收集不同的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
您也可以通过以下方式安装节点 -
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 - 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);
}
RequireJS - 快速指南的更多相关文章
- [译] MongoDB Java异步驱动快速指南
导读 mongodb-java-driver是mongodb的Java驱动项目. 本文是对MongoDB-java-driver官方文档 MongoDB Async Driver Quick Tour ...
- 转：C++ Boost/tr1 Regex(正则表达式)快速指南
C++ Boost/tr1 Regex(正则表达式)快速指南 正则表达式自Boost 1.18推出,目前已经成为C++11(tr1)的标准部分. 本文以Boost 1.39正则表达式为基础,应该广泛适 ...
- RequireJS 入门指南
RequireJS 入门指南 http://requirejs.org/ 简介如今最常用的JavaScript库之一是RequireJS.最近我参与的每个项目,都用到了RequireJS,或者是我向它 ...
- (译)快速指南：用UIViewPropertyAnimator做动画
翻译自:QUICK GUIDE: ANIMATIONS WITH UIVIEWPROPERTYANIMATOR 译者:Haley_Wong iOS 10 带来了一大票有意思的新特性,像 UIViewP ...
- JUnit5 快速指南
JUnit5 快速指南 version: junit5 1. 安装 2. JUnit 注解 3. 编写单元测试 3.1. 基本的单元测试类和方法 3.2. 定制测试类和方法的显示名称 3.3. 断言( ...
- 【SFA官方翻译】使用 Kubernetes、Spring Boot 2.0 和 Docker 的微服务快速指南
[SFA官方翻译]使用 Kubernetes.Spring Boot 2.0 和 Docker 的微服务快速指南 原创: Darren Luo SpringForAll社区 今天 原文链接:https ...
- Emacs 快速指南（中文翻译）
Emacs 快速指南 目录 1. 小结(SUMMARY) 2. 基本的光标控制(BASIC CURSOR CONTROL) 3. 如果 EMACS 失去响应(IF EMACS STOPS RESP ...
- 29 A Quick Guide to Go's Assembler 快速指南汇编程序：使用go语言的汇编器简介
A Quick Guide to Go's Assembler 快速指南汇编程序:使用go语言的汇编器简介 A Quick Guide to Go's Assembler Constants Symb ...
- Emacs 快速指南 - 原生中文手册
Emacs 快速指南 -折叠目录 1. 小结(SUMMARY) 2. 基本的光标控制(BASIC CURSOR CONTROL) 3. 如果 EMACS 失去响应(IF EMACS STOPS RES ...
随机推荐
- centos下导入mysql数据库
先进入mysql1.mysql -u root -p2.输入密码3.use 要导入的数据库名(没有就新建一个,使用create database test;命令新建,再use test;,再set n ...
- 文件上传与下载，PDF与Excel的操作
1.文件上传 前端代码 <el-upload class="upload-demo" ref="upload" :action="actionU ...
- dfs 全排列 使用交换——含重复元素和非重复元素
15. 全排列 中文 English 给定一个数字列表,返回其所有可能的排列. 样例 样例 1: 输入:[1] 输出: [ [1] ] 样例 2: 输入:[1,2,3] 输出: [ [1,2,3], ...
- dfs 排列组合——找所有子集（重复元素和不重复元素）
17. 子集 中文 English 给定一个含不同整数的集合,返回其所有的子集. 样例 样例 1: 输入:[0] 输出: [ [], [0] ] 样例 2: 输入:[1,2,3] 输出: [ [3], ...
- 通过PHP自带的$_SERVER判断 自动识别移动设备
因为站点需要,手机端和PC端分离,所以通过PHP自带的$_SERVER判断 自动识别移动设备 代码如下: <?php $agent = $_SERVER['HTTP_USER_AGENT']; ...
- Spring Cloud 之 Hystrix 知识点：隔离、熔断、降级
Hystrix 是隔离.熔断以及降级的一个框架. Hystrix 的隔离: Hystrix 会搞很多个小小的线程池,比如订单服务请求库存服务是一个线程池,请求仓储服务是一个线程池,请求积分服务是一个线 ...
- （待做例子）问题描述： el-tab 下有2个路由，其中第1个路由设置了 beforeRouteLeave，点击 el-tab 第2个tab时，样式直接跟过去了（预期结果是：样式不到第二个tab上，beforeRouteLeave允许跳转后才到第二个tab上）
解决: 经过以上分析,强制赋值应该在前次赋值而且DOM已经刷新完毕之后进行.可以使用$nextTick,以下是代码: handleTabClick (tab) { let name = this.fi ...
- DataNode 工作机制
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_35641192/article/d ...
- 异步链式编程—promise沉思录
一.promise的组成 1.task:promise要完成的任务: 2.result:处理完的数据: 3.status:状态: 4.fulfill.reject(对应catch) 5.Resolve ...
- count to any
A small computer game, puzzle, decryption