A-A+

jQuery中getScript()使用方法与优缺点分析

2016年01月11日 web前端设计 暂无评论 阅读 6 views 次

getScript函数非常的强大可以直接加载外部的一些js文件从而实现了跨域数据处理了,下面我们起来看一些关于getScript()使用方法与优缺点分析了。

目前做的主题,含有大量的js,以前是全部压缩到2个文件里的,两个文件都很大,在现代浏览器中运行毫无压力。但是,对于残疾的ie来说,那简直就是受罪。会随机出现以下状况:

1、js加载无任何错误,但就是没有特效。

2、js加载总是失败。

3、js加载过慢,导致用户失去耐心。

4、js加载过多,导致浏览器性能下降不少。

目前这款主题,是越做越杂了,超过了当时简洁的想法,几乎涵盖了所有能想到的内容。所以,在对待所有浏览器相同的待遇时,ie的表现让人蛋疼不已。所以有了以下几个方法:

1、屏蔽ie的部分特效。

2、异步加载js文件,用到该文件再加载,并且不重复加载。

目前已修改完毕,等待测试。

当然,这里主要讲的就是getScript方法,这个方法是$.ajax的高级方法,就像$.post,$.get一样是封装好的ajax特殊用法。getScript可以这么用:

  1. if($.fn.cookie)//这里以jquery-cookie.js插件为例  
  2. {  
  3.  ready_cookie();//执行需要cookie插件的函数  
  4. }  
  5. else  
  6. {  
  7.  $.getScript('jquery-cookie.js',function()  
  8.  {  
  9.   ready_cookie();//执行需要cookie插件的函数  
  10.  });  
  11. }  
  12.    
  13. function ready_cookie()  
  14. {  
  15.  //code  
  16. }  

本质是这样的:

  1. $.ajax(  
  2. {  
  3.  url: 'jquery-cookie.js',  
  4.  dataType: "script",  
  5.  success: function()  
  6.  {  
  7.   ready_cookie();//执行需要cookie插件的函数  
  8.  }  
  9. });  

这里是个简单的用法,在加载脚本的时候,脚本是不会缓存在客户端的,因为每次异步加载的时候会带上一个时间戳的。
1、getScript方法介绍

Load a JavaScript file from the server using a GET HTTP request, then execute it.

——官方如是说

有两个特征,一是能够使用get的http请求服务器资源下载到本地,二是能够在加载完毕之后并执行这个脚本。它的深层次的写法是这样的:

  1. $.ajax({  
  2.   url: url,  
  3.   dataType: "script",  
  4.   success: success  
  5. });  

getScript是它的高级用法,如get、post、getJSON差不多,都是基于ajax的运用和延伸。可以这么用:

  1. $.getScript("ajax/test.js"function(data, textStatus, jqxhr) {  
  2.    console.log(data); //data returned  
  3.    console.log(textStatus); //success  
  4.    console.log(jqxhr.status); //200  
  5.    console.log('Load was performed.');  
  6. });  

完整使用方法是这样的:

  1. $.getScript("ajax/test.js")  
  2. .done(function(script, textStatus) {  
  3.   console.log( textStatus );  
  4. })  
  5. .fail(function(jqxhr, settings, exception) {  
  6.   $( "div.log" ).text( "Triggered ajaxError handler." );  
  7. });   

如果需要指明cache等更多参数,请使用$.ajax()

2、getScript优点

正如她的特点一样,优点很明显,那就是异步请求,在页面快速载入1KB的基本js之后,然后分段依次载入100KB的脚本,当然这是假设情况。我们熟悉的QQ空间就是利用这样的原理,一步一步的部署运行环境的,能够减少客户端的压力,并且页面的呈现不会因为js庞大而戛然而止或者止步不前。

3、getScript缺点

他的缺点就是加重了客户端对服务器的请求次数。缺点相比优点来说,似乎可以忽略。

4、我所遇到的问题

第4部分才是我今天写这篇博文的主要目的。问题是这样的:

先假设有2个脚本:a.js(1KB) 和 b.js(100KB)。页面加载的时候,载入结构、样式、还有这1KB的a.js。在文档准备完毕的时候,载入b.js,即document ready的时候。这里的载入方法就是用到getScript。现在问题来了,假设100KB的b.js里面的部分内容是这样的:

  1. // other code  
  2.    
  3. // 部分1  
  4. $(funtion()  
  5. {  
  6.  alert(1);  
  7. });  
  8.    
  9. // 部分2  
  10. $(window).load(function()  
  11. {  
  12.  alert(2);  
  13. });  
  14.    
  15. // other code  

两部分代码的不同点是,他们的执行条件不一样。当然,如果这样一个脚本是没有任何问题的,而一旦使用getScript方法即ajax方法载入之后,有概率不会执行第二部分的方法。这不是个例,是概率,发生的情况无法描述,没有脚本报错,页面正常不过,但就是不执行。发生的浏览器有谷歌等常用浏览器。

遇到这样的问题,解决办法有2:

1、把window.load里的代码放到ready里。(检测是否有新评论,原来是放在onload里的,现在已移步至ready中。)

2、不使用ajax引用javascript。(代码高亮脚本,原来是放在onload里的,现在已移步至页面中。)

标签:

给我留言