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

Question

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

MVC起初似乎很合适。但是，如果UI组件嵌套在不同的深度（每个组件都有自己的方式对模型数据进行操作/对模型数据作出反应，并且每个生成事件本身可能会或可能不会直接处理），看起来MVC似乎不能干净利用。 （但如果情况并非如此，请纠正我。）

-

（This question提出了两个使用ajax的建议，除了最简单的单页应用之外，显然还需要这些建议。）

Answer 1

PureMVC/JS的MVC架构是最优雅的IMO。我从中学到了很多东西。我还发现Nicholas Zakas的Scalable JavaScript Application Architecture有助于研究客户端架构选项。

另外两个提示

1. 我发现在单页面网络应用中需要特别关注视图，焦点和输入管理
2. 我还发现抽象JS库是有帮助的，让你的大门敞开，改变对你使用的东西的看法，或者混合使用它。如果需要，应该匹配。

Answer 2

尼古拉斯·扎卡斯在迪恩分享的演讲中是一个非常好的开始。我也在努力回答同一个问题一段时间。在做了几个大规模的Javascript产品之后，考虑将学习分享作为参考架构，以防有人需要它。看看：

http://boilerplatejs.org/

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

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

等

Answer 3

我构建应用的方式：

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

只需选择一个javascript框架，并遵循其最佳实践。我最喜欢的是ExtJS和GWT，但是YMMV。

请勿为此推出自己的解决方案。复制现代javascript框架所需的工作量太大了。适应现有的东西总是比从头开始构建它更快。

Answer 4

Question - What makes an application complex ? 

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

Question - What does the word complex means ?

答案 - 任何未知或部分理解的内容。例子：即使在今天，重力理论对我来说也很复杂，但对于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)?

答案 - 因为，

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

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

- ＆GT;它是一种相当新确定的设计模式，因此将SPA作为设计模式的理解在做出有关SPA体系结构的明智决策方面有很长的路要走。

- ＆GT;在根级别，没有SPA是复杂的，因为在了解了应用程序和SPA模式的需求之后，您将意识到您仍在创建应用程序，就像您之前进行的一些修改和重新安排一样。发展方式。

Question - What about the use of Frameworks ?

答案 - 框架是一些通常识别和通用模式的锅炉板代码/解决方案，因此它们可以从应用程序开发中取消x％（基于应用程序的变量）负载，但是不应该预期很多特别适用于繁重和不断增长的应完全控制应用程序结构和流程总是一个很好的例子，但最重要的是它的代码。应用程序代码中不应有灰色或黑色区域。

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

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

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

• 标记为显示数据：模板

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

• 状态捕获和导航：路由

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

让我知道这是否对您的SPA架构有任何帮助和好运!!

Answer 5

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

TodoMVC展示了许多SPA框架。

Answer 6

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

Answer 7

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

如果你的网站很小，那么JQuery就可以了，但如果你打算建一个大型网站，那么我建议你查看所有可用的Javascript框架，并决定哪一个最符合你的需求。

我建议将MVC模式应用到你的javascript / html中，并且你的javascript的大多数对象模型都可以作为你实际从服务器通过ajax返回的json完成，而javascirpt使用json来呈现html

我建议您阅读Ajax的实际应用，因为它涵盖了您需要了解的大部分内容。

Answer 8

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

Answer 9

我会选择jQuery MVC

Answer 10

查看http://bennadel.com/projects/cormvc-jquery-framework.htm Ben非常敏锐，如果你在他的博客上挖掘，他会发布一些关于如何将CorMVC放在一起的好帖子以及为什么。

Answer 11

替代方案：看看ItsNat

在JavaScript中思考但在服务器中使用相同的DOM API在Java中使用相同的代码，在服务器中更容易管理您的应用程序，而无需自定义客户端/网桥，因为UI和数据在一起。

Answer 12

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

Answer 13

NikaFramework允许您创建单页面应用程序。还允许您将 HTML ， CSS （ SASS ）， JavaScript 写入单独的文件，并将它们仅捆绑到一个文件中输出文件到底。

Answer 14

我建议您去探索Yeoman。它允许您为新项目使用现有的“最佳实践”。

例如：

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

如果您决定使用Backbone，请结帐this generator