requirejs - 如何在服务器生成的值初始化时构建应用程序

Posted 2021-04-07

如果某些模块需要在页面中动态生成初始化数据，我对如何构建基于RequireJS的项目的最佳方法感兴趣。

为了澄清，我的问题，我需要在主要的html页面中的某个地方：

/* Following lines generated on server side so need to be in the html page*/
var initDataForModule1= [ data, generated, by, server];
var initDataForModule1= [ some, other, data, generated, by, server];

然后，我会有一些代码需要数据来完全设置UI（不需要加载）。例如，他们需要包含以下内容：

for(var i=0;i<initDataForModule1.length;i++)
     generateUIElementWithData(initDataForModule1[i]);

那么，我应该将UI设置代码放在一个模块中，然后以某种方式加载它并给它初始化日期？或者哪个是好的方法？我想的是：

<script src="/js/lib/require.js"></script>
<script>
    var initDataForModule1= [ data, generated, by, server];
    var initDataForModule1= [ some, other, data, generated, by, server];

    require(['module1'], function(module1){
       module1.initWithData(initDataForModule1);
    });

    ...
<script>

另外，哪个是放置我的requirejs.config()部分的好地方？

答案

从服务器端渲染javascript会遇到麻烦：混合语言几乎不可能重构，因为你最终会在JS文件中使用模板化标签（在验证/ linting期间也会标记）。它还会将您的前端和后端代码耦合在一起，从而降低项目的可移植性。

---

我决定使用"text" plugin进行AJAX调用并在运行时读取配置（你需要记住在你的r.js buildconfig文件中将inlineText设置为false），例如：

require(['main', 'someDep', 'text!../ajax/config'],
        function(App, someDep, configString) {
    App.start(dep, JSON.parse(configString);
});

其中"../ajax/config"是以JSON格式（*）提供配置的URL的路径。

（*）还有JSON plugin但是我无法使它工作并且“手动”解析JSON文本对我来说并不是一件容易的事。