Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1041629
  • 博文数量: 46
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 1701
  • 用 户 组: 普通用户
  • 注册时间: 2013-07-24 10:06
文章分类
文章存档

2014年(19)

2013年(27)

分类: Web开发

2014-01-13 14:07:58

在现代web网站和应用开发中,AJAX对于web开发人员来说绝对不是一个陌生字眼儿,实际上全球很多的知名网站都早已经开始大量的使用AJAX技术,作为国内的一线网站来说,例如,淘宝,百度,或者是腾讯也都大量的在网站开发中使用了AJAX技术。

在今天这篇技术分享文章中,我们不会介绍什么是AJAX,也不会介绍如何实现AJAX,但是我们会介绍5个非常实用的AJAX驱动网站开发中应该着重使用的开发技巧,如果大家也在web项目或者网站中大量使用AJAX技术的话,相信会对你提供非常有参考意义的指导性经验,希望大家喜欢!
使用事件(Event)代理机制

对于基于AJAX的网站来说,我们可能常常需要保证事件所绑定的元素必须存在,很多初学AJAX的朋友经常碰到如下代码(jQuery)不起作用的情况:

  

在大多数情况下,原因在于绑定的元素还没有存在于DOM中,打个比方,如果这里的id="ok"是代码动态生成的,或者是AJAX加载产生的,在这段代码绑定这个点击动作之前,并没有真正的存在于DOM中,那么如何处理呢?

还记得老版本jQuery中的.live方法吧,他将事件直接绑定到body上,因此,如果你处理的元素属于动态生成的,.live可以帮你大忙,但是在最新版本的jQuery中,我们已经放弃了.live,也不推荐使用,转而使用.on来处理类似的情况,如下:

   $("body").on("click", "#ok", function(event) {
   event.preventDefault();
   
   // 其它你需要处理的操作
   
   });

在上面的例子中,我们使用.on将事件绑定在body上,然后寻找对应的id="ok"元素。

当然,不推荐大家直接绑定到body,如果id="ok"元素拥有一个静态父层元素,你可以替换body,这样会带来更好的性能,毕竟DOM操作是非常消耗资源的。
使用Pub/Sub方式来处理事件

在AJAX开发中,我们应该使用Pub/Sub方式,即 publish(发布) 和 subscribe(订阅)模式。

这种模式的好处在于帮助你有效地解决了代码的松散依赖问题(Loose coupling),下面是一个非常简单的AJAX代码:

   jQuery.ajax({
   url: '/gbtags'
   }).done(function(data) {
   
   //发布一个页面加载完毕的信号,以便执行处理代码
   publish("/page/loaded", data); //参数是对应的时间和数据});
   
   // ... 其它的处理数据的方法和模块,比如,根据数据生成相关的报表
   subscribe("/page/loaded", function(data) {
   //一旦,接受到信号,立刻调用对应的处理方法
   createDataReport(data);});
   
   // ... 或者,根据数据生成一个饼图
   subscribe("/page/loaded", function(data) {
   //其它的处理方法,用来执行其它功能
   createPieChart(data);});

以上代码中我们使用了一个最基本的subscribe和publish设计模式,当然,这里有一个相关的小插件,代码非常简单如下:

   /*
   * jQuery Tiny Pub/Sub
   *
   *
   * Copyright (c) 2013 "Cowboy" Ben Alman
   * Licensed under the MIT license.
   */
   
   (function($) {
   
   var o = $({});
   
   $.subscribe = function() {
   o.on.apply(o, arguments);
   };
   
   $.unsubscribe = function() {
   o.off.apply(o, arguments);
   };
   
   $.publish = function() {
   o.trigger.apply(o, arguments);
   };
   
   }(jQuery));

这个代码可以帮助你生成相关发布/订阅的方法,如果你想了解更多,可以参考如下地址:

web前端开发中,使用pub/sub模式的好处在于,调用一个发布Pub,可以激活N个订阅Sub的模块执行对应的功能,代码及其模块会相对非常好管理,数据和处理代码的分离,带给了我们更方便维护和更新代码的潜力。
处理AJAX的页面URL

一个优秀的AJAX网站,不单单是帮助快速的呈现内容,也得准确的展示当前页面的URL。这样能够非常方便的允许用户收藏当前的地址,或者向前向后来查询历史记录。

这里有一个非常好的jQuery插件帮助你处理AJAX页面URL:

或者HTML5的history API:https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
保证AJAX网站拥有一个正确的加载中提示

AJAX机制的网站或者应用对于实际的用户来说,有一个非常大的问题,浏览器不会显示当前页面AJAX加载部分的进度,因此一定要提供用用户一个非常便于理解的加载中提供,简单的可以是一个spinner,或者文字,总之一定要让你的用户了解目前的操作情况,这对于用户体验来说至关重要,问题随小,但是一定需要!

这里是一个最简单的实现方式:
通过URL来有效的缓存页面请求的结果

对于web或者网站来说,有效地减少请求的次数,绝对是大大的提高网站整体性能,所以使用一定的缓存技术来说,对于一个大量使用AJAX的网站至关重要。针对URL来做一定的缓存处理非常有必要,以下是一个非常简单的缓存处理代码机制演示:

   var cache = {};
   针对指定URL来缓存数据
   cache[url] = data;
   ... ...
   //判断是否是缓存URL,如果已缓存,直接返回缓存数据,否则调用AJAX来请求数据
   if(cache[url]) {
   // 回调缓存数据
   return successCallback(cache[url]);
   }
   else {
   // ... 执行AJAX来获取数据并且缓存
   }

缓存操作不单单对于同一页面的重新加载有效,更有效地是对于用户使用返回或者前进按钮。相信这些性能辅助代码对于一个大访问量的服务器来说,肯定将非常受欢迎
阅读(4292) | 评论(1) | 转发(4) |
给主人留下些什么吧!~~

CU博客助理2014-03-10 16:26:49

博客官方:请发布自己的原创作品参加评选活动。