100

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

MVC 一开始似乎很合适。但是由于 UI 组件嵌套在不同的深度（每个组件都有自己的行为/响应模型数据的方式，并且每个组件都生成它们自己可能直接处理或不直接处理的事件），看起来 MVC 似乎不能被干净地应用。（但如果不是这样，请纠正我。）

--

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

4

14 回答 14

35

PureMVC/JS的MVC 架构是最优雅的 IMO。我从中学到了很多。我还发现Nicholas Zakas 的Scalable JavaScript Application Architecture有助于研究客户端架构选项。

另外两个提示

  1. 我发现视图、焦点和输入管理是单页 Web 应用程序中需要特别注意的领域
  2. 我还发现抽象出 JS 库很有帮助，让您可以改变对使用什么的想法，或者在需要时进行混搭。
于 2010-06-16T14:18:42.500 回答
13

由 Dean 分享的 Nicholas Zakas 的演讲是一个很好的起点。我也有一段时间努力回答同样的问题。在完成了几个大型 Javascript 产品之后，考虑将这些经验分享为参考架构，以防有人需要。看一下：

http://boilerplatejs.org/

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

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

等等

于 2012-08-15T14:51:18.787 回答
11

我构建应用程序的方式：

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

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

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

于 2010-06-16T13:12:47.917 回答
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 架构有任何帮助并祝您好运！

于 2013-08-28T21:53:24.067 回答
4

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

TodoMVC展示了许多 SPA 框架。

于 2012-09-18T17:52:27.327 回答
1

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

于 2010-06-16T06:53:04.763 回答
1

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

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

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

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

于 2010-06-17T02:08:21.017 回答
1

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

于 2011-06-18T03:46:42.410 回答
0

我会选择jQuery MVC

于 2010-06-16T05:27:35.740 回答
0

查看http://bennadel.com/projects/cormvc-jquery-framework.htm Ben 非常敏锐，如果您在他的博客上四处寻找，他有一些关于 CorMVC 是如何组合在一起以及为什么组合在一起的不错的帖子。

于 2010-06-16T05:33:31.607 回答
0

替代方案：看看ItsNat

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

于 2011-01-06T09:01:44.203 回答
0

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

于 2011-02-13T13:19:05.913 回答
0

NikaFramework允许您创建单页应用程序。还允许您将HTML、 CSS ( SASS ) 、 JavaScript 编写到单独的文件中，最后将它们捆绑到一个输出文件中。

于 2013-01-05T21:17:10.800 回答
0

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

例如：

如果你决定使用 Angular.js，有一个Yeoman 生成器，它为你提供路由、视图、服务等的结构。还允许你测试、缩小代码等。

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

于 2015-04-08T01:14:08.643 回答