html js require函数,RequireJs 高级用法

RequireJS支持加载CommonJS Packages目录结构中的模块,但是需要指定一些其他配置才能使其正常工作。具体来说,它支持以下CommonJS Packages功能:

软件包可以与模块名称/前缀关联。

程序包配置可以为特定程序包指定以下属性:name:程序包的名称(用于模块名称/前缀映射)

location:磁盘上的位置。位置相对于baseUrl配置值,除非它们包含协议或以反斜杠(/)开头。

main:某人对“ packageName”的要求时应使用的包内模块的名称。默认值为“ main”,因此仅当它不同于默认值时才指定它。该值是相对于包文件夹的。

重要笔记

尽管软件包可以具有CommonJS目录布局,但模块本身应采用RequireJS可以理解的模块格式。规则的例外:如果您使用的是r.js节点适配器,则这些模块可以采用传统的CommonJS模块格式。如果需要将传统的CommonJS模块转换为RequireJS使用的异步模块格式,则可以使用CommonJS转换工具。

一次只能在项目上下文中使用软件包的一个版本。您可以使用RequireJS多版本支持来加载两个不同的模块上下文,但是如果要在一个上下文中使用程序包A和B,并且它们依赖于程序包C的不同版本,那么这将是一个问题。将来可能会改变。

如果您使用《入门指南》中指定的类似项目布局,则Web项目的开始将类似于以下内容(基于Node / Rhino的项目是类似的,只需使用scripts目录的内容作为顶级项目目录):

项目目录/project.html

脚本/require.js

这是带有两个包cart和store的示例目录布局的外观:

项目目录/project.html

脚本/大车/main.js

店铺/main.js

util.js

main.js

require.js

project.html将具有如下脚本标记:

这将指示require.js加载脚本/main.js。main.js使用“ packages”配置来设置与require.js相关的软件包,在这种情况下,它们是源文件“ cart”和“ store”:

//main.js contents

//Pass a config object to require

require.config({

"packages": ["cart", "store"]

});

require(["cart", "store", "store/util"],

function (cart, store, util) {

//use the modules as usual.

});

“ cart”的需求意味着它将从scripts / cart / main.js加载,因为“ main”是RequireJS支持的默认主模块设置。将从scripts / store / util.js加载“ store / util”的需求。

如果“ store”包未遵循“ main.js”约定,则看起来更像这样:

项目目录/project.html

脚本/大车/main.js

店铺/store.js

util.js

main.js

package.json

require.js

然后,RequireJS配置将如下所示:

require.config({

packages: [

"cart",

{

name: "store",

main: "store"

}

]

});

为避免冗长,强烈建议始终使用在结构中使用“主要”约定的软件包。

如配置选项中所述,可以使用不同的“上下文”配置选项将模块的多个版本加载到页面中。require.config()返回一个使用上下文配置的require函数。这是一个加载两个不同版本的alpha和beta模块的示例(此示例摘自其中一个测试文件):

var reqOne = require.config({

context: "version1",

baseUrl: "version1"

});

reqOne(["require", "alpha", "beta",],

function(require, alpha, beta) {

log("alpha version is: " + alpha.version); //prints 1

log("beta version is: " + beta.version); //prints 1

setTimeout(function() {

require(["omega"],

function(omega) {

log("version1 omega loaded with version: " +

omega.version); //prints 1

}

);

}, 100);

});

var reqTwo = require.config({

context: "version2",

baseUrl: "version2"

});

reqTwo(["require", "alpha", "beta"],

function(require, alpha, beta) {

log("alpha version is: " + alpha.version); //prints 2

log("beta version is: " + beta.version); //prints 2

setTimeout(function() {

require(["omega"],

function(omega) {

log("version2 omega loaded with version: " +

omega.version); //prints 2

}

);

}, 100);

});

注意,“ require”被指定为模块的依赖项。这允许传递给函数回调的require()函数使用正确的上下文正确加载模块以支持多版本。如果未将“ require”指定为依赖项,则可能会出现错误。

上面“ Multiversion支持”部分中的示例显示了以后如何通过嵌套的require()调用来加载代码。

从0.12版开始,RequireJS可以在Web Worker中运行。只需在网络工作者中使用importScripts()来加载require.js(或包含require()定义的JS文件),然后调用require。

您可能需要设置baseUrl 配置选项,以确保require()可以找到要加载的脚本。

通过查看单元测试中使用的文件之一,可以看到其用法示例。

犀牛支持§4.5

RequireJS可以通过r.js适配器在Rhino中使用。有关更多信息,请参见r.js自述文件。

从RequireJS 2.1.16开始,RequireJS可以通过r.js适配器在Java 8+的JavaScript引擎Nashorn中使用。有关更多信息,请参见r.js自述文件。

错误的一般类别是脚本(未找到),网络超时或所加载脚本中的错误的404。RequireJS有一些用于处理它们的工具:特定于需求的errback,“ paths”数组配置以及全局的requirejs.onError。

传递给errbacks的错误对象和全局requirejs.onError函数通常将包含两个自定义属性:

requireType:具有一般分类的字符串值,例如“ timeout”,“ nodefine”,“ scripterror”。

requireModules:超时的模块名称/ URL的数组。

如果您在requireModules中遇到错误,则可能意味着未定义依赖于requireModules数组中的模块的其他模块。

Internet Explorer存在一系列问题,使得难以检测到错误/路径后备的加载失败:

script.onerror在IE 6-8中不起作用。无法知道加载脚本是否会生成404,更糟糕的是,即使在404情况下,它也会触发具有完整状态的onreadystatechange。

script.onerror确实可以在IE 9+中运行,但是存在一个错误,即在执行脚本后不立即触发script.onload事件处理程序,因此它不支持允许匿名AMD模块的标准方法。因此仍使用script.onreadystatechange。但是,在script.onerror函数启动之前,onreadystatechange会以完整状态启动。

因此,使用IE很难同时允许匿名的AMD模块和可靠的检测错误,匿名的AMD模块是AMD模块的核心优势。

但是,如果您知道在一个项目中使用define()声明其所有模块,或者它使用shim config为不使用define()的任何内容指定字符串导出,那么如果您设置了defineDefine配置值确实,加载器可以通过检查define()调用或填充程序的导出全局值的存在来确认脚本是否已加载。

因此,如果要支持Internet Explorer,捕获负载错误并通过直接define()调用或shim config获得模块化代码,请始终将forcedDefine设置为true。有关示例,请参见下一部分。

注意:如果您确实设置了forceDefine:true,并且使用data-main =“”来加载主JS模块,则该主JS模块必须调用define()而不是require()来加载所需的代码。JS主模块仍然可以调用require / requirejs来设置配置值,但是对于加载模块,它应该使用define()。

如果然后您还使用杏仁来构建没有require.js的代码,请确保使用insertRequire构建设置为主模块插入一个require调用-达到与最初的require()调用相同的目的,即调用data-main做。

当与requirejs.undef()一起使用时,Errbacks将允许您检测模块是否无法加载,取消定义该模块,将配置重置到另一个位置,然后重试。

一个常见的用例是使用CDN托管的库版本,但是如果失败,请切换到本地加载文件:

requirejs.config({

enforceDefine: true,

paths: {

jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min'

}

});

//Later

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

//Do something with $ here

}, function (err) {

//The errback, error callback

//The error has a list of modules that 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 jQuery

//does 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()`,如果您稍后设置其他配置并尝试加载相同的模块,则加载器仍会记住哪些模块需要该依赖关系,并在新配置的模块加载时完成加载。

注意:errbacks仅适用于回调样式的require调用,而不适用define()调用。define()仅用于声明模块。

上面的用于检测负载故障,对模块进行undef(),修改路径和重新加载的模式是一个足够常见的请求,它也有一个简写。路径配置允许使用数组值:

requirejs.config({

//To get timely, correct error triggers in IE, force a define/shim exports check.

enforceDefine: true,

paths: {

jquery: [

'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min',

//If the CDN location fails, load from this location

'lib/jquery'

]

}

});

//Later

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

});

上面的代码将尝试CDN位置,但是如果失败,则退回到本地lib / jquery.js位置。

注意:路径回退仅适用于确切的模块ID匹配。这与可应用于模块ID前缀段的任何部分的常规路径配置不同。后备的目标更多是针对异常错误的恢复,而不是通用的路径搜索路径解决方案,因为它们在浏览器中效率低下。

要检测本地错误未捕获的错误,可以覆盖requirejs.onError():

requirejs.onError = function (err) {

console.log(err.requireType);

if (err.requireType === 'timeout') {

console.log('modules: ' + err.requireModules);

}

throw err;

};

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值