我想了解设计单页应用程序的整体架构（主要通过 JavaScript）
假设我有一个登录页面（用户名/密码），并且在成功验证后，我会看到主页。现在登录和主页屏幕实际上应该是一个页面的一部分。
我该如何设计这样的页面？
【问题讨论】：
标签： javascript design-patterns model-view-controller single-page-application javascript-framework
这是一个如此广泛的问题，以至于可以写整本书来详细回答。
基本上，您需要做的是使用 AJAX 而不是页面重新加载。您仍然需要连接到服务器以验证用户身份，但不是每次都重新加载整个页面，您需要对服务器进行 AJAX 调用，并根据登录是否成功更改部分内容在页面上（例如将登录按钮更改为“以用户 xxx 身份登录”消息等）。
【讨论】：
您可以从网上找到的现有解决方案中获得灵感：
【讨论】：
我刚刚向 SourceForge 添加了一个可能有帮助的项目。我已经开发这个库大约一年了，我认为它已经准备好迎接黄金时段了。该项目允许您从 JavaScript 中引用 asp.net MVC。
https://sourceforge.net/projects/peachajax/
此库生成用于 AJAX 操作的动态 JavaScript 代码。该库需要 jQuery。 例如，如果您在 Controller 中使用 Action Method 进行 AJAX 操作，您可以通过动态生成的 JavaScript 文件快速访问它，如下所示：
peach.ControllerName.ActionMethodName(parameter1, parameter2, parameter3); // javascript
映射的参数直接与 ActionMethods 参数相关联。
定制功能包括：
【讨论】：
您可能想查看这个免费的Single Page App book。我在 Google 搜索“单页应用程序”时发现了它。
【讨论】：
如果您还没有看过，John Papa 在 Pluralsight 上开设了一门非常受欢迎的单页应用程序设计课程： http://www.pluralsight.com/training/Courses/TableOfContents/single-page-apps-jumpstart
它确实需要 Pluralsight 订阅，但您可以获得 10 天的免费试用期，以确认内容对您有价值。 （顺便说一句，我不隶属于 Pluralsight。）
【讨论】：
如果你更喜欢 MVC，我个人一直在使用 chaplinjs.org，它基于骨干网，而 hbs 则用于单页应用的荣耀。我对使用 websockets 而不是 long-polls 进行了一些修改，但它的可扩展性非常好，如果你熟悉 mvc，就很容易进入（你会遇到与卓别林相比更多的骨干问题）
【讨论】：
您需要如下 index.html 页面
<html>
<body>
<div id="header"><!-- something cool here --></div>
<div id="login" class="view"> ... </div>
<div id="home" class="view" style="display:none;"> ... </div>
<div id="page3" class="view" style="display:none;"> ... </div>
<div id="page4" class="view" style="display:none;"> ... </div>
<div id="footer"><!-- something cool here --></div>
</body>
</html>
当应用程序加载时，除了登录视图之外，所有视图（具有视图类的 div）都被隐藏（显示：无）。登录视图上应该有登录表单，当它由用户提交时，它会启动 ajax 请求。当 ajax 成功应用程序隐藏登录页面并显示主页。
您可以采用下一种方式构建您的代码。对于每个模块，您将拥有模型、视图和控制器文件。
例如，对于登录模块，您可能有 loginModel.js、loginView.js、loginCtrl.js。在模型文件中，您将连接到数据库并检查提供的凭据。在视图中，您会将侦听器绑定到控件。在控制器中，您将对用户按下的提交按钮做出反应。
【讨论】：
我使用 jquery 设置了一个基本的 SPA，如下所示：
<script src="jquery.js"></script>
<script>
// SPA with JQuery? Hold my beer!
// Handlers
function LoadAbout(){
$("#content").load("about.txt");
$("#page").html("About");
}
function LoadHome(){
$("#content").load("home.txt");
$("#page").html("Home");
}
// Run on document ready
$(document).ready(function() {
// load the home page
LoadHome();
// Assign nav handlers
$("#about").click(LoadAbout);
$("#home").click(LoadHome);
});
</script>如果您需要将处理程序附加到模块内的元素，您可以像这样附加到导航处理程序中：
function LoadAbout(){
$("#content").load("about.txt", function(){
$("#contactusbutton").click(ContactUsClick);
});
$("#page").html("About");
}我
【讨论】：