如何在客户端上构建复杂的单页JS Web应用程序的结构？具体来说，我想知道如何以其模型对象、UI组件、任何控制器和处理服务器持久性的对象为基础清晰地构建应用程序。
MVC起初似乎是一种适合的选择。但是由于UI组件嵌套在不同深度（每个组件都有自己的处理或响应模型数据的方式，并生成它们自己可能或可能不直接处理的事件），所以MVC似乎无法得到干净的应用。（但如果情况不是这样，请纠正我。）
--
（这个问题导致了两个使用ajax的建议，显然除了最琐碎的单页应用程序外，其他需要使用ajax。）
单页JavaScript Web应用程序的架构？
100
- user65663
2
你可以尝试使用angularJS或者backboneJS。 - Romain
2你能提供自己对这个问题的见解吗？自从你提出这个问题以来已经有一段时间了，我很想知道你在使用JavaScript SPAs方面从自己的经验中学到了哪些最重要的方面。 - Adrian Moisa
14个回答
35
PureMVC/JS的MVC架构在我看来是最优雅的。我从中学到了很多东西。我也发现Nicholas Zakas的可扩展的JavaScript应用程序架构对于研究客户端架构选项非常有帮助。
另外两个提示：
- 我发现单页Web应用程序中的视图、焦点和输入管理是需要特别关注的领域。
- 我还发现将JS库抽象化是有帮助的，这样可以改变对使用什么库的想法，或者在需要时混合使用不同的库。
- Dean Burge
14
尼古拉斯·扎卡斯在Dean分享的演示文稿是一个很好的开始。 我也曾经艰难地回答同样的问题。 在完成了几个大型JavaScript产品之后，我想分享这些学习成果，以供参考体系结构，以防有人需要。请查看：http://boilerplatejs.org/，它解决了常见的JavaScript开发问题，例如：
- 解决方案结构
- 创建复杂的模块层次结构
- 自包含UI组件
- 基于事件的模块间通信
- 路由，历史记录，书签
- 单元测试
- 本地化
- 文档生成等。
- Hasith
1
1它已经更改为https://github.com/99x/boilerplatejs。但是它已经更新了9年，所以我怀疑它是否仍然有效。 - Qiulang
11
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架构方面好运！！
- Prakash Tiwari
1
1这增加了一些很棒的观点（通常很少见）。谢谢！ - Cody
11
我的应用程序构建方式：
- 使用ExtJS框架，单页应用程序，每个组件在单独的JS文件中定义，按需加载
- 每个组件都联系自己专用的Web服务（有时不止一个），将数据获取到ExtJS存储或特定目的的数据结构中
- 渲染使用标准的ExtJS组件，因此我可以将存储绑定到网格，从记录中加载表单...
只需选择一个JavaScript框架，并遵循其最佳实践。 我最喜欢的是ExtJS和GWT，但每个人的情况可能不同。
不要为此编写自己的解决方案。复制现代JavaScript框架所做的工作所需的工作量太大了。 改编现有的东西总是比从头开始构建快得多。
- Joeri Sebrechts
1
我目前正在开发的 Web 应用程序使用 JQuery，但我不建议在任何大型单页 Web 应用程序中使用它。大多数框架（如 Dojo、雅虎、谷歌等）在其库中使用命名空间，但 JQuery 不会，这是一个显著的缺点。
如果您的网站打算很小，那么使用 JQuery 就可以了。但是，如果你打算构建一个大型网站，我建议查看所有可用的 JavaScript 框架，并决定哪个最符合你的需求。
我建议将 MVC 模式应用于你的 JavaScript/HTML，可能大部分 JavaScript 的对象模型都可以作为通过 Ajax 从服务器实际返回的 JSON 来完成，而 JavaScript 使用 JSON 来渲染 HTML。
我建议阅读《Ajax in action》一书，因为它涵盖了您需要了解的大部分内容。
如果您的网站打算很小，那么使用 JQuery 就可以了。但是，如果你打算构建一个大型网站，我建议查看所有可用的 JavaScript 框架，并决定哪个最符合你的需求。
我建议将 MVC 模式应用于你的 JavaScript/HTML，可能大部分 JavaScript 的对象模型都可以作为通过 Ajax 从服务器实际返回的 JSON 来完成，而 JavaScript 使用 JSON 来渲染 HTML。
我建议阅读《Ajax in action》一书，因为它涵盖了您需要了解的大部分内容。
- eaglestorm
6
jQuery可以像任何JS一样使用原型方式进行命名空间编写。我不确定它是否足够大或晦涩，以至于需要在框架后面进行抽象 - 我更喜欢学习JS实际正在做什么。https://dev59.com/IXNA5IYBdhLWcg3wpfmu - SimplGy
4JQuery并不是一个针对客户端应用框架的工具，它的目标层次比这要“低级”一些。JQuery旨在简化HTML文档遍历、事件处理、动画和Ajax操作，并抽象出浏览器之间的差异。
如果你需要开发更大型的应用程序，建议结合使用像Knockout或Backbone这样的客户端应用程序框架与JQuery一起使用。 - Sam Shiles
所以，如果 Knockout 或 Backbone 不包括文档遍历、事件处理等功能，那么它们就不值得太多。而 YUI3 应用程序框架则包含了这些功能，如果使用它，则无需 JQuery。 - eaglestorm
1jQuery将其所有方法存储在jQuery变量和$变量中。如果您使用no conflict选项，则只会在全局命名空间中创建名称为jQuery的变量。jQuery不是框架，只是一个库，它不告诉您如何做事情，只是提供一些常见操作的快捷方式。将jQuery与Dojo / YUI等进行比较是错误的。 - Hoffmann
1@eaglestorm，你的if语句判断为假。 - John Lehmann
我毫不怀疑 jQuery 曾经改变了 Web，但我同意 @eaglestorm 的观点。jQuery 把所有东西都放在
$ 或 jQuery 命名空间下，包括 DOM 操作、网络、字符串修剪和第三方扩展，这是一个糟糕的设计。API 很混乱。但对于面向对象的应用程序来说，真正重要的是上下文管理。jQuery 事件处理程序的 this 是事件目标，而不是对象本身。没有第三个参数，比如 Array.prototype.map 中指定的上下文。因此，每个事件处理程序最终都会使用 Function.prototype.bind 或 $.proxy。因此，它对于临时脚本是有限制的。 - saaj0
另一种选择：看看ItsNat
用JavaScript思考，但在服务器上以相同的DOM API使用Java编写代码，这样更容易管理您的应用程序，因为UI和数据在服务器上是一体的，无需自定义客户端/桥接。
- jmarranz
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接