虽然jquery的较新的api已经很好用了， 但是在实际工作还是有做二次封装的必要，好处有：1，二次封装后的API更加简洁，更符合个人的使用习惯；2，可以对ajax操作做一些统一处理，比如追加随机数或其它参数。同时在工作中，我们还会发现，有一些ajax请求的数据，对实时性要求不高，即使我们把第一次请求到的这些数据缓存起来，然后当相同请求再次发起时直接拿之前缓存的数据返回也不会对相关功能有影响，通过这种手工的缓存控制，减少了ajax请求，多多少少也能帮助我们提高网页的性能。本文介绍我自己关于这两方面问题的做法，欢迎交流和指正。
点击 代码下载 （注：因为用到了ajax，所以不能在file协议下运行，必须运行在http下）
1. 封装jquery的ajax
其实这个部分的相关内容在之前的一篇博客引入过，只不过那里面只是引用，没有详细说明，另外ajax缓存代理组件的实现也是基于这个二次封装之后的ajax组件的，所以有必要在这里对它详细说明一下，虽然实现并不复杂（详见注释说明）：
define(function (require, exports, module) { var $ = require('jquery'); //根据关键的几个参数统一创建ajax对象 function create(_url, _method, _data, _async, _dataType) { //添加随机数 if (_url.indexOf('?') > -1) { _url = _url + '&rnd=' + Math.random(); } else { _url = _url + '?rnd=' + Math.random(); } //为请求添加ajax标识，方便后台区分ajax和非ajax请求 _url += '&_ajax=1'; //返回jquery创建的ajax对象，以便外部拿到这个对象以后可以通过 //.done .fail .always来添加回调 //这么做是为了保留jquery ajax中好用的部分 return $.ajax({ url: _url, dataType: _dataType, async: _async, method: _method, data: _data }); } //ajax就是本组件全局唯一的实例，它的实例方法通过后面的循环代码添加 //methods对象配置ajax各个实例方法的参数： //name: 方法名称 //method: http请求方法，get or post //async: 发送请求时是否异步 //dataType: 返回的数据类型，html or json var ajax = {}, methods = [ { name: 'html', method: 'get', async: true, dataType: 'html' }, { name: 'get', method: 'get', async: true, dataType: 'json' }, { name: 'post', method: 'post', async: true, dataType: 'json' }, { name: 'syncGet', method: 'get', async: false, dataType: 'json' }, { name: 'syncPost', method: 'post', async: false, dataType: 'json' } ]; //由于二次封装需要对外提供的每个实例方法创建ajax的逻辑是相同的 //所以通过这种方式统一定义各个实例方法 //关键代码为下面代码中的那个立即调用的函数 //它返回了一个新的闭包函数作为实例方法 for (var i = 0, l = methods.length; i < l; i++) { ajax[methods[i].name] = (function (i) { return function () { /** * 每个实例方法接收三个参数 * 第一个表示要请求的地址 * 第二个表示要提交到后台的数据，是一个object对象，如{param1: 'value1'} * 第三个表示后台返回的数据类型，最最常用的就是html or json，绝大部分情况下这个参数不用传，会使用methods里面定义的dataType */ var _url = arguments[0], _data = arguments[1], _dataType = arguments[2] || methods[i].dataType; return create(_url, methods[i].method, _data, methods[i].async, _dataType); } })(i); } return ajax; });
这个Ajax组件主要做的事情是：
1）统一提供随机数参数和ajax请求标识；
2）对jquery的api进行了包装，对外提供的方法更加清晰明了。
使用方式：
define(function (require, exports, module) { var Ajax = require('mod/ajax'); //以GET方式请求html内容 Ajax.html('html/demo', { param1: 'value1', param2: 'value2' }).done(function(response){ //请求成功的回调 }).fail(function(){ //请求失败的回调 }).always(function(){ //请求完成的回调 }); //以GET方式请求json数据 Ajax.get('api/demo', { param1: 'value1', param2: 'value2' }).done(function(response){ //请求成功的回调 }).fail(function(){ //请求失败的回调 }).always(function(){ //请求完成的回调 }); //以POST方式请求json数据 Ajax.post('api/demo', { param1: 'value1', param2: 'value2' }).done(function(response){ //请求成功的回调 }).fail(function(){ //请求失败的回调 }).always(function(){ //请求完成的回调 }); //以GET方式发送同步请求，获取json数据 Ajax.syncGet('api/demo', { param1: 'value1', param2: 'value2' }).done(function(response){ //请求成功的回调 }).fail(function(){ //请求失败的回调 }).always(function(){ //请求完成的回调 }); //以POST方式发送同步请求，获取json数据 Ajax.syncPost('api/demo', { param1: 'value1', param2: 'value2' }).done(function(response){ //请求成功的回调 }).fail(function(){ //请求失败的回调 }).always(function(){ //请求完成的回调 }); });