夏日博客

A-A+

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

2016年01月11日 前端设计 暂无评论 阅读 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里的，现在已移步至页面中。）

标签：

给我留言