关于require.js的困惑

问题描述：

我一直在寻找require.js，我对如何将它用于我的小部件系统感到困惑。关于require.js的困惑

我的小部件系统基本上允许用户选择要查看哪个小部件存储在数据库中。

所以当用户在下一次访问时加载页面时，他/她只会看到他/她选择的小部件。实际上只加载html，显示小部件所需的javascript，而不是加载所有小部件的所有html和javascript，然后隐藏不需要的东西。

我感到困惑的是如何与require.js

做到这一点我应该动态地生成以下require.js代码？如果用户保存widget_1, widget_5 and widget_70，我假设我需要动态生成JavaScript像这样？

require(['widget_1','widget_5','widget_70'], function(w1, w5, w70){ 
    // then do something here? 
});

需求线，是否应该是基于SQL查询动态生成？

所以，如果他们只选择一个小部件，以节省下一次观看，他们将只能得到：

require(['widget_90'], function(w90){ 
    // then do something here? 
});

难道这就是我应该做的？

答

始终路径的定义到你的模块依赖过于频繁的图书馆，像下面：

<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

答

我认为：

您所定义的路径中的小部件需要配置的地方
你的小部件沙盒（可以不依赖运行）
您的应用程序可以在不小部件运行

您可以在服务器上生成数组并将其填充到js（例如作为内联脚本），然后使用某种app.ready事件，如下所示：

<script> 
require(/*array from the server*/, function(){ 
    // publish application ready event 
}); 
</script>

关于require.js的困惑

相关推荐