Question

我正在研究 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使用main.js的方法是probably more suited to a single page application。

我处理这种情况的方法是只在<script src="require.js" data-main="main"></script>文件中包含常见的站点范围的JS：

在每个页面上：

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

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

<强> main.js

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

<强> page1.html

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

<强> page1.js

define

以上示例只是处理它的几种方法之一。注意the difference between loading a plain JavaScript file and a module。

我遵循的经验法则是在require内部保留所有可重用的模块（或类，如果它更容易概念化），并使用{{1}}来获取这些模块，使用他们的方法或以某种方式与他们互动。

使用此模式几乎肯定需要使用domReady模块that is a separate plugin for RequireJS。例如，使用此instead of a ready function in jQuery，因为它允许模块在DOM准备就绪之前开始下载，这减少了代码执行的等待时间。

修改您可能希望在RequireJS回购中see another example of multi-page application

Answer 2

我最近在ASP.NET MVC应用程序中完成了使用自动构建优化设置RequrieJS的练习。有许多有用的博客文章，如西蒙的，这是一个很好的参考。从ASP.NET的角度来看，我在为多页ASP.NET应用程序配置RequireJS优化器方面发现的最有用的是Making RequireJS play nice with ASP.NET MVC。

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

<强> _Layout.cshtml

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

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

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

观点＆amp;泛音

要连接视图（在我的情况下是淘汰视图模型），an additional script fragment已添加到_Layout.cshtml的底部，如下所示

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

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

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

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

RequireJS如何处理多个页面和部分视图？

2 个答案: