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 相关文章推荐
深入浅出理解javaScript原型链
May 09 Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
微信小程序日历组件使用方法详解
Dec 29 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
es6函数name属性功能与用法实例分析
Apr 18 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连接mssql:pdo odbc sql server
2011/07/20 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
python分割文件的常用方法
2014/11/01 Python
python使用socket向客户端发送数据的方法
2015/04/29 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
外语学院毕业生的自我鉴定
2013/11/28 职场文书
党建示范点实施方案
2014/03/12 职场文书
学校招生宣传广告词
2014/03/19 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
安装工程师岗位职责
2015/02/13 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书