创建高性能AJAX网站的5条技巧和经验.doc

在现代web网站和应用开发中，AJAX对于web开发人员来说绝对不是一个陌生字眼儿，实际上全球很多的知名网站都早已经开始大量的使用AJAX技术，作为国内的一线网站来说，例如，淘宝，百度，或者是腾讯也都大量的在网站开发中使用了AJAX技术。 在今天这篇技术分享文章中，我们不会介绍什么是AJAX，也不会介绍如何实现AJAX，但是我们会介绍5个非常实用的AJAX驱动网站开发中应该着重使用的开发技巧，如果大家也在web项目或者网站中大量使用AJAX技术的话，相信会对你提供非常有参考意义的指导性经验，希望大家喜欢！ 使用事件（Event）代理机制 对于基于AJAX的网站来说，我们可能常常需要保证事件所绑定的元素必须存在，很多初学AJAX的朋友经常碰到如下代码（jQuery）不起作用的情况： script $(#ok).click(function(){ ... }); /script 在大多数情况下，原因在于绑定的元素还没有存在于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（订阅）模式。 这种模式的好处在于帮助你有效地解决了代码的松散依赖问题( HYPERLINK /gb/share/2295.htm \l /wiki/Loose_coupling 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 * /cowboy/jquery-tiny-pubsub * * 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)); 这个代码可以帮助你生成相关发布/订阅的方法，如果你想了解更多，可以参考如下地址： HYPERLINK /gb/share/2295.htm \l /cowboy/jquery-tiny-pubsub \t _blank /cowboy/jquery-tin