将服务器数据传递给RequireJS模块的首选方法是什么?

bri*_*anc 24 javascript jquery requirejs asp.net-mvc-3

是否有一种在RequireJS模块中传递服务器数据的首选方法?我们当前的实现类似于以下代码片段; 使用'page'对象来保存任何服务器/动态数据并将其传递给主引导程序.(我们现在不想使用ajax来填充任何依赖项)

从服务器页面:

<script data-main="scripts/main" src="scripts/require-jquery.js"></script>
<script type="text/javascript">
  define("page", function () {
      return { guid: "<%=Guid.NewGuid() %>" };
    });
</script>
Run Code Online (Sandbox Code Playgroud)

main.js

require(["jquery", "jquery.alpha", "page"], function ($, alpha, page) {
    alpha.initialize(page);
});
Run Code Online (Sandbox Code Playgroud)

jquery.apha.js

define(["jquery", "page"], function ($, page) {
    return {
        initialize: function () {
            console.log(page.guid);
            //logs guid as expected
        }
    }
});
Run Code Online (Sandbox Code Playgroud)

Ben*_*ema 3

RequireJS 没有提及如何处理服务器数据,因为它是模块化 JavaScript 的一种方法。因此,在这方面没有事实上的标准,您可以根据需要将 RequireJS 与 json、ajax、php、嵌入式 xml 等结合起来。

两种方法

通常有两种方法可以解决此问题。

  1. 对“dao”或“服务”模块进行建模,该模块从服务器获取所需的数据并使其可供用户访问(与您当前的方法类似,请参阅下面的代码示例)
  2. 定义一个所有模块都可以访问的全局对象

一种方法向函数添加参数。

第二提供全球访问。这也需要您自己的初始化代码来开始获取数据。

这取决于个人喜好以及你拥有多少这样的“道”。如果您有多个 dao 模块,则可能会造成污染,因为您需要为每个 dao 模块提供一个新参数。在这种情况下,让它们全球化似乎更干净。

你的方法有问题

不过,您当前的方法存在一个问题,您将 Page 模块作为定义(使用define()而不是require()),因为为每个依赖于它的对象创建了一个定义模块。这可能意味着同一页面内的多个调用。而是使用:

// in seperate file page.js:
require([], function () {
  return { guid: "<%=Guid.NewGuid() %>" };
});
Run Code Online (Sandbox Code Playgroud)

这样 RequireJS 将页面识别为模块,因为它是一个单独的文件,并且每个页面只会发送到您的服务器一次。