1

我现在正在做这个选择，我不知道我应该问什么样的问题。我认为有效的一个：

  • 我需要搜索引擎优化/本地可抓取页面吗？如果是这样，请坚持使用 MVC4。

我不确定的一个问题是对性能的影响 - 我认为这是有效的：

  • 初始加载时间很重要吗？如果是这样，请坚持使用 MVC4（如 stackoverflow）。

应该问哪些其他问题可以帮助开发人员指出正确的方向？

PS - 如果以不符合质量标准的方式提出这个问题，我将不胜感激任何帮助修改它以便它这样做。

4

2 回答 2

2

最近有人问我，我必须成为做出同样决定​​的决策小组的一员。这对我们来说很重要——

  • 有多少将要工作的开发人员熟悉 MVC4 和 Javascript？
  • 性能在多大程度上是个问题？（单页应用真的有必要吗？）
  • 我们将使用的数据有多大？（请记住，非常大的数据集在水疗中心不能很好地工作）
  • Durandal 需要使用许多不同的库 - 必须学习每种不同的用法是否可以？每个库在其自身方面都很重要，您必须知道何时以及为什么要使用每个库。
  • Angular 的方式非常固定，对于来自 c# 和 .net 的新 javascript 开发人员来说更难理解，你愿意提供时间学习吗？
  • 最后，您针对的是哪些浏览器？Ie6+ 与 mvc4 和 durandal 配合得很好，角度需要一些按摩。

希望这有帮助！

于 2013-09-09T01:30:43.247 回答
2

为什么不结合两全其美？SPA 和直 MVC！

我也在 durandal、sammyjs、angular 框架中研究了很多时间。然后我决定使用 sammy.js 进行路由。这样我仍然可以使用简单的 MVC 4 razor 视图引擎在服务器端生成我的视图。尽管使用敲除在客户端生成 html 和绑定会更高效，但在服务器端执行此操作让我感觉更安全。

但是当然你必须处理那些hashbangs？因此，我开始花更多时间研究 history.js（或 HTML 5 历史 API）。然后我就明白了。

我的解决方案

SPA 的重要组成部分是什么？好吧，事实上，您的 layout.cshtml 只加载了一次。从那时起，您只想从服务器加载内容并将其显示在主要内容 div 中。它需要是json吗？不，事实上它没有。

默认情况下，MVC 4 控制器返回一个 html 字符串。那么，如果您的 <a href=""></a> 标签会被一个简单的 jQuery 脚本截获以从控制器获取 html 字符串并将其加载到 div 中，该怎么办？

我更进一步，在 HTML 5 历史 API 之上编写了自己的 jQuery 引擎。我只是拦截每个被点击的链接并从其 href 属性加载内容，然后将其放入所需的 div 中。此外，我使用历史 API pushSate 推送 URL。这种方法的另一大优点是，当禁用 javascript 或不支持 HTML 5 时，您的应用程序不会损坏。

我的视图有以下布局页面：

@{
    Layout = Request.IsAjaxRequest() ? null : "~/Views/Shared/_Layout.cshtml";
}

这样，当禁用 javascript 或不支持 html 5 时，视图将呈现在 _Layout.cshtml 内。

这也允许 URL 链接。该链接将点击地址栏并将被路由到控制器。由于这不是 ajax 请求，因此视图将使用 _Layout.cshtml 呈现。

但是，一旦您的 _Layout.cshtml 和 javascript 正确加载一次，所有 <a href=""></a> 将被拦截，由 AJAX（部分布局 = null）加载到内容 div 并推送 url地址栏。所以看起来你在那个位置，但实际上你不在。让事情变得更加敏感和高效只是一种错觉。等等，直接 MVC 中的 SPA。

最小路由代码将是这样的

拦截链接

$('.spalink').click(function () {
        $.ajax({
            url: this.href,
            success: function (content) {
                $('body>#content').css({ opacity: 0 });
                $('body>#content').html(content);
                $('body>#content').animate({ opacity: 1 }, 300, 'swing');
                history.pushState({ state : 'spa' }, null, this.href);
            }
        });          
        return false;
    });

BACK 和 FORWARD 事件

window.addEventListener("popstate", function (e) {
    if (e.state != null) {        
        $.ajax({
                url: location.href,
                success: function(content) {
                    $('body>#content').css({ opacity: 0 });
                    $('body>#content').html(content);
                    $('body>#content').animate({ opacity: 1 }, 300, 'swing');
                },
                cache: false
            });
            return false;
        }
    });
    return true;
 }

PS：如果您不想编写自己的 SPA 引擎，请查看 history.js（开箱即用） Ajaxify on History.js on top of HTML 5 history API

于 2013-09-09T13:48:22.640 回答