一聚教程网:一个值得你收藏的教程网站

热门教程

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

时间:2022-06-25 17:42:37 编辑:袖梨 来源:一聚教程网


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

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

2、js加载总是失败。

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

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

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

1、屏蔽ie的部分特效。

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

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

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

if($.fn.cookie)//这里以jquery-cookie.js插件为例
{
 ready_cookie();//执行需要cookie插件的函数
}
else
{
 $.getScript('jquery-cookie.js',function()
 {
  ready_cookie();//执行需要cookie插件的函数
 });
}
 
function ready_cookie()
{
 //code
}

本质是这样的:

$.ajax(
{
 url: 'jquery-cookie.js',
 dataType: "script",
 success: function()
 {
  ready_cookie();//执行需要cookie插件的函数
 }
});

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

1、getScript方法介绍

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

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

$.ajax({
  url: url,
  dataType: "script",
  success: success
});
getScript是它的高级用法,如get、post、getJSON差不多,都是基于ajax的运用和延伸。可以这么用:

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

完整使用方法是这样的:

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

//如果需要指明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里面的部分内容是这样的:

// other code
 
// 部分1
$(funtion()
{
 alert(1);
});
 
// 部分2
$(window).load(function()
{
 alert(2);
});
 
// other code

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

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

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

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

热门栏目