始终路径的定义到你的模块依赖过于频繁的图书馆,像下面:
<script data-main="scripts/main" src="scripts/require.js"></script>
文件:脚本/ main.js
require.config({
paths: {
jQuery_1_7_2: 'lib/jquery.1.7.2',
underscore: 'lib/underscore',
.....
.....
}
});
注:您需要在模块中包含库并将其作为对象返回,如下所示:
文件:lib/jquery.1.7.2。JS
define([ 'lib/jquery/jquery.1.7.2.min' ], function() {
return jQuery.noConflict(true);
});
相同的方法可以遵循为不遵循模块化方法[AMD规格]
注其他库:定义库模块的上述步骤可以通过使用shim feature
避免
由于您的页面是动态的,您永远不会知道将加载哪些模块。
您可以调用多个require()调用来加载模块。由于requirejs异步加载脚本,下面的方法不会损害您的页面性能。
模块-1与在HTML视图
<html>..
<div id="module_1">
//contents of module 1
</div>
<script type="text/javascript">
require(["scripts/widgets/module_1"], function(module_1){
module_1.init();
})
</script>
..</html>
文件:脚本/部件/ module_1.js
define(["jQuery_1_7_2","underscore"], function($, _){
// Module functionality goes here
return {
init: function(){
// Module initialiser
}
}
});
模块2:在HTML视图
<html>..
<div id="module_2">
//contents of module 2
</div>
<script type="text/javascript">
require(["scripts/widgets/module_2"], function(module_2){
module_2.init();
})
</script>
..</html>
文件:脚本/部件/ module_2.js
define(["jQuery_1_7_2","underscore"], function($, _){
// Module functionality goes here
return {
init: function(){
// Module initialiser
}
}
});
如果你不介意的初始化DOM加载模块后,您可以使用controljs,改变MIME类型的脚本标签。我相信这对网页性能没有太大的影响。
+1有一件事,imho最好在[shim配置的init函数](http://requirejs.org/docs/api.html#config-shim)中定义jQuery.noConflict()。 – asgoth
也许我现在太过分了,但我看不出这是如何回答我的问题的。 – oshirowanen
@asgoth:我在该代码片段的下面留下了一个提示垫片:-) – nairvijays