设计AJAX应用程序的推荐方法

Recommended way of designing an AJAX app

本文关键字：方法 AJAX 应用程序 设计      更新时间：2023-09-26

这是一个相当普遍的问题，但我有几年的Flex经验，我对纯web开发没有太多经验。

我的问题是:如果你需要构建一个AJAX应用程序，两种方法中的哪一种你更喜欢:

  1. 经典的服务器端MVC，其中控制器返回带有模型数据的视图。视图可以是完全视图，也可以是部分视图。基本上，只有少数成熟的视图作为容器，javascript将帮助用部分HTML视图异步地填补空白。这种方法比传统的web开发更进一步，因为javascript只用于维护整体控制和用户交互

  2. 一个成熟的js应用程序，例如用Cappuccino, Sproutcore或Backbone.js构建的应用程序，其中客户端是厚的，并实现了MVC的客户端实现，该实现可以处理模型，控制逻辑和视图交互。在这种情况下，服务器端扮演一组JSON/XML服务的角色，客户端与这些服务交换数据。这种情况下的缺点是，视图模板必须在初始应用程序启动时加载，以便javascript可以根据数据布局标记。其优点是减少了服务器响应的权重，以及在客户端中更好的控制，这允许应用视图模型绑定之类的东西。

  3. 两者之间的混合方法。

我喜欢第二个，这是正常的，因为我来自一个类似的环境，但有了那个我最关心的问题，如url路由(或我们在Flash中称之为深链接)，状态管理，模块化，和视图布局(什么时候视图标记模板加载?是否应该有特定的服务器端点在调用这些模板时提供这些模板，以便模板数据不会在开始时加载?

请评论

我自己更喜欢#2，但我喜欢javascript:)

不幸的是，我从来没有见过flex代码是什么样子的。我的经验是rails，所以我会用这些术语来讨论，但希望这些概念足够通用，这样答案就能说得通了

至于客户端模板，最好是当你选择的服务器端平台有一个故事(如rails 3.1资产管道或3.1之前的jammit插件)。如果你正在使用rails，我可以提供更多的信息，但如果你不是我要做的第一件事是寻找一个资产管理系统，处理这个开箱即用。

我的退路通常是将模板嵌入到服务器端模板的脚本标签中，比如

<script type='text/html' id='foo-template'></script>

为了稍后检索字符串，您可以这样做(jquery语法)

var template = $('#foo-template').html();

在我的服务器端模板中，我将把这些脚本标记作为部分拉到它们自己的文件中，所以我仍然得到文件分隔(rails语法)

<%= render :partial => 'templates/foo.html.erb' %>

我更喜欢只使用jammit，并将我的客户端模板放在以.jst结尾的单独文件中，但是第二种方法可以在任何地方工作，并且您仍然可以获得大多数相同的好处。

我推荐第二种方法。您已经熟悉的第二种方法(厚客户机瘦服务器方法)是越来越多的现代开发人员首选的方法，因为小部件的呈现和管理是在客户机上完成的，这节省了服务器上的计算和带宽开销。此外，如果您有一个复杂的小部件管理的情况，那么使用服务器端代码的小部件可能会变得越来越复杂和难以管理。你指出的缺点:

视图模板必须在初始化时加载应用程序被引导，以便javascript可以布局标记根据数据

不正确。您可以很好地根据需要通过ajax动态加载静态模板，然后使用javascript将它们呈现为完整的小部件。例如，如果你有一个带有图像编辑器组件的imagegallery，那么你可能不会加载图像编辑器所需的文件(包括图像、模板和小部件渲染代码)，直到用户真正选择编辑图像。

使用脚本加载器(例如:Requirejs, labjs)你可以最初只加载一个小到中等大小的引导脚本，然后根据需求动态加载其余的脚本。

此外，强大而成熟的服务器端小部件库仅可用于java后端(例如vaadin)。如果你的后端是php,python或ruby，那么编写自己的服务器端ui框架可能是一个严重的过度。使用客户端与服务器相对立的javascript ui框架要方便得多。Dojo, qooxdoo等

你似乎倾向于客户端mvc框架。这是一个很好的方法，但是双重mvc架构(服务器端和客户端)往往会导致代码重复和混乱。因此，我不推荐混合方法。

你可以有一个合适的mvc框架在前端，只有一个服务器端模型层，通过restful api(或rpc，如果你是如此倾向)与应用程序交互。

既然你来自flex背景，我建议你检查Ajax.org ui平台http://ui.ajax.org。他们的用户界面框架是基于标签的，就像flex一样，虽然这个项目是新的，但他们有一组强大的小部件和非常令人印象深刻的图表和数据绑定解决方案。Dojo和Ample SDK也采用了基于标签的小部件布局系统。

Qooxdoo和extjs提倡通过javascript完成从布局到渲染的所有事情，这可能对您不方便。

我是一个移动Web应用程序的架构师，该应用程序有100,000个用户，其中20,000个用户同时在线。

对于这种应用程序(例如，有限的带宽)，我认为#2是唯一的选择。

所以服务器端只是一组数据服务，客户端使用纯AJAX RPC。在本例中，我们使用包含所有内容的单个静态index.htm文件。另外，我们使用HTML5清单来减少启动时脚本/样式/图像到服务器的往返。加上localStorage用于应用状态持久化和缓存。

作为MVC:有许多模板引擎在那里，所以你可以使用任何最方便的你。模板本身是非常紧凑的，因为它们不包含任何数据，所以(在我们的例子中)包含它们是可以的。

是的，这种应用程序的体系结构需要事先考虑清楚。#1选项不是那么关键——入门级别较低。

我不知道你的目标平台是什么，但正如我所说的，第2条可能是手机平台的唯一选择。

相关文章：