详解RequireJs官方使用教程

前端之家收集整理的这篇文章主要介绍了详解RequireJs官方使用教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

§ 1.使用

§ 1.1 加载 JavaScript 文件

RequireJS的目标是鼓励代码的模块化,它使用了不同于传统

app.js:

注意在示例中,三方库如jQuery没有将版本号包含在他们的文件名中。我们建议将版本信息放置在单独的文件中来进行跟踪。使用诸如volo这类的工具,可以将package.json打上版本信息,并在磁盘上保持文件名为"jquery.js"。这有助于你保持配置的最小化,避免为每个库版本设置一条path。例如,将"jquery"配置为"jquery-1.7.2"。

理想状况下,每个加载的脚本都是通过define()来定义的一个模块;但有些"浏览器全局变量注入"型的传统/遗留库并没有使用define()来定义它们的依赖关系,你必须为此使用shim config来指明它们的依赖关系。 如果你没有指明依赖关系,加载可能报错。这是因为基于速度的原因,RequireJS会异步地以无序的形式加载这些库。

§ 1.2 data-main 入口点

require.js 在加载的时候会检察data-main 属性:

你可以在data-main指向的脚本中设置模板加载 选项,然后加载第一个应用模块。.注意:你在main.js中所设置的脚本是异步加载的。所以如果你在页面中配置了其它JS加载,则不能保证它们所依赖的JS已经加载成功。例如:

对“cart”的依赖请求会从scripts/cart/main.js中加载,因为“main”是RequireJS默认的包主模块。对“store/util”的依赖请求会从scripts/store/util.js加载。

如果“store”包不采用“main.js”约定,如下面的结构:

则RequireJS的配置应如下:

减少麻烦期间,强烈建议包结构遵从“main.js”约定。

§ 4.2 多版本支持

如配置项一节中所述,可以在同一页面上以不同的“上下文”配置项加载同一模块的不同版本。require.config()返回了一个使用该上下文配置的require函数。下面是一个加载不同版本(alpha及beta)模块的示例(取自test文件中):

注意“require”被指定为模块的一个依赖,这就允许传递给函数回调的require()使用正确的上下文来加载多版本的模块。如果“require”没有指定为一个依赖,则很可能会出现错误

§ 4.3 在页面加载之后加载代码

上述多版本示例中也展示了如何在嵌套的require()中迟后加载代码

§ 4.4 Web Worker 支持

从版本0.12开始,RequireJS可在Web Worker中运行。可以通过在web worker中调用importScripts()来加载require.js(或包含require()定义的JS文件),然后调用require就好了。

你可能需要设置baseUrl配置项来确保require()可找到待加载脚本。

你可以在unit test使用的一个文件中找到一个例子。

§ 4.5 Rhino 支持

RequireJS可通过r.js适配器用在Rhino中。

§ 4.6 处理错误

通常的错误都是404(未找到)错误,网络超时或加载的脚本含有错误。RequireJS有些工具来处理它们:require特定的错误回调(errback),一个“paths”数组配置,以及一个全局的requirejs.onError事件。

传入errback及requirejs.onError中的error object通常包含两个定制的属性

requireType: 含有类别信息的字串值,如“timeout”,“nodefine”, “scripterror” requireModules: 超时的模块名/URL数组。

如果你得到了requireModules错,可能意味着依赖于requireModules数组中的模块的其他模块未定义。

§ 4.6.1 在IE中捕获加载错

Internet Explorer有一系列问题导致检测errbacks/paths fallbacks中的加载错 比较困难:

IE 6-8中的script.onerror无效。没有办法判断是否加载一个脚本会导致404错;更甚地,在404中依然会触发state为complete的onreadystatechange事件。

IE 9+中script.onerror有效,但有一个bug:在执行脚本之后它并不触发script.onload事件句柄。因此它无法支持匿名AMD模块的标准方法。所以script.onreadystatechange事件仍被使用。但是,state为complete的onreadystatechange事件会在script.onerror函数触发之前触发。

因此IE环境下很难两全其美:匿名AMD(AMD模块机制的核心优势)和可靠的错误检测。

但如果你的项目里使用了define()来定义所有模块,或者为其他非define()的脚本使用shim配置指定了导出字串,则如果你将enforceDefine配置项设为true,loader就可以通过检查define()调用或shim全局导出值来确认脚本的加载无误。

因此如果你打算支持Internet Explorer,捕获加载错,并使用了define()或shim,则记得将enforceDefine设置为true。参见下节的示例。

注意: 如果你设置了enforceDefine: true,而且你使用data-main=""来加载你的主JS模块,则该主JS模块必须调用define()而不是require()来加载其所需的代码。主JS模块仍然可调用require/requirejs来设置config值,但对于模块加载必须使用define()。

§ 4.6.2 require([]) errbacks

当与requirejs.undef()一同使用errback时,允许你检测模块的一个加载错,然后undefine该模块,并重置配置到另一个地址来进行重试。

一个常见的应用场景是先用库的一个CDN版本,如果其加载出错,则切换到本地版本:

Failed var FailedId = err.requireModules && err.requireModules[0]; if (FailedId === 'jquery') { //undef is function only on the global requirejs object. //Use it to clear internal knowledge of jQuery. //Any modules that were dependent on jQuery and in the middle of loading will not be loaded yet,//they will wait until a valid jQuerydoes load. requirejs.undef(FailedId); //Set the path to jQuery to local path requirejs.config({ paths: { jquery: 'local/jquery' } }); //Try again. Note that the above require callback //with the "Do something with $ here" comment will //be called if this new attempt to load jQuery succeeds. require(['jquery'],function () {}); } else { //Some other error. Maybe show message to the user. } });

使用“requirejs.undef()”,如果你配置到不同的位置并重新尝试加载同一模块,则loader会将依赖于该模块的那些模块记录下来并在该模块重新加载成功后去加载它们。

注意: errback仅适用于回调风格的require调用,而不是define()调用。define()仅用于声明模块。

§ 4.6.3 paths备错配置

上述模式(检错,undef()模块,修改paths,重加载)是一个常见的需求,因此有一个快捷设置方式。paths配置项允许数组值:

上述代码先尝试加载CDN版本,如果出错,则退回到本地的lib/jquery.js。

注意: paths备错仅在模块ID精确匹配时工作。这不同于常规的paths配置,常规配置可匹配模块ID的任意前缀部分。备错主要用于非常的错误恢复,而不是常规的path查找解析,因为那在浏览器中是低效的。

§ 4.6.4 全局 requirejs.onError

为了捕获在局域的errback中未捕获的异常,你可以重载requirejs.onError():

§ 5.加载插件

RequireJS支持加载器插件。使用它们能够加载一些对于脚本正常工作很重要的非JS文件。RequireJS的wiki有一个插件的列表。本节讨论一些由RequireJS一并维护的特定插件

§ 5.1 指定文本文件依赖

如果都能用HTML标签而不是基于脚本操作DOM来构建HTML,是很不错的。但没有好的办法在JavaScript文件中嵌入HTML。所能做的仅是在js中使用HTML字串,但这一般很难维护,特别是多行HTML的情况下。.

RequireJS有个text.js插件可以帮助解决这个问题。如果一个依赖使用了text!前缀,它就会被自动加载。参见text.js的README文件

§ 5.2 页面加载事件及DOM Ready

RequireJS加载模块速度很快,很有可能在页面DOM Ready之前脚本已经加载完毕。需要与DOM交互的工作应等待DOM Ready。现代的浏览器通过DOMContentLoaded事件来知会。

但是,不是所有的浏览器都支持DOMContentLoaded。domReady模块实现了一个跨浏览器的方法来判定何时DOM已经ready。下载并在你的项目中如此用它:

基于DOM Ready是个常规需求,像上述API中的嵌套调用方式,理想情况下应避免。domReady模块也实现了Loader Plugin API,因此你可以使用loader plugin语法(注意domReady依赖的!前缀)来强制require()回调函数在执行之前等待DOM Ready。当用作loader plugin时,domReady会返回当前的document:

注意: 如果document需要一段时间来加载(也许是因为页面较大,或加载了较大的js脚本阻塞了DOM计算),使用domReady作为loader plugin可能会导致RequireJS“超时”错。如果这是个问题,则考虑增加waitSeconds配置项的值,或在require()使用domReady()调用(将其当做是一个模块)。

总结

以上所述是小编给大家介绍的RequireJs官方使用教程。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的JavaScript相关文章