单页应用程序体系结构（JavaScript）_Javascript_Design Patterns_Model View Controller_Single Page Application_Javascript Framework

单页应用程序体系结构（JavaScript）

javascript design-patterns model-view-controller

单页应用程序体系结构（JavaScript）,javascript,design-patterns,model-view-controller,single-page-application,javascript-framework,Javascript,Design Patterns,Model View Controller,Single Page Application,Javascript Framework,我想了解设计单页应用程序的总体架构（主要通过JavaScript）假设我有一个登录页面（Usernam/Password），成功验证后，我会看到主页。现在，登录和主页屏幕实际上都应该是单个页面的一部分我怎样才能设计这样的页面这是一个如此广泛的问题，以至于可以用整本书来详细回答它基本上，您需要做的是使用AJAX，而不是重新加载页面。您仍然需要连接到服务器以验证用户身份，但不是每次都重新加载整个页面，而是需要对服务器进行AJAX调用，并根据登录是否成功更改页面上的某些内容（如将登录按钮更改为

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

假设我有一个登录页面（Usernam/Password），成功验证后，我会看到主页。现在，登录和主页屏幕实际上都应该是单个页面的一部分

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

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

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

您可以从web上现有的解决方案中获得灵感：

我刚刚在SourceForge中添加了一个项目，可能会有所帮助。我已经开发这个库大约一年了，我想它已经准备好进入黄金时间了。此项目允许您从JavaScript中引用asp.net MVC

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

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

自定义功能包括：

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

您可能想免费查找此文件。我在谷歌搜索“单页应用”时发现了它

如果您还没有看过，John Papa有一门关于在Pluralsight上设计单页应用程序的非常流行的课程：

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

如果你更喜欢MVC，我个人一直在使用基于主干网的chaplinjs.org，以及用于单页应用程序荣耀的hbs。我对使用WebSocket而不是长轮询做了一些修改，但它的扩展性非常好，如果您熟悉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。在模型文件中，您将连接到DB并检查提供的凭据。在视图中，您将侦听器绑定到控件。在控制器中，您将对用户按下的提交按钮作出反应。

这个问题太宽泛，无法回答。你到底在哪里遇到了问题？我只是想了解总体架构…“设计单页应用程序的总体架构”-没有。这是一种方法，但不一定需要用AJAX加载完整/部分页面。你可以在主页的JavaScript中拥有所有内容，只需使用JSON或任何东西加载数据。是的@Juhana，这与我说的差不多。：）我从来没有说过用AJAX加载完整/部分页面，更不用说这是必要的了。：）我说过要使用AJAX连接到服务器，然后更改页面的某些部分，所以我只能同意您的评论。：）Thx很多…我知道这是一个广泛的问题…但是你能解释一下在进行AJAX调用之后，我如何部分更新页面内容。。。

<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>