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

时间:2011-08-09 22:03:47

标签: javascript ajax model-view-controller backbone.js

这是一个非常通用的问题,但我来自Flex的几年,我对纯web开发并不是很有经验。

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

  1. 经典服务器端MVC,其中控制器返回随模型数据提供的视图。意见可以是全面的或部分的。基本上,只有少量完整的视图,作为容器,javascript将有助于异步填充部分HTML视图的空白。这种方法比传统的Web开发更进一步,因为javascript仅用于维护整体控制和用户交互

  2. 一个完整的js应用程序,例如使用Cappuccino,Sproutcore或Backbone.js构建的应用程序,客户端很厚,并实现了MVC的客户端实现,它也处理模型,作为控制logi,并查看交互。在这种情况下,服务器端扮演一组JSON / XML服务的角色,客户端使用这些服务交换数据。在这种情况下的缺点是,当初始应用程序被引导时,必须在开始时加载视图模板,以便javascript可以基于数据布置标记。优点是减少了服务器响应的重量,以及客户端内更好的控制,这允许应用视图模型绑定之类的东西。

  3. 这两者之间有点混合。

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

    请评论

3 个答案:

答案 0 :(得分:2)

我自己更喜欢#2,但我挖了javascript :)

不幸的是,我甚至从未见过灵活编码的样子。我的经验是使用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结尾的单独文件中,但第二种方法可以在任何地方使用,并且您仍然可以获得大部分相同的好处。

答案 1 :(得分:0)

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

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

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

从MVC开始:有are many template engines out there所以你可以使用对你来说最方便的东西。模板本身非常紧凑,因为它们不包含任何数据,因此可以将它们全部包含在内(在我们的例子中)。

是的,此类应用程序的架构需要事先仔细考虑。 #1选项不是那么关键 - 入门级别较低。

我不知道你的目标是什么平台,但正如我所说,#2可能是移动设备的唯一选择。

答案 2 :(得分:0)

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

  

视图模板必须在初始时加载   应用程序是自举的,因此javascript可以布局标记   基于数据。

不正确。你可以根据需要通过ajax动态加载静态模板,然后使用javascript将它们渲染成完整的小部件。 例如,如果您有一个带有图像编辑器组件的图像库,那么在用户实际选择编辑图像之前,您可能无法加载图像编辑器所需的文件(包括图像,模板和窗口小部件呈现代码)。

使用scriptloaders(例如requirejs,labjs),您最初只能加载一个中小型引导脚本,然后根据需要动态加载其余脚本。

此外,功能强大且成熟的服务器端窗口小部件库仅适用于Java后端(例如vaadin)。如果您正在使用php,python或ruby后端,那么编写自己的服务器端ui框架可能是一个严重的过度杀伤。使用客户端服务器激动的javascript ui框架例如,更方便。道场,qooxdoo等。

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

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

由于您来自flex背景,我建议您查看Ajax.org ui platform http://ui.ajax.org。他们的用户界面框架基于标签,如flex,虽然项目是新的,但他们有一套强大的小部件和非常令人印象深刻的图表和数据绑定解决方案。 Dojo和Ample SDK也采用基于标签的小部件布局系统。

Qooxdoo和extjs主张通过javascript进行布局和渲染,这可能对您不方便。