单页 JavaScript Web 应用程序的架构？

Architecture of a single-page JavaScript web application?

提问by

How should a complex single-page JS web application be structured on the client-side? Specifically I'm curious about how to cleanly structure the application in terms of its model objects, UI components, any controllers, and objects handling server persistence.

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

MVC seemed like a fit at first. But with UI components nested at various depths (each with their own way of acting on/reacting to model data, and each generating events which they themselves may or may not handle directly), it doesn't seem like MVC can be cleanly applied. (But please correct me if that's not the case.)

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

--

——

(This questionresulted in two suggestions of using ajax, which is obviously needed for anything other than the most trivial one-page app.)

（这个问题导致了两个使用 ajax 的建议，这显然是除了最琐碎的单页应用程序之外的任何其他东西所需要的。）

采纳答案by Dean Burge

MVC architecture of PureMVC/JSis the most elegant IMO. I learned a lot from it. I also found Scalable JavaScript Application Architectureby Nicholas Zakas helpful in researching client side architecture options.

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

Two other tips

另外两个提示

1. I've found view, focus, and input management are areas that need special attention in single page web apps
2. I also found it helpful to abstract away the JS library, leaving door open to change mind on what you use, or mix & match should the need arise.

1. 我发现视图、焦点和输入管理是单页 Web 应用程序中需要特别注意的领域
2. 我还发现将 JS 库抽象出来很有帮助，为改变你使用的内容敞开大门，或者在需要时混合和匹配。

回答by Hasith

Nicholas Zakas's presentation as shared by Dean is a very good place to start with. I was also struggling to answer the same question for a while. After doing couple of large scale Javascript products, thought of sharing the learnings as a reference architecture in case someone needs it. Have a look at:

Dean 分享的 Nicholas Zakas 的演讲是一个很好的起点。我也有一段时间很难回答同样的问题。在做了几个大规模的 Javascript 产品之后，考虑将这些学习作为参考架构分享，以防有人需要它。看一下：

http://boilerplatejs.org/

http://boilerplatejs.org/

It addresses common Javascript development concerns such as:

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

• Solution structuring
• Creating complex module hierarchy
• Self contained UI components
• Event based inter module communication
• Routing, History, Bookmarking
• Unit Testing
• Localization
• Document Generation

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

etc.

等等。

回答by Prakash Tiwari

Question - What makes an application complex ? 

Answer - The use of word 'complex' in the question itself. Hence, a common tendency will be to look out for a complex solution right from the beginning.

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

Question - What does the word complex means ?

Answer - Anything that is unknown or partially understood. Example : The theory of Gravity even today is COMPLEX to me but not to Sir Isaac Newton who discovered it in 1655.

答案 - 任何未知或部分理解的事物。例子：即使在今天，引力理论对我来说也是复杂的，但对 1655 年发现它的艾萨克·牛顿爵士来说并不复杂。

Question - What tools can I use to deal with complexity ?

Answer - Understanding and simplicity.

答案 - 理解和简单。

Question - But I understand my application . Its still complex ?

Answer - Think twice, because understanding and complexity does not co-exist. If you understand a huge huge application, I am sure you will agree that it is nothing but an integration of small and simple units.

答案 - 三思而后行，因为理解和复杂性不能共存。如果您了解一个巨大的应用程序，我相信您会同意它只不过是小而简单的单元的集成。

Question - Why all of the above philosophical discussion for a question on 
           Single Page Application (SAP)?

Answer - Because,

答案 - 因为，

-> SPA is not some kind of core technology that is newly invented for which we need to reinvent the wheel for a lot of things that we are doing in application development.

-> SPA 不是一种新发明的核心技术，我们需要为我们在应用程序开发中所做的很多事情重新发明轮子。

-> Its a concept driven by the need for better performance, availability, scalability and maintainability of web applications.

-> 它是由对 Web 应用程序更好的性能、可用​​性、可扩展性和可维护性的需求驱动的概念。

-> Its a fairly newly identified design pattern, so an understanding of SPA as a design pattern goes long way in making informed decisions about the architecture of a SPA.

-> 它是一个相当新确定的设计模式，因此将 SPA 理解为一种设计模式对于做出有关 SPA 架构的明智决策有很长的路要走。

-> At the root level no SPA is complex, because after understanding the needs of an application and the SPA pattern, you will realize that you are still creating an application, pretty much the same way you did before with some modifications and re-arrangements in the development approach.

-> 在根级别，没有 SPA 是复杂的，因为在了解应用程序的需求和 SPA 模式后，您会意识到您仍在创建应用程序，与之前所做的几乎相同，只是进行了一些修改和重新安排在开发方法上。

Question - What about the use of Frameworks ?

Answer - Frameworks are boiler plate code / solution for some commonly identified and generic patterns, hence they can take off x% (variable, based on the application) load from application development but then not a lot should be expected out of them specially for heavy and growing applications. Its always a good case to be in complete control of your application structure and flow but most importantly the code for it. There should be no grey or black areas in the application code.

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

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

Answer - Think of your own framework based on the nature of your application. Categorize application components. Look for an existing framework that is close to your derived framework, if you find it then use it, if you do not find it then I suggest going ahead with your own. Creating framework is quite an effort upfront but produces better results in long run. Some basic components in my SPA framework will be:

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

• Data Source : Models / Collections of Models

• Mark Up for presenting data : Templates

• Interaction with the application : Events

• State capturing and navigation : Routing

• Utilities , widgets and plug-ins : libraries

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

• 标记呈现数据：模板

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

• 状态捕获和导航：路由

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

Let me know if this helped in any way and good luck with your SPA architecture !!

让我知道这是否有任何帮助，并祝您的 SPA 架构好运！

回答by Joeri Sebrechts

The way I build apps:

我构建应用程序的方式：

• ExtJS framework, single page app, every component defined in a separate JS file, loaded on-demand
• Every component contacts its own dedicated web service (sometimes more than one), fetching data into ExtJS stores or special-purpose data structures
• The rendering uses standard ExtJS components, so I can bind stores to grids, load forms from records, ...

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

Just choose a javascript framework, and follow its best practices. My favorites are ExtJS and GWT, but YMMV.

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

Do NOT roll your own solution for this. The effort required to duplicate what modern javascript frameworks do is too big. It is always faster to adapt something existing than to build it all from scratch.

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

回答by Adam Gent

The best thing to do is to look at example uses of other frameworks:

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

TodoMVCshowcases many many SPA frameworks.

TodoMVC展示了许多 SPA 框架。

回答by NicoGranelli

I'm using Samm.jsin several one page applications with great success

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

回答by bjornd

You can use javascript MVC framework http://javascriptmvc.com/

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

回答by eaglestorm

The web application that I am currently working on uses JQuery and I would not recommend it for any large single page web application. Most frameworks i.e. Dojo, yahoo, google and others use namespaces in their libraries but JQuery does not and this is a significant drawback.

我目前正在开发的 Web 应用程序使用 JQuery，我不建议将它用于任何大型单页 Web 应用程序。大多数框架，即 Dojo、yahoo、google 和其他框架都在他们的库中使用命名空间，但 JQuery 没有，这是一个显着的缺点。

If your web site is intended to be small then JQuery would be ok but if you intended to build a large site then I would recommend looking at all the Javascript frameworks available and deciding which one most meets your needs.

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

And I would recommend applying the MVC pattern to your javascript/html and probably most of your object model for the javascript could be done as the json that you actually return from the server through ajax and the javascirpt uses the json to render html.

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

I would recommend reading the book Ajax in action as it covers most of the stuff you will need to know.

我建议您阅读《Ajax in action》一书，因为它涵盖了您需要了解的大部分内容。

回答by jmarranz

Alternative: take a look to ItsNat

替代方案：看看它的Nat

Think in JavaScript but code the same in Java in server with the same DOM APIs, in server is way easier to manage your application without custom client/bridges because UI and data are together.

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

回答by cody

Or have a look at https://github.com/flosse/scaleApp

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