单页JavaScript Web应用程序的体系结构？

如何在客户端上构建复杂的单页JS Web应用程序？具体来说，我很好奇如何根据应用程序的模型对象，UI组件，任何控制器以及处理服务器持久性的对象来干净地构建应用程序。

起初，MVC似乎很合适。但是，由于UI组件嵌套在不同的深度（每个组件都有自己的作用于模型数据/对模型数据进行响应的方式，并且每个组件都会生成它们自己可能会或可能不会直接处理的事件），因此似乎无法完全应用MVC。（但如果不是这种情况，请纠正我。）

-

（此问题提出了关于使用ajax的两个建议，显然，除了最简单的一页应用程序之外，其他任何东西都需要使用ajax。）

PureMVC / JS的 MVC架构是最优雅的IMO。我从中学到了很多。我还发现Nicholas Zakas的可伸缩JavaScript应用程序体系结构有助于研究客户端体系结构选项。

另外两个技巧

1. 我发现视图，焦点和输入管理是单页Web应用程序中需要特别注意的领域
2. 我还发现将JS库抽象化是很有帮助的，这可以让您改变想法，或者在需要时进行混搭。

迪恩（Dean）分享的尼古拉斯·扎卡斯（Nicholas Zakas）的演讲是一个很好的起点。我也在一段时间内努力回答相同的问题。在完成了两个大型Javascript产品之后，想到了将学习成果共享为参考架构，以防万一有人需要它。看一下：

http://boilerplatejs.org/

它解决了常见的Javascript开发问题，例如：

• 解决方案结构
• 创建复杂的模块层次结构
• 自包含的UI组件
• 基于事件的模块间通信
• 路由，历史记录，书签
• 单元测试
• 本土化
• 文件产生

等等

我构建应用程序的方式：

• ExtJS框架，单页应用程序，在单独的JS文件中定义的每个组件，均按需加载
• 每个组件都联系自己的专用Web服务（有时不止一个），将数据提取到ExtJS存储或专用数据结构中
• 渲染使用标准的ExtJS组件，因此我可以将存储绑定到网格，从记录中加载表单，...

只需选择一个JavaScript框架，并遵循其最佳做法即可。我最喜欢的是ExtJS和GWT，但是是YMMV。

不要为此提出自己的解决方案。复制现代javascript框架所需的工作量太大。适应现有的事物总是比从头开始构建所有事物更快。

Question - What makes an application complex ? 

答案-在问题本身中使用“复杂”一词。因此，一种普遍的趋势是从一开始就寻找复杂的解决方案。

Question - What does the word complex means ?

答案-任何未知或部分理解的内容。例子：重力理论对我来说仍然是复杂的，但对艾萨克·牛顿爵士（Isaac Newton爵士）来说却并不复杂，后者于1655年发现了重力理论。

Question - What tools can I use to deal with complexity ?

答案-理解和简单。

Question - But I understand my application . Its still complex ?

答案-请三思，因为理解和复杂性是不共存的。如果您了解巨大的大型应用程序，那么我相信您会同意，它不过是小型单位和简单单位的集成。

Question - Why all of the above philosophical discussion for a question on 
           Single Page Application (SAP)?

答案-因为，

-> SPA不是某种新发明的核心技术，为此，我们需要为应用程序开发中正在做的许多事情重新发明轮子。

->它的概念是由对Web应用程序更好的性能，可用性，可伸缩性和可维护性的需求驱动的。

->这是一个相当新近确定的设计模式，因此，对SPA作为一种设计模式的理解在做出有关SPA架构的明智决策方面大有帮助。

->从根本上说，SPA并不复杂，因为在了解了应用程序的需求和SPA模式之后，您将意识到您仍在创建应用程序，几乎与之前所做的一些修改和重新安排相同。在开发方法上。

Question - What about the use of Frameworks ?

答案-框架是一些常用的通用模式的样板代码/解决方案，因此它们可以减轻应用程序开发中x％（根据应用程序而定）的负载，但是对于重型设备而言，应该没有太多期望和不断增长的应用程序。完全控制您的应用程序结构和流程始终是一个好案例，但最重要的是控制它的代码。应用程序代码中不应有灰色或黑色区域。

Question - Can you suggest one of the many approaches to SPA architecture ?

答案-根据应用程序的性质考虑您自己的框架。分类应用程序组件。寻找一个与您的派生框架接近的现有框架，如果找到它，然后使用它，如果找不到，那么我建议您继续使用自己的框架。创建框架是一项艰巨的工作，但从长远来看会产生更好的结果。我的SPA框架中的一些基本组件将是：

• 数据源：模型/模型集合

• 标记以显示数据：模板

• 与应用程序的交互：事件

• 状态捕获和导航：路由

• 实用程序，小部件和插件：库

让我知道这是否对您的SPA架构有任何帮助，并祝您好运！

最好的办法是查看其他框架的示例用法：

TodoMVC展示了许多SPA框架。

您可以使用javascript MVC框架http://javascriptmvc.com/

我当前正在使用的Web应用程序使用JQuery，因此我不建议将其用于任何大型单页Web应用程序。大多数框架（例如Dojo，yahoo，google和其他框架）在其库中使用名称空间，但JQuery却没有，这是一个重大缺陷。

如果您的网站打算很小，那么使用JQuery可以，但是如果您打算建立一个大型网站，那么我建议您查看所有可用的Javascript框架，并确定最能满足您需求的Javascript框架。

并且我建议将MVC模式应用于您的javascript / html，并且可能将您的大部分javascript对象模型都可以完成，因为您实际上是通过ajax从服务器返回的json，而javascirpt使用json来呈现html。

我建议您阅读《 Ajax实战》一书，因为它涵盖了您需要了解的大多数内容。

我在多个一页应用程序中使用Samm.js取得了巨大成功

我会选择jQuery MVC

请访问http://bennadel.com/projects/cormvc-jquery-framework.htm Ben非常敏锐，如果您在他的博客上四处浏览，他会发表一些不错的文章，介绍CorMVC的组合方式以及原因。

另类：看看 ItsNat

用JavaScript进行思考，但是使用相同的DOM API在服务器中用Java编写相同的代码，在服务器中使用UI和数据是在一起的，因此无需自定义客户端/桥就可以更轻松地管理应用程序。

或看看https://github.com/flosse/scaleApp

NikaFramework允许您创建单页应用程序。还允许您将 HTML， CSS（ SASS）， JavaScript编写为单独的文件，最后将它们捆绑为一个输出文件。

我建议探索约曼。它使您可以将现有的“最佳实践”用于新项目。

例如：

如果您决定使用Angular.js，则有一个Yeoman生成器，它为您提供路由，视图，服务等的结构。还允许您测试，最小化代码等。

如果您决定使用Backbone，请签出此生成器