单页 JavaScript Web 应用程序的架构？
一个复杂的单页 JS Web 应用程序在客户端应该如何构建？具体来说，我很好奇如何根据模型对象、UI 组件、任何控制器和处理服务器持久性的对象来干净地构建应用程序。
MVC 起初看起来很合适。但是，由于 UI 组件嵌套在不同的深度（每个组件都有自己的对模型数据进行操作/反应的方式，并且每个组件生成它们自己可能直接处理或可能不直接处理的事件），所以 MVC 似乎不能被干净地应用。 （但如果情况并非如此，请纠正我。）
--
(这个问题< /a> 产生了两个使用 ajax 的建议，这显然对于除了最简单的单页应用程序之外的任何其他应用程序都是需要的。）
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.
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.)
--
(This question resulted in two suggestions of using ajax, which is obviously needed for anything other than the most trivial one-page app.)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（14）
PureMVC/JS 的 MVC 架构在我看来是最优雅的。我从中学到了很多。我还发现 Nicholas Zakas 的可扩展 JavaScript 应用程序架构有助于研究客户端架构选项。
另外两个技巧，
MVC architecture of PureMVC/JS is the most elegant IMO. I learned a lot from it. I also found Scalable JavaScript Application Architecture by Nicholas Zakas helpful in researching client side architecture options.
Two other tips
Dean 分享的 Nicholas Zakas 的演讲是一个很好的起点。我也有一段时间很难回答同样的问题。在完成了几个大型 Javascript 产品之后，我考虑将所学到的知识作为参考架构进行分享，以防有人需要。看一下：
http://boilerplatejs.org/
它解决了常见的 Javascript 开发问题，例如：
等。
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:
http://boilerplatejs.org/
It addresses common Javascript development concerns such as:
etc.
我构建应用程序的方式：
只需选择一个 javascript 框架，并遵循其最佳实践。我最喜欢的是 ExtJS 和 GWT，但 YMMV。
不要为此推出自己的解决方案。复制现代 JavaScript 框架所做的工作需要付出巨大的努力。适应现有的东西总是比从头开始构建它更快。
The way I build apps:
Just choose a javascript framework, and follow its best practices. My favorites are ExtJS and GWT, but 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.
答案 - 在问题本身中使用“复杂”一词。因此，一个常见的趋势是从一开始就寻找复杂的解决方案。
答案 - 任何未知或部分理解的内容。示例：即使在今天，重力理论对我来说仍然很复杂，但对 1655 年发现它的艾萨克·牛顿爵士来说却不是。
答案 - 理解和简单。
回答——三思而后行，因为理解和复杂性并不共存。如果您了解一个庞大的应用程序，我相信您会同意它只不过是小型和简单单元的集成。
答案 - 因为，
-> SPA 并不是某种新发明的核心技术，我们在应用程序开发中所做的很多事情都需要重新发明轮子。
->这是一个由对 Web 应用程序更好的性能、可用性、可扩展性和可维护性的需求驱动的概念。
->它是一种相当新确定的设计模式，因此将 SPA 理解为一种设计模式对于就 SPA 架构做出明智的决策大有帮助。
->从根本上讲，没有 SPA 是复杂的，因为在了解应用程序的需求和 SPA 模式之后，您会意识到您仍然在创建应用程序，与之前的方式几乎相同，只是在发展方式。
答案 - 框架是一些常见识别和通用模式的样板代码/解决方案，因此它们可以从应用程序开发中减轻 x%（可变，基于应用程序）负载，但不应期望从它们中得到太多，特别是对于重型应用程序和不断增长的应用程序。完全控制应用程序结构和流程始终是一个很好的情况，但最重要的是它的代码。应用程序代码中不应有灰色或黑色区域。
答案 - 根据应用程序的性质考虑您自己的框架。对应用程序组件进行分类。寻找与您的派生框架接近的现有框架，如果找到它就使用它，如果没有找到它那么我建议继续使用您自己的框架。创建框架前期需要付出很大的努力，但从长远来看会产生更好的结果。我的 SPA 框架中的一些基本组件是：
数据源：模型/模型集合
用于呈现数据的标记：模板
与应用程序交互：事件
状态捕获和导航：路由
实用程序、小部件和插件-ins：库
请告诉我这是否有任何帮助，祝您的 SPA 架构好运！！
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.
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.
Answer - Understanding and simplicity.
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.
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.
-> Its a concept driven by the need for better performance, availability, scalability and maintainability of web applications.
-> 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.
-> 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.
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.
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:
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 !!
最好的办法是查看其他框架的示例使用：
TodoMVC 展示了很多SPA框架。
The best thing to do is to look at example uses of other frameworks:
TodoMVC showcases many many SPA frameworks.
您可以使用 javascript MVC 框架 http://javascriptmvc.com/
You can use javascript MVC framework http://javascriptmvc.com/
我目前正在开发的 Web 应用程序使用 JQuery，我不会推荐它用于任何大型单页 Web 应用程序。大多数框架（即 Dojo、yahoo、google 和其他框架）在其库中使用名称空间，但 JQuery 不这样做，这是一个重大缺点。
如果您的网站规模较小，那么 JQuery 就可以，但如果您打算构建一个大型网站，那么我建议您查看所有可用的 Javascript 框架，并决定哪一个最能满足您的需求。
我建议将 MVC 模式应用到您的 javascript/html 中，并且可能您的 javascript 的大部分对象模型都可以作为您通过 ajax 从服务器实际返回的 json 来完成，而 javascirpt 使用 json 来呈现 html。
我建议您阅读《Ajax in action》一书，因为它涵盖了您需要了解的大部分内容。
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.
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.
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.
I would recommend reading the book Ajax in action as it covers most of the stuff you will need to know.
我在多个单页应用程序中使用 Samm.js 并取得了巨大成功
I'm using Samm.js in several one page applications with great success
我会选择 jQuery MVC
I would go with jQuery MVC
查看 http://bennadel.com/projects/cormvc-jquery-framework.htm< /a> Ben 非常敏锐，如果你仔细研究他的博客，他有一些关于 CorMVC 如何组合以及原因的好文章。
Check out http://bennadel.com/projects/cormvc-jquery-framework.htm Ben is pretty sharp and if you dig around on his blog he has some nice posts about how CorMVC is put together and why.
替代方案：看看 ItsNat
用 JavaScript 思考，但在具有相同 DOM API 的服务器中用 Java 编写相同的代码，服务器更容易管理您的应用程序，无需自定义客户端/桥，因为 UI 和数据在一起。
Alternative: take a look to ItsNat
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.
或者看看 https://github.com/flosse/scaleApp
Or have a look at https://github.com/flosse/scaleApp
NikaFramework 允许您创建单页应用程序。还允许您将 HTML、CSS (SASS)、JavaScript 写入单独的文件并将它们捆绑到一个文件中最后输出文件。
NikaFramework allows you to create single-page application. Also allows you to write HTML, CSS (SASS), JavaScript into separate files and bundle them into only one output file in the end.
我建议探索 Yeoman。它允许您将现有的“最佳实践”用于您的新项目。
例如：
如果您决定使用 Angular.js，则有一个 Yeoman 生成器，它可以为您提供路由、视图、服务等的结构。还允许您测试、缩小代码等。
如果您决定使用 Backbone，请查看 此生成器
I would recommend to explore Yeoman. It allow you to use existing "best practice" for your new project.
For example:
if you decide to use Angular.js, there is a Yeoman generator, that give you a structure for routing, views, services, etc. Also allow you to Test, minify your code, etc.
If you decide to use Backbone, checkout this generator