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

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

MVC起初似乎是合适的。 但是，UI组件嵌套在各种深度（每种模式都有自己的方式来处理/响应模型数据，并且每个事件都会生成自己可能会或可能不会直接处理的事件），所以似乎并不像MVC那样可以清晰地应用。 （但如果不是这样，请纠正我。）

–

（ 这个问题导致了两个关于使用ajax的build议，除了最简单的单页面应用之外，这显然是需要的。

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

另外两个提示

  1. 我发现视图，焦点和inputpipe理是单页面Web应用程序需要特别关注的领域
  2. 我还发现把JS库抽象出来是有好处的，留下大门来改变你使用的东西，或者根据需要混合搭配。

由Dean分享的Nicholas Zakas的演讲是一个非常好的开始。 我也一直在努力回答同样的问题。 在做了几个大规模的Javascript产品后，想到分享学习作为一个参考架构，以防万一有人需要它。 看一下：

http://boilerplatejs.org/

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

  • 解决scheme结构
  • 创build复杂的模块层次
  • 自包含的UI组件
  • 基于事件的模块间通信
  • 路由，历史，书签
  • unit testing
  • 本土化
  • 文件生成

等等

我构build应用程序的方式：

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

只要select一个JavaScript框架，并遵循其最佳做法。 我的最爱是ExtJS和GWT，但是YMMV。

不要推出自己的解决scheme。 复制现代JavaScript框架所要做的工作太大了。 适应现有的东西总是比从头开始构build起来要快。 

Question - What makes an application complex ?

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

 Question - What does the word complex means ?

答案 – 任何未知或部分理解的事物。 例子：即使在今天，Gravity理论对我来说也是复杂的，而不是在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应用程序更好的性能，可用性，可伸缩性和可维护性驱动的一个概念。

– >它是一个相当新的devise模式，所以将SPA作为一种devise模式的理解在对SPA的体系结构做出明智的决定方面有很长的路要走。

– >在底层，没有SPA是复杂的，因为在了解了应用程序和SPA模式的需求之后，你会意识到你仍然在创build一个应用程序，几乎和你以前一样进行一些修改和重新安排在发展的方法。 

 Question - What about the use of Frameworks ?

答案 – 框架是一些普遍认可的generics模式的锅炉代码/解决scheme，因此它们可以从应用程序开发中取消x％（基于应用程序的variables），但是对于重和不断增长的应用 完全控制你的应用程序结构和stream程总是一个很好的例子，但最重要的是它的代码。 应用程序代码中不应该有灰色或黑色区域。 

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

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

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

  • 标记为呈现数据：模板

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

  • 状态捕获和导航：路由

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

让我知道，如果这有助于以任何方式，祝你的SPAbuild筑！

最好的办法是看看其他框架的例子：

TodoMVC展示了许多许多SPA框架。

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

我目前正在使用的Web应用程序使用JQuery，我不会推荐它用于任何大型单页面Web应用程序。 大多数框架，即Dojo，雅虎，谷歌和其他人在他们的库中使用命名空间，但JQuery不，这是一个重大的缺陷。

如果你的网站的目标是小，那么JQuery就可以，但如果你打算build立一个大的网站，那么我会build议看看所有可用的Javascript框架，并决定哪一个最符合你的需求。

我build议将MVC模式应用于您的javascript / html，并且可能大部分的JavaScript对象模型都可以像json那样通过ajax从服务器返回，而javascirpt使用json来呈现html。

我build议阅读Ajax的书，因为它涵盖了大部分你需要知道的东西。

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

我会去与jQuery MVC

看看http://bennadel.com/projects/cormvc-jquery-framework.htm本是相当尖锐的，如果你在他的博客挖掘他有一些关于如何把CorMVC放在一起，以及为什么好post。;

select：看看ItsNat

在JavaScript中考虑，但使用相同的DOM API在服务器中的Java代码相同，在服务器上更容易pipe理您的应用程序没有自定义客户端/桥梁，因为UI和数据在一起。

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

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

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

例如：

如果你决定使用Angular.js，那么就有一个Yeoman生成器 ，它给你一个路由，视图，服务等的结构。还允许你testing，缩小你的代码等等。

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

Interesting Posts