AJAX 设计式.docVIP

AJAX 设计模式 原名：AJAX Design Patterns 摘自 由Snyke发表 Fishbone译 我想到现在为止，没听说过AJAX的人应该为数不多了吧，甚至没有关注过web开发的人也能感受到新技术的潜力。大家一定已经看烦了那些关于AJAX的介绍文章，介绍AJAX是多么神奇，并拿GOOGLE SUGGEST，GMAIL等等技术来说明AJAX的前途，因此我就不再重复介绍AJAX的发展历史等等了，而直接说说在真实世界里该怎么去应用它。 那么我这里所讲的文章跟其他的有什么不同呢？不管是与否，我这里所讲的不是利用AJAX创建一些奇特的小程序，而是讲讲怎么用AJAX来设计和开发一个完整的网站。为了增加文章的可读性，避免使用一些可读性较差的底层代码，我决定用dojo的开发工具toolkit来讲，我也曾经打算采用prototype的js库来讲，因为它写的很好，而且简单易用，但是dojo给我们提供了更多封装好的功能。无论哪种框架，都有一个共同的缺陷：缺少详细的说明文档，我们需要花费很多时间在调试上或在阅读一些解读它代码的文章来帮助理解。 对于调试，我建议用firefox浏览器的自带调试工具来调试，它真的是一个不错的调试工具，它能让AJAX更容易理解，特别是它的调试日志记录了每个AJAX的请求信息。 本文章，我们将利用AJAX来设计一些组件做为我们交流的入口，当然也得设计一套基本的开发工具，以帮助我们开发更加复杂的程序。 我们想要什么？ 做为一个开发者，我们需要在开始开发之前知道我们要怎么去做。需求分析不是本文章的一部分，所以我们只讲设计模式的一些基本原则： 对于页面：加载和显示的HTML代码越简单越规范越好。 对于用户：我们需要很好的交互性，所以让用户自己注册，建立资料，并能和其他用户交互这是最基本的功能。 对于消息：有些能及时收发消息的web通讯做的很不错，运行起来也简单，而且他可以实现用户和用户只间的交互。 论坛：要交流技术或者其他什么话题，那么没有比论坛更合适的了。 很多功能将在以后加上去，但是对于现在，上述的这些功能就暂时能满足当前的需求了。 页面设计 虽然说我们的重点应该放在开发功能上面，但是设计对于程序来说还是同等重要的。如果一个程序写的很好，但是却没有很好的交互性，那么它也就没什么用处了。我们这里将设计一个简单的页面： 1. 内容区域 2. 边缘导航菜单 3. 主菜单(各个组件之间的调用都是建立在这个主菜单之上的) 4. 页面标题，没什么好说的 5. 在线用户列表 组件 以AJAX为基础框架的话，我们就可以摆脱老页面的一时一页的模式，来谈谈多事件模式或者MVC-模式。 我们可以自定义一些API方法，这些方法可以调用动态语言与后台进行交互。我们可以调用这些API方法进行一些复杂的任务。 回到本文章上，我们将用几个小的组件来布置网页，以后我们会结合虚拟组件（virtual modules）来实现一些功能。这些组件包括： 页面组件：这是我们运行的第一个组件，这里只是显示从文件取过来的内容，没什么其他特别的。 用户组件：这一组件，能完成不同的任务 注册：注册一新用户 登录： 资料：显示用户的相关信息。 在线显示：一旦发现有用户上线，就启动控件显示上线的用户信息，而用AJAX来实现这一功能，它的效果几乎是同步的，就是说一有用户上线就马上提示的，而不是延时多少时间才显示出来的。而且它的效率很高，运行简单。 论坛：还有什么比论坛的交互性更好的网站？ 代码的执行 我们将我们要用到的功能都封装到一个对象内，这很类似于java里的静态类，这样做的话，我们就可以将不同组件里的命名较清晰地分离开来。首先我们得创建一个引擎。载入其他组件以及使他们跟页面的交互都是通过引擎来处理的。然而在页面交互（包括规划，设计，……）和引擎的背后，数据的呈现和输出我们将利用层来做，因为它运行起来简单，所以不必考虑其他的HTML对象了。换句话说，我们是在开发应用程序界面。 首先要做的也是最重要的是，引擎得先将一切初始化。 var Engine = { bootstrap: function(){ this.setStatus(“Loading…”); dojo.require(“dojo.io.*”); dojo.hostenv.writeIncludes(); if((“”+document.location).indexOf(‘#’) 0){ Engine.loadPage(“#Page/Welcome”); }else{ Engine.loadPage(“” + document.location); } }, 这部分代码我想是很容易理解的，它设置了一个进度状态提示信