如何RequireJS多页和局部视图的工作？如何RequireJS多页和局部视图的工作？(How d

我期待到RequireJS但我不确定一些事情。

我明白，我怎么可以加载所有的依赖与main.js 。但我需要添加任何逻辑与那些依赖于工作main.js ？

对我来说， main.js似乎是一个的document.ready状态，您输入的逻辑在那里当文件已加载，对不对？

而对于其他的页面和局部视图，我需要创建多个main.js或者我可以只引用加载函数依赖从视图一个<script>的例子吗？

Answer 1:

更新 -我已经添加使用RequireJS模块化HTML组件的例子。构建工具例如包括- https://github.com/simonsmith/modular-html-requirejs

我也写了这一篇博客文章- http://simonsmith.io/modular-html-components-with-requirejs/

只是使用的方法main.js的一切也许更适合单页的应用程序。

我已经处理这种情况的方法是只包括在公共站点范围的JS main.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与自己的依赖等，然后使用require抓住这些模块，用自己的方法或互动与他们以某种方式。

使用这种模式几乎肯定会要求使用domready中模块的即是RequireJS一个单独的插件。使用此jQuery中，而不是一个现成的功能，例如，因为它允许模块开始下载前的DOM准备好这减少了等待您的代码来执行。

编辑您可能希望看到多页应用的另一个例子在RequireJS回购

Answer 2:

我最近通过与ASP.NET MVC应用程序自动构建优化设置RequrieJS的锻炼了。有很多有用的博客文章，如西蒙的是一个伟大的参考。从ASP.NET角度来看，最有用的我在配置RequireJS优化了多页的ASP.NET应用程序中的短语找到了制作RequireJS发挥不错的ASP.NET MVC 。

已经使用了大量信息在那里我已经把我自己在GitHub上ASP.NET MVC RequireJS例子。许多包含什么类似的例子已经摆在那里，但是解决的部分景色的问题，多页需要依赖我已经采取了略有不同的方法。

_Layout.cshtml

从现有的例子中最显着的差别是一个自定义的创建RequireViewPage暴露的方法来传递配置数据RequrieJS以及参考页特定需要的依赖关系。

所以，你的_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.js然后允许视图特定依赖性经由数据属性进行接线。

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

对于设计和选择的一个完整的交代，看到GitHub上的自述

文章来源: How does RequireJS work with multiple pages and partial views?