JavaScud | Forum | JIRA | Blog |
  Dashboard > DWR中文文档 > ... > Ajax Documentation > Single-page vs Multi-page
  DWR中文文档 Log In View a printable version of the current page.  
  Single-page vs Multi-page
Added by 黑灵, last edited by 黑灵 on Sep 25, 2006
Labels: 
(None)

Ajax: 单页面 vs. 多页面

你现在已经决定要开发一个Ajax网站,那么你是计划用多页面实现还是就用一个页面呢? 目前为止我已经看见很多关于这方面的整理,所以在这里我根据自己开发的Ajax应用整理了一些要点。

多页面相对简单

多页面实现相对简单有3个原因:

  • 它是你习惯的方式
  • 在多页面中可以随意的使用书签
  • 历史(有后退按钮支持)也很容易实现

可选择的库

在Java领域里有2组Ajax库,我想大多数语言也一样。一组是基于RPC的Ajax库(DWR, JSON-RPC-Java...),它们可以和一些原有的出色Javascipt库Dojo, Script.aculo.us, DWRUtil...)很好的配合。另一种使基于Tag的Ajax库(AjaxTags, AjaxAnywhere...)。基于RPC的库可以用在任何环境,但是基于Tag的库只能用于多页面模型。所以如果你打算用基于Tag的库,那么就要选择多页面模型。

多页面模型能提供更快的初始下载

'能'在这里是表示操作的词。一般来说HTML在Ajax应用中只占一小部分, 所以额外的下载没有什么意义。如果你的Javascript在单独的文件中,那么你可能得到比较理想的效果,当然多页面模型会使总共的下载量比较大。

微软正在start.com做一些有趣的尝试:动态下载,局部下载。类似这样的高级技术就使多页面模型黯然失色了。在多页面模型的所有优势中,这一点明显是弱势。

但是

尽管如此,如果你要创造最好的用户体验,单页面的设计会带来一些好处:

高级的历史机制

有很多途径可以使你的web应用支持后退按钮:

如果你还打算做的更好一些(即使用Dojo和RSH你也需要做一些工作),你可以创建一些灵巧的工具例如"你在找的东西"。让用户只需要点击一下鼠标就可以任意的跳转到某一个历史点,去看看它们去过哪些地方。

更快的显示

Ajax的一个优点就是更快的加载时间。单页面设计可以使页面更快的展现在用户面前,并且你可以试用类似Script.aculo.us这样的类库来实现一些Fade效果。这样的技术不仅仅是为了吸引眼球,一些研究表明当页面上什么也没发生的时候用户会感觉得等待时间很长,一些简单的动画效果会使用户感觉web应用程序更快,即使事实不是这样。

共享组件

在最近的一个web应用程序中有一些对话框经常出现在站点的不同位置,单页面设计可以使共享这些对话框很容易,也可以使用户下载量更少。

建议

你可能已经意识到了在这方面没有一个绝对正确的答案。所以最好的选择是根据情况决定。

我在这里仅仅说明了一部分 - 一个页面或多个页面。在现实中我们通常可以选择少量的页面,这样既可以利用自动历史和书签机制优点,也可以利用单页面设计的优点。

关键是看你怎么编码,其实你可以在开发过程中改变方式。所以最好是你页面中的HMTL的id属性在全局保持唯一。一般我会为每部分定义前缀以保证HTML的id是唯一的。

我最近把一个74个JSP页面的应用转变成了一个页面的DWR应用。这一过程非常有趣。结果这个页面令人惊奇的小 - 450行HTML和200行CSS - 并没有变成我原来想象中的"河马"。

如果我重新做这个项目的话,我可能会小心的设计成3或4个页面。这样我就可以不用RSH或Dojo来实现后退按钮和书签了。

总之,没有"正确"答案,要根据情况来定。单页面设计很难,但是可以给你更好的结果。

多数来至于Google(GMail, Reader, Maps), Yahoo (Oddpost), and Microsoft (Kahuna, Start)的设计都是单页面的。其他的是以简化页面的方式(例如Writely.com)。它们都是在提供"用户友好"界面上下功夫。

Site running on a free Atlassian Confluence Open Source Project License granted to WebWork China. Evaluate Confluence today.
Powered by Atlassian Confluence, the Enterprise Wiki. (Version: 2.5.3 Build:#808 May 29, 2007) - Bug/feature request - Contact Administrators