0

我一直在看，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?
});

require 行，是否应该基于 sql 查询动态生成？

因此，如果他们只选择一个小部件保存以供下次查看，他们将只会得到：

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

那是我应该做的吗？

4

2 回答 2

2

始终定义模块经常依赖的库的路径，如下所示：

<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 功能可以避免上述定义库模块的步骤

由于您的页面是动态的，因此您永远不知道将加载哪些模块。

您可以调用多个 require() 调用来加载模块。由于 requirejs 异步加载脚本，因此以下方法不会损害您的页面性能。

在 HTML 视图中的 Module-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>

文件：脚本/小部件/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 类型。我相信这不会对页面性能产生太大影响。

于 2013-01-07T12:14:51.813 回答
0

我假设：

  • 您在某处的要求配置中定义了小部件的路径
  • 您的小部件是沙盒的（可以在没有依赖项的情况下运行）
  • 您的应用程序可以在没有小部件的情况下运行

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

<script>
require(/*array from the server*/, function(){
    // publish application ready event
});
</script>
于 2013-01-07T10:48:41.040 回答