41

我正在研究RequireJS，但我不确定某些事情。

我了解如何使用main.js. 但是我是否需要添加任何逻辑来处理这些依赖项main.js？

对我来说，main.js这似乎是一个 document.ready 状态，当文档加载时你在那里输入逻辑，对吧？

对于其他页面和部分视图，我是否需要创建多个main.js，或者我可以只引用来自视图的依赖项中的加载函数<script>吗？

4

2 回答 2

93

更新- 我添加了一个将 RequireJS 与模块化 HTML 组件一起使用的示例。包含构建工具示例 - https://github.com/simonsmith/modular-html-requirejs

我还写了一篇关于此的博客文章 - http://simonsmith.io/modular-html-components-with-requirejs/

仅main.js用于所有内容的方法可能更适合单页应用程序。

我处理这种情况的方式是只在main.js文件中包含通用的站点范围的 JS：

在每一页上：

<script src="require.js" data-main="main"></script>

main.js

require.config({
// config options
});

require(['jquery', 'common/ajaxLoader', 'common/someOtherModule'], function($, ajax, otherModule) {
    // Modules that do stuff on every page are instantiated here 
});

page1.html

<script>
    require(['scripts/page1']);
</script>

page1.js

require(['jquery', 'page1Module'], function($, module){
    // page1 specific stuff here
});

上面的例子只是处理它的几种方法之一。请注意加载纯 JavaScript 文件和加载模块之间的区别。

我遵循的一条经验法则是将所有可重用的模块（或类，如果它更容易概念化的话）define与它们自己的依赖项等一起保存在 a 中，然后require用来抓取这些模块，使用它们的方法或以某种方式与它们交互。

使用这种模式几乎肯定需要使用 domReady 模块，它是 RequireJS 的一个单独插件。例如，在 jQuery中使用它而不是 ready 函数，因为它允许模块在 DOM 准备好之前开始下载，从而减少了代码执行的等待时间。

编辑您可能希望在 RequireJS 存储库中看到另一个多页面应用程序示例

于 2012-05-30T13:10:02.873 回答
3

我最近完成了在 ASP.NET MVC 应用程序中使用自动构建优化设置 RequrieJS 的练习。有很多有用的博客文章，例如 Simon 的文章，都是很好的参考。从 ASP.NET 的角度来看，我发现在为多页 ASP.NET 应用程序配置 RequireJS 优化器方面最有用的方法之一是让 RequireJS 与 ASP.NET MVC 配合得很好。

使用已有的大量信息，我在 GitHub 上建立了我自己的 ASP.NET MVC RequireJS 示例。包含的大部分内容与已经存在的示例类似，但是为了解决部分视图和多页面需要依赖项的问题，我采取了稍微不同的方法。

_Layout.cshtml

与现有示例最显着的区别是创建了一个自定义RequireViewPage，它公开了将配置数据传递给 RequrieJS 的方法以及参考页面特定的 require 依赖项。

所以你的 _Layout.cshtml 看起来很像你所期望的：

<head>
    ...
    @RenderModuleConfig()
    <script type="text/javascript" src="@Url.Script("vendor/require.js")" data-main="main"></script>
</head>
<body>
    ...

视图和部分

为了连接视图（在我的情况下是淘汰视图模型），已在 _Layout.cshtml 的底部添加了一个额外的脚本片段，如下所示

    ...
    @RenderSection("scripts", required: false)
    <script type="text/javascript">require(['main'], function () { require(['lib/knockout/knockout.require']); });</script>
</body>

这将确保对于任何视图依赖项，主模块已被加载（假设 main 的依赖项已在其中定义main.js，然后允许通过数据属性连接视图特定的依赖项。

<div data-require="@MainModule"> ... </div>
<div data-require="@Module("address")"> ... </div>
<div data-require="view\home\index\model"> ... </div>

有关设计和选择的完整说明，请参阅GitHub 上的 README

于 2014-02-19T14:25:03.333 回答