我一直在研究 require.js，但我对如何将它用于我的小部件系统有点困惑。
我的小部件系统基本上允许用户选择他/她想要查看哪个小部件存储在数据库中。
因此，当用户下次访问时加载页面时，他/她将仅看到他/她选择的小部件。实际上，仅加载显示的小部件所需的 html、javascript，而不是加载所有小部件的所有 html 和 javascript，然后隐藏不需要的内容。
我感到困惑的是如何使用 require.js 来做到这一点
我应该动态生成下面的 require.js 代码吗？如果用户保存了 widget_1、widget_5 和 widget_70，我假设我需要像这样动态生成 JavaScript？
require(['widget_1','widget_5','widget_70'], function(w1, w5, w70){
// then do something here?
});
require 行，是应该根据 sql 查询动态生成的吗？
因此，如果他们只选择一个小部件来保存以供下次查看，他们只会得到:
require(['widget_90'], function(w90){
// then do something here?
});
这是我应该做的吗？
最佳答案
始终定义模块经常依赖的库的路径，如下所示:
<script data-main="scripts/main" src="scripts/require.js"></script>
文件:scripts/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 异步加载脚本，因此以下方法不会损害您的页面性能。
HTML View 中的模块 1
<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>
文件:scripts/widgets/module_1.js
define(["jQuery_1_7_2","underscore"], function($, _){
// Module functionality goes here
return {
init: function(){
// Module initialiser
}
}
});
HTML View 中的模块 2
<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>
文件:scripts/widgets/module_2.js
define(["jQuery_1_7_2","underscore"], function($, _){
// Module functionality goes here
return {
init: function(){
// Module initialiser
}
}
});
如果您不介意在 DOM 加载后初始化模块，您可以使用 controljs并更改脚本标签的 MIME 类型。我相信这不会对页面性能产生太大的影响。
关于javascript - 对 require.js 感到困惑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14194149/