jquery ajax的二次封装和ajax缓存代理组件:AjaxCache的详细说明

虽然jquery较新的api已经非常有用，但在实际工作中进行二次封装是必要的。优点如下：1 .二次封装后的API更简洁，更符合个人习惯；2.您可以对ajax操作进行一些统一处理，例如附加随机数或其他参数。同时，在我们的工作中，也会发现有一些ajax请求的数据，对实时性要求不高。即使我们第一次缓存请求的数据，然后在再次发起相同的请求时直接返回之前缓存的数据，也不会影响相关功能。通过这种手动缓存控制，减少了ajax请求，这可以帮助我们或多或少地提高网页的性能。本文介绍我自己在这两个问题上的实践，欢迎交流和指正。

点击代码下载(注意：因为使用了ajax，所以不能在文件协议下运行，必须在http下运行)。

1.封装jquery的ajax。

其实这部分的相关内容在之前的一篇博客中已经介绍过了，只是引用，并没有详细说明。另外，ajax cache代理组件的实现也是基于这个经过二次封装的ajax组件，所以这里有必要详细说明一下，虽然实现并不复杂(详见注释):

define(function (require，exports，module){ var $=require(' jquery ')；//根据几个关键参数，创建ajax对象函数create (_ URL，_ method，_ data，_ async，_ datatype){//添加随机数if (_url.indexOf('？').)-1){ _ URL=_ URL ' rnd=' math . random()；} else { _url=_url '？rnd=' math . random()；}//在请求中加入ajax logo，方便后台区分ajax和非ajax请求。_ url=' _ ajax=1//返回jquery创建的ajax对象，这样就可以通过//添加回调了。完成了。失败。总是在从外部获得这个对象之后。//这是为了保留jquery ajax的有用部分，返回$。Ajax ({url3360 _ url，datatype3360 _ datatype，async: _async，method: _method，data : _ data })；} //ajax是这个组件唯一的全局实例，它的实例方法通过下面的循环代码添加//methods对象来配置Ajax:///name : method name//method : http request方法的每个实例方法的参数。Orpost//async:在发送请求时是异步的//dataType:返回数据类型，html或JSON var Ajax={}，方法=[{name:' html '，method:' get '，async: true，dataType: 'html' }，{ name: 'get '，method: 'get '，async: true，dataType: 'json' }。//因为为每个外部提供的实例方法创建ajax的逻辑需要相同//，所以每个实例方法都是以这种方式统一定义的。//关键代码是下面代码中立即调用的函数。//它返回一个新的闭包函数作为(var i=0，l=methods.lengthI l；I){ Ajax[方法][I]。name]=(function(I){ return function(){/* * *每个实例方法接收三个参数*第一个代表要请求的地址*第二个代表要提交给后台的数据，它是一个object对象。例如，{param1: 'value1'} *第三个表示后台返回的数据类型，最常用的是html或json。在大多数情况下，不会传递此参数，但将使用方法中定义的数据类型*/var _ URL=参数[0]，_ data=参数[1]和_ datatype=参数[2]。返回create(_url，方法[i]。方法，_数据，方法[i]。async，_ DataType)；} })(I)；}返回ajax});这个ajax组件的主要任务是：1)统一提供随机数参数和Ajax请求标识符；jquery的api打包，提供给外界的方法越来越清晰。用法：

define(function (require，exports，module){ var Ajax=require(' mod/Ajax ')；//请求html内容Ajax.html(' html/demo '，{param1:' value1 '，param23360' value2'})。完成(函数(响应){//请求成功回调})。fail(function(){ //请求失败回调})。//请求json数据Ajax.get ('API/demo '，{param1:' value1 '，param2:' value2'})。完成(函数(响应){//请求成功回调})。fail(function(){ //请求失败回调})。//请求json数据Ajax。POST ('API/demo '，{param1:' value1 '，param2:' value2'})。完成(函数(响应){//请求成功回调})。fail(function(){ //请求失败回调})。//通过GET发送同步请求，获取json数据Ajax.syncget ('API/demo '，{param1:' value1 '，param2:' value2'})。完成(函数(响应){//请求成功回调})。fail(function(){ //请求。//以POST的形式发送同步请求，获取json数据Ajax.syncpost ('API/demo '，{param1:' value1 '，param2:' value2'})。完成(函数(响应){//请求成功回调})。fail(function(){ //请求。});因为该组件的每个实例方法返回的对象是由$创建的对象。ajax，我们可以使用。完成了。失败。总是像往常一样添加回调，这和直接使用$.ajax没什么区别，为什么API要设计成html、get、post、syncGet、syncPost，甚至dataType基本都是固定的？

这是因为在项目中，我们可以完全规定在发出异步请求时只能使用html或json数据类型，而不允许使用其他数据类型。现在web项目的这两种方式已经完全足够了，至少我从来没有遇到过必须使用其他数据类型的情况。而在实际工作中，html、get、post、syncGet、syncPost几乎可以覆盖我们需要的所有异步请求场景。每当我们想要使用ajax时，我们只考虑三个问题：get或post、同步或异步，以及请求是html还是json。所有这些问题都可以通过它们来解决。当然，jsonp和rest API是另外两种情况。这个组件不适合他们，这也是它的局限性。它仍然倾向于在传统的网络项目中使用。

2.ajax缓存代理。

要实现一个简单的ajax缓存代理组件，我们必须首先了解这个缓存代理的角色。在本文的开头，我们已经提到了缓存代理的应用场景：当第一次使用缓存代理发起请求时，我们在请求成功后缓存数据，然后在再次发起相同的请求时直接返回之前缓存的数据。缓存代理的作用是控制何时发送请求在后台加载数据，以及何时直接从缓存中读取之前加载的数据，而不发送请求。为了实现简单的缓存代理，有三个问题需要解决：

1)代理对象必须具有与代理对象相同的API。就拿前面的Ajax组件来说，它提供了html、get、post、syncGet、syncPost方法，那么它的代理对象也必须同时拥有这些方法，并且调用的方法和传入的参数必须完全一致。只有这样，当我们使用代理对象时，它与使用原始组件对象没有什么不同。另外，在缓存代理中，在一定条件下需要调用原始组件对象发送ajax请求。如果接口不一样，调用方法不一样，参数不一样，如何保证内部能够正确调用原来的组件对象？这个条件的另一个优点是，当我们下次不想使用代理对象时，我们可以以最低的成本用原始组件对象替换代理对象。这实际上是设计模式中代理模式的基本要求。

2)缓存索引问题缓存数据存储时，也就是说，我们可以用什么样的索引来保证缓存后可以根据请求的信息找到相同的请求数据？Ajax缓存不同于其他缓存，因为它请求的地址可能包含可变参数值。如果同一地址后面的参数不同，对应的请求结果可能也不相同。因此，为了简单起见，我们可以考虑将请求的地址和请求的参数统一为缓存索引，以便可以简单地管理缓存。同时，考虑到其他可变性，应该还有一些其他需求，如后面组件实现中的注释所示。

3)缓存有效时间虽然要实现的缓存代理非常简单，但是必须考虑这个问题。对于每个缓存代理实例，缓存数据的有效时间不一定相同，有些可能只缓存几分钟，而有些可能缓存几十分钟。当缓存时间到期时，缓存代理必须删除原始缓存，然后重新加载数据。

针对这些问题，基于第一部分中的Ajax组件，缓存代理组件AjaxCache的代码如下(详细说明附注释):

define(function (require，exports，module){ var $=require(' jquery ')；var Ajax=required(' mod/Ajax ')；//缓存列表var cache={ }；/* * *生成缓存索引：*因为索引是根据url和数据生成的(数据是一个对象，存储的是Ajax应该提交给后台的数据)*，如果想要相同的url，相同的数据可以有效使用缓存，*不要每次都在url和数据中包含可变参数值，比如随机数等。*例如，有一个请求：* url: aaa/bbb/cccc？r=0.312738 * data : { name 3360 ' JSON ' } *其中url后的r是一个随机数，每次从外部发起这个请求时，r的值都会发生变化*因为每次r都不一样，最终会导致缓存索引不同。因此，缓存将不会命中。*注意：随机数可以放在原来的Ajax组件中。* *还有，如果是同一个界面，最好统一同一个页面中URL的路径类型，要么是相对的，要么是绝对的。*否则，缓存将无法得到有效管理。*/函数生成cachekey (URL，数据){返回URL $。参数(数据)；}返回函数(opts){ opts=opts | | { }；var cacheInterval=opts . cacheInterval | |(1000 * 60 * 60)；//缓存有效时间，默认为60分钟。var proxy={ }；for(Ajax中的var I){ if(object . prototype . hasown property . call(Ajax，I)) {//在代理对象上定义Ajax组件的每个实例方法的代理//注意这个立即调用的函数表达式//它返回一个闭包函数，这是最终的代理方法代理[I]=(function(I){ return function(){ var _ URL=arguments[0]。_data=参数[1]，cacheKey=generate ecachekey(_ URL，_data)，cacheItem=cache[cacheKey]，isCacheValid=falseif(cacheItem){ var Curtime=new Date()；If (curtime-cacheitem。cachestarttime=cache interval){//如果请求时间和缓存开始时间之间的间隔在缓存有效时间范围内，则表示缓存有效isCacheValid=true} else {//否则清除缓存删除缓存[cacheKey]；}} if (isCacheValid) {//模拟一个异步任务返回缓存的数据//将对象延迟$ Delay，这样可以保证这个模拟任务返回的对象与原来的Ajax组件调用返回的对象具有相同的API //这是代理的关键：代理对象和被代理的对象应该具有相同的API//只有这样，当我们取消代理时，我们才不会修改那些使用代理的组件。var $ defer=$。延迟setTimeout(函数(){ $ delay . resolve(cacheitem . RES))；}, 10);返回$。何时(延期)；}//当缓存失败或者没有缓存时，调用与原Ajax组件同名的方法，在后台请求数据。返回Ajax [I]。应用(Ajax，参数)。done(function(RES){//请求成功后缓存结果。并将当前时间记录为缓存的开始时间[cachekey]={res:res，缓存开始时间： new date()} })；} })(I)；} }返回代理；};});

在第一部分和这一部分的实现中，最关键的是立即调用的函数表达式。没有它返回的闭包，代码就会有问题，这也是循环中闭包应用的经典问题。3.演示效果。

为了说明缓存代理的使用效果，我做了一个演示效果：。

其中，ajax.js是第一部分的实现，ajaxCache.js是第二部分的实现，演示页面对应代码中的html/demo.html，相关的js是js/app/demo.js:

define(function (require，exports，module){ var AJaxcache=require(' mod/AJaxcache ')；//创建代理对象varajax=new jaxcache({ cache interval : 10 * 1000 })；var计数=5；Console.log('时间点：0，计时器开始！');t=set interval(function(){ if(count==0){ console . log(' time point:the '(5-count 1)* 4 ' s，计时器结束！'。);返回clearInterval(t)；} else{ console.log('时间点：第一个'(5-count 1) * 4个')；} Ajax.get('./api/data.json '，{ name: 'felix' })。完成(函数(RES){ if(RES . code==200){ console . log(5-count)'。数据为： ' JSON . stringify(RES . data))；} });计数-；},4000);});

在这段代码中，我创建了一个代理对象，它可以缓存ajax请求10s，并使用一个计时器调用代理对象的get方法五次来发送同一个请求。最终打印效果如下：。

根据结果，整个代码执行了24秒，代理发送请求的时间点分别为4秒、8秒、12秒、16秒和20秒。由于代理的缓存有效时间为10s，第4次是第一次发送请求，此时肯定会发送真正的ajax请求。当第8个和第12个代理发送相同的请求时，缓存仍然有效，因为它离缓存只有4秒和8秒，在这两个时间点没有发送实际的ajax请求。但是，当发送16s请求时，已经是第一个请求的缓存时间后12s，缓存已经过期，所以代理发送了另一个真正的ajax请求，然后缓存被刷新。20s请求仍在最新的缓存有效时间内，因此不会发送实际的ajax请求。最后，在网络中，我们可以看到代理发送了5个请求，但只请求了2个服务。如果延长缓存有效时间，可以减少对后台的请求数量，这也是缓存代理提高前端性能的关键。

我希望这个演示能让您更清楚地了解缓存代理的作用。

4.本文摘要。

本文第一部分总结的实现在我自己的工作中得到了广泛的应用，至少没有遇到什么问题，但也有可能是我没有遇到。毕竟，在那个组件实现中仍然有许多限制。第二部分的实现刚刚应用到我的工作中。只有一个函数我考虑了缓存的必要性，所以我写了一个相对简单的实现。虽然很简单，但已经解决了我的问题。实际工作就是这样。有些东西没必要事先设计完美，先解决问题，遇到新问题再回来重构。有时候也是一种比较好的工作方法。下一篇博客介绍了另一个使用缓存代理的组件的实现思路，类似于省市级联的功能，但我想写一个更通用的组件，可以尽可能的脱离html结构和css。请继续关注。

以上jquery ajax的第二次封装，以及ajax cache代理组件：AjaxCache的详细讲解，都是边肖与大家分享的内容，希望能给大家一个参考和支持。