Fatal编程技术网
  • asp.net-mvc/
  • Asp.net mvc RequireJS如何处理多个页面和部分视图？

Asp.net mvc RequireJS如何处理多个页面和部分视图？

asp.net-mvc requirejs

Asp.net mvc RequireJS如何处理多个页面和部分视图？,asp.net-mvc,requirejs,Asp.net Mvc,Requirejs,我正在调查《需求书》，但有些事情我不确定 我了解如何使用main.js加载所有依赖项。 但是我需要添加任何逻辑来处理main.js中的依赖项吗 对我来说，main.js看起来像是一个document.ready状态，当文档加载后，你在那里输入逻辑，对吗 对于其他页面和部分视图，我是否需要创建多个main.js，或者我是否可以从中的视图引用依赖项中加载的函数 我添加了一个将RequireJS与模块化HTML组件结合使用的示例。包括构建工具示例- 我也写了一篇关于这个的博客文章- 对所有内容只使用

我正在调查《需求书》，但有些事情我不确定

我了解如何使用
main.js
加载所有依赖项。 但是我需要添加任何逻辑来处理
main.js
中的依赖项吗

对我来说，
main.js
看起来像是一个document.ready状态，当文档加载后，你在那里输入逻辑，对吗

对于其他页面和部分视图，我是否需要创建多个
main.js
，或者我是否可以从
中的视图引用依赖项中加载的函数 我添加了一个将RequireJS与模块化HTML组件结合使用的示例。包括构建工具示例-

我也写了一篇关于这个的博客文章-

对所有内容只使用
main.js
的方法都很简单

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

每页：

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

<script>
    require(['scripts/page1']);
</script>
上面的例子只是处理它的几种方法之一。注意

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

使用这种模式几乎肯定需要使用domReady模块。例如，它允许模块在DOM准备就绪之前开始下载，从而减少代码执行的等待时间


编辑您可能希望在RequireJS repo中
我最近完成了在ASP.NET MVC应用程序中使用自动构建优化设置RequireJS的练习。有很多有用的博客文章，比如西蒙的，都是很好的参考。从ASP.NET的角度来看，在为多页ASP.NET应用程序配置RequireJS优化器方面，我发现最有用的方法之一是

利用已有的大量信息，我建立了自己的网站。所包含的大部分内容与已有的示例类似，但是为了解决部分视图和多页需要依赖性的问题，我采用了稍微不同的方法

\u Layout.cshtml


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


与现有示例最显著的区别是创建了一个自定义项，该自定义项公开了将配置数据传递给RequireJS的方法以及特定于引用页的require依赖项

因此，您的_Layout.cshtml将与您所期望的非常相似：


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





有关设计和选择的完整说明，请参见
感谢您的书面回答。我现在对如何使用RequireJS有了更好的理解。上面的方法在页面上非常有效，但是当页面通过ajax调用加载到div中时，模块没有加载。。有什么帮助吗？这种方法似乎并不完全可靠，因为内联脚本标记中的代码很可能在main.js中的代码之前执行，从而导致偶尔的失败。请参阅一个相关问题。这是正确的，因为回答这个问题时，我倾向于内联我的配置选项，或者可能是
main
可以作为依赖项列在
page1.js
中。不过，我需要测试这种方法。我同意其中的大部分，但我不会内联页面脚本的
require
调用。出于几个原因，这似乎是一种不好的做法。

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



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



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