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

Question

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

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

-

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

Answer 1

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

另外两个提示

1. 我发现在单页面Web应用程序中需要特别注意视图，焦点和输入管理
2. 我还发现抽象JS库是有帮助的，让你可以根据需要改变主意，或者在需要时混合搭配。

Answer 2

尼古拉斯·扎卡斯（Nicholas Zakas）的演讲由迪恩分享是一个非常好的开始。 我也在努力回答同一个问题一段时间。 在做了几个大规模的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)?

答案 - 因为，

- > 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架构有任何帮助和好运，请告诉我！

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

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

Answer 10

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

例如：

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

如果您决定使用Backbone，请检查此生成器

Answer 11

我会选择jQuery MVC

Answer 12

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

Answer 13

替代方案：看看ItsNat

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

Answer 14

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