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.doMo
arawesome();
};
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亦能兼容Commo
njs语法。通过AMD的define
函数包装Commo
njs模块,你也可以再AMD中拥有
一个Commo
njs模块,例如:
<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();
};
});
fig({
paths: {
jquery: [
'//cd
njs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',
'lib/jquery'
]
}
});
},
forceLighting: function() {
},
forceRun: function() {
}
});
BaseUrl
通常,在进行的单元测试时,你的源代码可能放在类似src的文件夹里,同时,可能你的测试放在类似tests的文件夹里。这可能比较难让测试配置正确。
比如我们在tests文件夹有一个index.html文件,并需要本地加载tests/spec/*.js。并假设,所有源代码在为src/js/*.js,并有一个main.js在该文件夹。
index.html中,不在加载require.js时设置data-main。
vendor/require.js">
你可以发现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配置来解决这一问题。
fig({
paths: {
"backbone": "
vendor/backbone",
"under
score": "
vendor/under
score"
},
shim: {
"backbone": {
deps: [ "under
score" ],
exports: "Backbone"
},
"under
score": {
exports: "_"
}
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。