频道导航

require.js深入了解 require.js特性介绍

2018-12-31 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了require.js深入了解 require.js特性介绍，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

现在，Require.js是我最喜欢的Javascript编程方式。它可以使代码化整为零，并易于管理。而Require.js Optimizer能帮助我们将一个较大的应用分散成多个较小的应用，并通过依赖串联起来，最后在编译打包时合并起来。这些原因促使我们使用require.js。

那么，让我们来看看require.js有什么牛逼的特性吧！

与CommonJS兼容

AMD (异步模块定义规范) 出现自CommonJS工作组。CommonJS旨在创造Javascript的生态系统。 CommonJS的一个重要部分是transport/c，即AMD的前身，而require.js则是该规范的一个实现。

CommonJS模块和AMD模块的语法差异，主要由于AMD需要支持浏览器的异步特性。而CommonJS模块则需要同步进行，例如：

代码如下:

exports.asplode = function() {

someModule.doTehAwesome();

anotherModule.doMoarAwesome();

};

AMD模块是异步加载模块的，故而模块定义需要一个数组作为第一个参数，而模块加载完毕后回调的函数作为第二个参数传入。
<div class="codetitle"><a style="CURSOR: pointer" data="85898" class="copybut" id="copybut85898" onclick="doCopy('code85898')"> 代码如下:

<div class="codebody" id="code85898">
define( [ "someModule"],function( someModule ) {
return {
asplode: function() {
someModule.doTehAwesome();

// 这将会异步执行
require( [ "anotherModule" ],function( anotherModule ) {
anotherModule.doMoarAwesome();
});
}
};
});

然而，在require.js中AMD亦能兼容CommonJS语法。通过AMD的define函数包装CommonJS模块，你也可以再AMD中拥有一个CommonJS模块，例如：
<div class="codetitle"><a style="CURSOR: pointer" data="63872" class="copybut" id="copybut63872" onclick="doCopy('code63872')"> 代码如下:

<div class="codebody" id="code63872">
define(function( require,exports,module )
var someModule = require( "someModule" );
var anotherModule = require( "anotherModule" );

someModule.doTehAwesome();
anotherModule.doMoarAwesome();

exports.asplode = function() {
someModule.doTehAwesome();
anotherModule.doMoarAwesome();
};
});

实际上，require.js通过函数.toString解释回调函数的模块内容，找到其正确的依赖，将其变成一个通常的AMD模块。需要注意，如果你使用这种方式编写模块，可能会发生与其他AMD加载器不兼容的情况，因为这违背了AMD规范，但它能很好的理解这种格式的写法。

这里发生了什么，require.js实际上做了function.toString的回调函数解析模块的内容，找到正确的依赖，就像它，如果它是一个正常的AMD模块。重要的是要注意，如果您选择这样写模块，他们将最有可能不兼容与其他AMD模块装载机，因为这违背了AMD规范，但它是很好的了解这个格式存在！

CDN回退

另一个隐藏的require.js瑰宝是，其支持当CDN加载不正确时，回退加载本地相应的库。我们可以通过require.config达到这个目的：

代码如下:

没有依赖？对象字面量？没问题！

当你写一个没有任何依赖的模块，并且只是返回一个对象包含一些功能函数，那么我们可以使用一种简单的语法：

代码如下:

},
forceLighting: function() {

},
forceRun: function() {

}
});

很简单，也很有用，如果该模块仅仅是功能的集合，或者只是一个数据包。

循环依赖

在一些情况中，我们可能需要模块moduleA和moduleA中的函数需要依赖一些应用。这就是循环依赖。

代码如下:

得到模块的地址

如果你需要得到模块的地址，你可以这么做……

代码如下:

BaseUrl

通常，在进行的单元测试时，你的源代码可能放在类似src的文件夹里，同时，可能你的测试放在类似tests的文件夹里。这可能比较难让测试配置正确。

比如我们在tests文件夹有一个index.html文件，并需要本地加载tests/spec/*.js。并假设，所有源代码在为src/js/*.js，并有一个main.js在该文件夹。

index.html中，不在加载require.js时设置data-main。

代码如下:

你可以发现main.js被加载。然而由于没有设置data-main，所欲我们需要制定一个baseUrl。而当使用data-main时，baseUrl会根据其设定的文件来自动设置。

在这里，你可以看到main.js被载入。然而，由于它没有加载数据主要脚本标记，那么您必须指定一个base即可。当数据主要是用于baseURL时从主文件中的位置推断。通过自定义baseUrl我们可以很容易将测试代码和应用代码分开存放。

JSONP

我们可以这样处理JSONP终端：

代码如下:

对于非AMD库，使用shim来解决

在很多请款下，我们需要使用非AMD库。例如Backbone和Underscore并未适应AMD规范。而jQuery实际上只是将自己定义成一个名为jQuery全局变量，所以对于jQuery什么都不用做。

幸运的是，我们可以使用shim配置来解决这一问题。

代码如下:

score": "vendor/underscore" }, shim: { "backbone": { deps: [ "underscore" ], exports: "Backbone" }, "underscore": { exports: "_" } } });

原文链接：https://www.f2er.com/js/57857.html

require.js 特性介绍

上一篇：js设置cookie过期当前时间减去一秒下一篇：容易造成JavaScript内存泄露几个方

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获

事件冒泡和事件捕获起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...

作者：前端之家时间：2021-02-22

搞懂js中小数运算精度问题原因及解决办法

js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...

作者：前端之家时间：2021-02-22

搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

什么是跨域跨域：广义的跨域包含一下内容： 1.资源跳转（链接跳转，重定向跳转，表单提...

作者：前端之家时间：2021-02-22

前端对base64编码的理解，原生js实现字符base64编码

@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...

作者：前端之家时间：2021-02-22

搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式

搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ：的缩写，说都能直接说出来：模型，：视图...

作者：前端之家时间：2021-02-22

js判断浏览器是否支持webGL

起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。在各种浏览器上运行...

作者：前端之家时间：2021-02-14

js判断undefined和null

js判断undefined js判断null js判断null和undefined

作者：前端之家时间：2021-02-14

将文字自动转为banner打印形式的工具

http://patorjk.com/software/taag/

作者：前端之家时间：2021-02-14

聊一聊 bootstrap 的轮播图插件

今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...

作者：前端之家时间：2021-02-14

js实现图片无缝循环跑马灯

html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...

作者：前端之家时间：2021-02-14

最新文章