单页应用程序 (JavaScript) 的架构
Posted
技术标签:
【中文标题】单页应用程序 (JavaScript) 的架构【英文标题】：Architecture for single page application (JavaScript) 【发布时间】：2013-02-21 03:51:16 【问题描述】：我想了解设计单页应用程序的整体架构（主要通过 javascript）
假设我有一个登录页面（用户名/密码），并且在成功验证后，我会看到主页。现在登录和主页屏幕实际上应该是一个页面的一部分。
我该如何设计这样的页面？
【问题讨论】：
这个问题太宽泛了，无法回答。你到底在哪里遇到问题？ 我只是想了解整体架构...... “设计单页应用程序的整体架构”——没有。您可以采取多种方法。 【参考方案1】：这是一个如此广泛的问题，以至于可以写整本书来详细回答。
基本上，您需要做的是使用 AJAX 而不是页面重新加载。您仍然需要连接到服务器以验证用户身份，但不是每次都重新加载整个页面，您需要对服务器进行 AJAX 调用，并根据登录是否成功更改部分内容在页面上（例如将登录按钮更改为“以用户 xxx 身份登录”消息等）。
【讨论】：
这是一种方法，但您不一定需要使用 AJAX 加载全部/部分页面。您可以在主页的 JavaScript 中拥有所有内容，然后使用 JSON 或其他方式加载数据。 是的@Juhana，这就是我所说的。 :) 我从来没有说过用 AJAX 加载完整/部分页面，更不用说它是必要的了。 :) 我说过要使用 AJAX 连接到服务器，然后更改页面的某些部分 - 所以我只能同意你的评论。 :) 非常感谢...我知道这是一个广泛的问题...但是请您解释一下在进行 AJAX 调用后，我可以如何部分更新页面内容...【参考方案2】：您可以从网上找到的现有解决方案中获得灵感：
ExtJS (MVC application architecture) Knockout (built upon the MVVM pattern) Backbone【讨论】：
【参考方案3】：我刚刚向 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 参数相关联。
定制功能包括：
自定义参数 自定义回调 参数的自定义客户端处理函数（用于序列化专用模型类型） 自定义预请求处理器 自定义请求后处理器【讨论】：
【参考方案4】：您可能想查看这个免费的Single Page App book。我在 Google 搜索“单页应用程序”时发现了它。
【讨论】：
【参考方案5】：如果您还没有看过，John Papa 在 Pluralsight 上开设了一门非常受欢迎的单页应用程序设计课程： http://www.pluralsight.com/training/Courses/TableOfContents/single-page-apps-jumpstart
它确实需要 Pluralsight 订阅，但您可以获得 10 天的免费试用期，以确认内容对您有价值。 （顺便说一句，我不隶属于 Pluralsight。）
【讨论】：
【参考方案6】：如果你更喜欢 MVC，我个人一直在使用 chaplinjs.org，它基于骨干网，而 hbs 则用于单页应用的荣耀。我对使用 websockets 而不是 long-polls 进行了一些修改，但它的可扩展性非常好，如果你熟悉 mvc，就很容易进入（你会遇到与卓别林相比更多的骨干问题）
【讨论】：
【参考方案7】：您需要如下 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。在模型文件中，您将连接到数据库并检查提供的凭据。在视图中，您会将侦听器绑定到控件。在控制器中，您将对用户按下的提交按钮做出反应。
【讨论】：
【参考方案8】：我使用 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");
我
【讨论】：
以上是关于单页应用程序 (JavaScript) 的架构的主要内容，如果未能解决你的问题，请参考以下文章