单页应用程序架构 (JavaScript)

Architecture for single page application (JavaScript)

提问by testndtv

I wanted to understand the overall architecture for designing single page application (mainly through JavaScript)

我想了解设计单页应用程序的整体架构（主要是通过 JavaScript）

Let's say I have a login page (Usernam/Password) and on successful authentication, I am shown the homepage. Now both the login and homepage screens should actually be part of a single page.

假设我有一个登录页面（用户名/密码），并且在成功验证后，我会看到主页。现在登录和主页屏幕实际上应该是单个页面的一部分。

How can I design such kind of page?

我怎样才能设计这样的页面？

采纳答案by rsp

This is such a broad question that entire books could be written to answer it in detail.

这是一个如此广泛的问题，以至于可以写整本书来详细回答它。

Basically what you need to do is to use AJAX instead of page reloads. You still need to connect to the server to authenticate users but instead of reloading the entire page every time you do it, you need to make an AJAX call to your server and depending on whether the login was successful or not change some parts of the content on the page (like changing the Login button to a "Logged in as user xxx" message etc.).

基本上你需要做的是使用 AJAX 而不是页面重新加载。您仍然需要连接到服务器以对用户进行身份验证，但不是每次都重新加载整个页面，而是需要对服务器进行 AJAX 调用，并根据登录成功与否更改某些部分内容在页面上（例如将登录按钮更改为“以用户 xxx 身份登录”消息等）。

回答by Ting

If you haven't seen it already, John Papa has a very popular course on designing Single Page Applications on Pluralsight: http://www.pluralsight.com/training/Courses/TableOfContents/single-page-apps-jumpstart

如果您还没有看过，John Papa 有一个关于在 Pluralsight 上设计单页应用程序的非常受欢迎的课程：http://www.pluralsight.com/training/Courses/TableOfContents/single-page-apps-jumpstart

It does require a Pluralsight subscription, but you can get a 10 day free trial to confirm the content is valuable to you. (I am not affiliated with Pluralsight, btw.)

它确实需要订阅 Pluralsight，但您可以获得 10 天的免费试用，以确认内容对您有价值。（顺便说一句，我不隶属于 Pluralsight。）

回答by user811216

You may want to look up this free Single Page App book. I found it when I Googled "Single Page Apps".

您可能需要查找这本免费的单页应用程序书籍。我在谷歌搜索“单页应用程序”时找到了它。

回答by leaf

You may take inspiration from existing solutions that you can find over the web :

您可以从可以通过网络找到的现有解决方案中获得灵感：

• ExtJS (MVC application architecture)
• Knockout (built upon the MVVM pattern)
• Backbone

• ExtJS（MVC 应用架构）
• 淘汰赛（建立在 MVVM 模式之上）
• 骨干

回答by Justin Jones

I Just added a project to SourceForge that may help. I've been developing this library for about a year now, and I think it's ready for prime-time. This project allows for you to reference asp.net MVC from within JavaScript.

我刚刚向 SourceForge 添加了一个可能有帮助的项目。我已经开发这个库大约一年了，我认为它已经为黄金时段做好了准备。该项目允许您从 JavaScript 中引用 asp.net MVC。

https://sourceforge.net/projects/peachajax/

https://sourceforge.net/projects/peachajax/

This library generates dynamic JavaScript code to use for AJAX operations. The library requires jQuery. For example, if you use an Action Method within a Controller for AJAX operation, you can quickly access this via the dynamically generated JavaScript file as follows:

该库生成用于 AJAX 操作的动态 JavaScript 代码。该库需要 jQuery。例如，如果您在控制器中使用 Action Method 进行 AJAX 操作，您可以通过动态生成的 JavaScript 文件快速访问它，如下所示：

peach.ControllerName.ActionMethodName(parameter1, parameter2, parameter3); // javascript

The mapped parameters are directly associated with the ActionMethods parameters.

映射的参数直接与 ActionMethods 参数相关联。

Customization features include:

自定义功能包括：

• Custom parameters
• Custom callbacks
• Custom client-side processing functions for parameters (for serializing specialized model types)
• Custom pre-request processors
• Custom post-request processors

• 自定义参数
• 自定义回调
• 参数的自定义客户端处理函数（用于序列化专用模型类型）
• 自定义预请求处理器
• 自定义请求后处理器

回答by sent1nel

If you're more an MVC guy, I personally have been using chaplinjs.org, which is based on backbone, and hbs for single-page app glory. I have a few modifications to use websockets instead of long-polls, but it's pretty quite extendible, and if you're familiar with mvc, easy enough to get into (you'll run into more problems with backbone than with Chaplin)

如果你更喜欢 MVC，我个人一直在使用 chaplinjs.org，它基于主干和 hbs 来实现单页应用程序的荣耀。我有一些修改来使用 websockets 而不是长轮询，但它非常可扩展，如果你熟悉 mvc，很容易进入（你会遇到更多的问题与主干比卓别林）

回答by yurin

You need index.html page like below

您需要如下所示的 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>  

When application loaded, all views (divs with view class) are hidden (display:none) except login view. Login view should have login form on it, when it submitted by user it initiates ajax request. When ajax successful application hides login page and displays home page instead.

当应用程序加载时，除了登录视图之外，所有视图（具有视图类的 div）都被隐藏（显示：无）。登录视图上应该有登录表单，当它由用户提交时，它会发起 ajax 请求。当 ajax 成功应用程序隐藏登录页面并显示主页时。

You may structure your code next way. For every module you will have model, view and controller files.

您可以按照下一个方式构建您的代码。对于每个模块，您将拥有模型、视图和控制器文件。

For example, for login module you may have loginModel.js, loginView.js, loginCtrl.js. In model file you will connect to DB and check credentials provided. In view you will bind listeners to controls. In controller you will react to user pressed Submit button.

例如，对于登录模块，您可能有 loginModel.js、loginView.js、loginCtrl.js。在模型文件中，您将连接到数据库并检查提供的凭据。在视图中，您会将侦听器绑定到控件。在控制器中，您将对用户按下的提交按钮做出反应。