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

MVC体系结构 PureMVC/JS 在我看来是最优雅的。我从中学到了很多。我也发现了 Scalable JavaScript Application Architecture 作者Nicholas Zakas帮助研究客户端架构选项。

另外两个小窍门

1. 我发现视图、焦点和输入管理是单页Web应用程序中需要特别关注的领域。
2. 我还发现,将JS库抽象出来,让门打开以改变您使用什么的想法,或者在需要时进行混合和匹配也很有帮助。

尼古拉斯·扎卡斯(NicholasZakas)与迪恩分享的演讲是一个很好的开始。有一段时间我也在努力回答同样的问题。在做了两个大规模的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 ?

回答-任何未知或部分理解的问题。例子:即使在今天,引力理论对我来说也很复杂,但对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框架中的一些基本组件将是:

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

• 显示数据的标记:模板

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

• 状态捕获和导航:路由

• 实用程序、小部件和插件:库

如果这对您的水疗建筑有任何帮助,请告诉我,祝您好运!!

最好的做法是查看其他框架的示例用法:

TodoMVC 展示了许多SPA框架。

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

我目前正在研究的Web应用程序使用jquery,我不推荐它用于任何大型单页Web应用程序。大多数框架,如Dojo、Yahoo、Google和其他一些框架在其库中使用名称空间,但jQuery没有,这是一个显著的缺点。

如果您的网站要小,那么jquery就可以了,但是如果您打算构建一个大的网站,那么我建议您查看所有可用的javascript框架,并决定哪一个最符合您的需要。

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

我建议您阅读Ajax in Action这本书,因为它涵盖了您需要了解的大部分内容。

我在用 Samm.js 在多个单页应用程序中非常成功

我愿意去 jQuery MVC

退房 http://bennadel.com/projects/cormvc-jquery-framework.htm 本很聪明,如果你在他的博客上随便看看,他有一些关于CORMVC如何组合以及为什么这样的文章。

备选方案:看看 ItsNat

在JavaScript中思考,但在同一个DOM API中,在Java服务器中代码相同,因为用户界面和数据在一起,所以服务器在没有自定义客户机/网桥的情况下更容易管理应用程序。

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

NikaFramework 允许您创建单页应用程序。也可以让你写 HTML , CSS ( 萨斯 ) JavaScript 将它们打包成单独的文件,最后只将它们打包成一个输出文件。

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

例如:

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

如果决定使用主干,请签出 this generator