首页 > 其他分享 >使用jQuery加载js脚本

使用jQuery加载js脚本

时间:2023-05-19 17:01:49浏览次数:36  
标签:jQuery 缓存 js cookie getScript 加载


动态加载Javascript是一项非常强大且有用的技术。这方面的主题在本站已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js。它们很强大,但有时候也会得不偿失。如果你使用的是jQuery,它里面有一个内置的方法可以用来加载单个js文件。当你需要延迟加载一些js插件或其它类型的文件时,可以使用这个方法。下面就介绍一下如何使用它!

jQuery JavaScript

jQuery内置了一个方法可以加载单一的js文件;当加载完成后你可以在回调函数里执行后续操作。最基本的使用jQuery.getScript的方法是这样:


jQuery.getScript("/path/to/myscript.js", function(data, status, jqxhr) {

	/* 
		做一些加载完成后需要执行的事情
	*/	

});


这个getScript方法返回一个jqxhr,你可以像下面这样用它:


jQuery.getScript("/path/to/myscript.js")
	.done(function() {
		/* 耶,没有问题,这里可以干点什么 */
	})
	.fail(function() {
		/* 靠,马上执行挽救操作 */
});


最常见的使用jQuery.getScript的地方是延迟加载一个js插件,而且在加载完成时执行它:


jQuery.getScript("jquery.cookie.js")
	.done(function() {
		jQuery.cookie("cookie_name", "value", { expires: 7 });
});


如果你需要更高级的功能,比如加载多个脚本,或加载不同类型的文件(文本文件,图片,css等),我建议你使用一个专门的JavaScript加载工具。如果是为了延迟加载一个js插件,避免每个页面都去加载,这个getScript很完美了。

缓存问题

有一个非常重要的问题,使用jQuery.getScript时,你需要用一个时间戳字符串跟在需要加载的js地址后面,防止它被缓存。但是,如果你希望这个脚本被缓存,你需要设置全局缓存变量,像下面这样:


jQuery.ajaxSetup({
  cache: true
});


如果你并不想使用全局缓存变量,你也可以使用jQuery.ajax,并注明dataTypescript


jQuery.ajax({
      url: "jquery.cookie.js",
      dataType: "script",
      cache: true
}).done(function() {
		jQuery.cookie("cookie_name", "value", { expires: 7 });
});



在加载脚本时一定要小心缓存问题!

标签:jQuery,缓存,js,cookie,getScript,加载
From: https://blog.51cto.com/u_2700990/6314022

相关文章

  • jquery 禁止鼠标右键和复制功能
    原文地址:http://gichan.iteye.com/blog/1075952/1.//禁用右键、文本选择功能、复制按键2."contextmenu",function(){returnfalse;});3."selectstart",function(){returnfalse;});4.returnkey(arguments[0])});5.6.//按键时提示警告7.functionk......
  • nodejs npm国内镜像
    镜像使用方法(三种办法任意一种都能解决问题,建议使用第三种,将配置写死,下次用的时候配置还在):1.通过config命令npmconfigsetregistryhttp://registry.cnpmjs.orgnpminfounderscore(如果上面配置正确这个命令会有字符串response)2.命令行指定npm--registryhttp://registry.cn......
  • js根据姓名首字母构造字母索引列表
    js根据姓名首字母构造字母索引列表1、首先安装js-pinyin插件npminstalljs-pinyin2、引入js-pinyin//npminstalljs-pinyin下的映入importpinyinfrom'js-pinyin'//我的是下载下来将js-pinyin放在了当前文件目录下,如果是放在node_modeule里面的话如上引入就行import......
  • js 使用 eval 函数优化条件查询
    我们在写代码的使用,经常会遇到ifelse很长很长的代码,这种要怎么优化,一直是仁者见仁智者见智的我说下我的优化方案原始代码例如:if(income<=10000){ returnincome*0.365;}elseif(income<=30000){ return(income-10000)*0.2+35600;}elseif(income<=60000)......
  • uni.request(OBJECT)前端post请求数据json序列化
    一、uni-app前端post请求数据json序列化1.前置须知Content-Type实体头部用于指示资源的MIME(媒体)类型mediatype。在响应中,Content-Type标头告诉客户端实际返回的内容的内容类型。在请求中,客户端告诉服务器实际发送的数据类型。2.uni.request({})官方文档2.1dat......
  • JS删除对象中的某一属性(delete)
    通过delete操作符,可以实现对对象属性的删除操作<!--*@Descripttion:删除对象以及数组对象中的指定属性*@version:*@Author:zhangfan*@email:[email protected]*@Date:2020-07-0309:10:28*@LastEditors:zhangfan*@LastEditTime:2020-07-1515:03:00......
  • js中的foreach用法
    刚才采用foreach来遍历数组,达到格式化el-table中的数据,发现用foreach不生效,但是用户for循环没问题。吓我一跳,赶紧看了一下js中的foreach用法,没毛病啊。用了这么多年难道还会用错。<!--*@Descripttion:js中的foreach用法*@version:*@Author:zhangfan*@email:220704......
  • Cookie的使用(js-cookie插件)
    1.js-cookie一个简单,轻巧的JavaScriptAPI,用于处理Cookie2.安装npminstalljs-cookie--save3.引用importCookiesfrom'js-cookie'Vue.prototype.$Cookies=Cookies;4.创建<!--作者:zhangfan页面名称:Cookie的使用(js-cookie插件)--><template><divid="produc......
  • Vue中的懒加载和按需加载
    1.懒加载懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。vue项目打包的时候,如果项目比较庞大,那么将会打出一个很大的包,速度比较慢,这个时候可以考虑拆分,不要把所有的内容都打到一个包里面去。1.路由懒加载:我们平常使用router可能如下:importVuefrom'vue'importRouterfro......
  • JSON.parse和JSON.stringify方法详解
    1.JSON.parse()用于从一个字符串中解析出json对象<!--作者:zhangfan页面名称:JSON.parse()、JSON.stringify()使用方法--><template><divid="product-list-one"><button@click="jsonParse()">执行jsonParse</button></div><......