jquery getScript动态加载JS方法改进详解


Posted in Javascript onNovember 15, 2012
$.getScript(url,callback)

这个方法是jquery自身提供的一个用于动态加载js的方法。当网站需要加载大量js时,动态的加载js就是一个比较好的方法,当需要某个功能时再将相应的js加载进来。
但是自己在使用过程中却发现了一些不尽如意的地方。

jquery getScript动态加载JS方法改进详解


每次需要执行该功能的时候都会去请求一次这个js,这样不是在帮倒忙嘛?
于是找到Jquery官网的API说明 http://api.jquery.com/jQuery.getScript/
其实这个方法就是对ajax方法的一个封装,可以使用ajax方法的缓存来将http状态200变成304,从而使用客户端的缓存:
$.ajaxSetup({ 
cache: true 
});

于是,会发现每次调用这个功能的时候,变成了如下所示:

jquery getScript动态加载JS方法改进详解


每次调用js时后面的类似"?_=13126578"的参数已经没有了,并且状态都是Not Modified。
但是我有点“洁癖”,每次使用这个功能,虽说服务端不用再返回整个js文件了,但是每次还是得请求一次服务器,总觉得不舒服。于是便诞生了这篇博客的标题。
不多说,先上代码:
<!DOCTYPE html > 
<html> 
<head> 
<meta charset="utf-8"> 
<title></title> 
<script src="jquery-1.7.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
//定义一个全局script的标记数组,用来标记是否某个script已经下载到本地 
var scriptsArray = new Array(); 
$.cachedScript = function (url, options) { 
//循环script标记数组 
for (var s in scriptsArray) { 
//console.log(scriptsArray[s]); 
//如果某个数组已经下载到了本地 
if (scriptsArray[s]==url) { 
return { //则返回一个对象字面量,其中的done之所以叫做done是为了与下面$.ajax中的done相对应 
done: function (method) { 
if (typeof method == 'function'){ //如果传入参数为一个方法 
method(); 
} 
} 
}; 
} 
} 
//这里是jquery官方提供类似getScript实现的方法,也就是说getScript其实也就是对ajax方法的一个拓展 
options = $.extend(options || {}, { 
dataType: "script", 
url: url, 
cache:true //其实现在这缓存加与不加没多大区别 
}); 
scriptsArray.push(url); //将url地址放入script标记数组中 
return $.ajax(options); 
}; 
$(function () { 
$('#btn').bind('click', function () { 
$.cachedScript('t1.js').done(function () { 
alertMe(); 
}); 
}); 
$('#btn2').bind('click', function () { 
$.getScript('t1.js').done(function () { 
alertMe(); 
}); 
}); 
}); 
</script> 
</head> 
<body> 
<button id="btn">自定义的缓存方法</button> 
<br /> 
<button id="btn2">getScript</button> 
</body> 
</html>

其中t1.js中代码也就是一个函数
function alertMe() { 
alert('clicked me'); 
}

到这里,整个改造就完成了,当你使用这个功能的时候,只会在初始化的时候向服务器发出一次js的请求,而加载完成后,就不会再次请求服务器了,哪怕是304状态码也不会有了。
jquery getScript动态加载JS方法改进详解 
js菜鸟一枚,还请各位轻拍,O(∩_∩)O~
Javascript 相关文章推荐
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
jQuery Validate插件实现表单验证
Aug 19 Javascript
javascript简易画板开发
Apr 12 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
JS中多层次排序算法的实现代码
Jan 06 Javascript
原生JS实现音乐播放器
Jan 26 Javascript
javascript 图片裁剪技巧解读
Nov 15 #Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 #Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 #Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 #Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 #Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 #Javascript
jquery offset函数应用实例
Nov 14 #Javascript
You might like
php处理斐波那契数列非递归方法
2012/02/04 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
安装PyInstaller失败问题解决
2019/12/14 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
小学新学期寄语
2014/04/02 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
北京奥运会口号
2014/06/21 职场文书
社区护士演讲稿
2014/08/27 职场文书
《观察物体》教学反思
2016/02/17 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python
Python中异常处理用法
2021/11/27 Python
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS