移动端使用localStorage缓存Js和css文的方法(web开发)


Posted in Javascript onSeptember 20, 2016

将jquery和公共样式缓存到localStorage,可以减少Http请求,从而优化页面加载时间,下面的代码可以实现此功能:

<script type="text/javascript"> 
//入口函数 
if (window.localStorage) { 
initJs(); 
initCss("css", "/gfdzp201508257998/Turntable/Style/css_whir.css"); 
} else { 
addFile("/gfdzp201508257998/Turntable/Script/jquery-1.8.3.min.js", "js"); 
addFile("/gfdzp201508257998/Turntable/Script/whir.turntable.js", "js"); 
addFile("/gfdzp201508257998/Turntable/Style/css_whir.css", "css"); 
} 
//第一步:加载页面js:先加载jQuery后加载用户脚本 
function initJs() { 
var name = "jquery"; 
var url = "/gfdzp201508257998/Turntable/Script/jquery-1.8.3.min.js"; 
var xhr; 
var js = window.localStorage ? localStorage.getItem(name) : ""; 
if (js == null || js.length == 0) { 
if (window.ActiveXObject) { 
xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
} else if (window.XMLHttpRequest) { 
xhr = new XMLHttpRequest(); 
} 
xhr.open("GET", url); 
xhr.send(null); 
xhr.onreadystatechange = function () { 
if (xhr.readyState == 4 && xhr.status == 200) { 
js = xhr.responseText; 
localStorage.setItem(name, js); 
js = js == null ? "" : js; 
addTxt(js, "js"); 
initTurntable(); //确保先引用Jquery 
} 
}; 
} else { 
addTxt(js, "js"); 
initTurntable(); 
} 
} 
//加载自定义脚本 
function initTurntable() { 
var name = "turntable"; 
var url = "/gfdzp201508257998/Turntable/Script/whir.turntable.js"; 
var xhr; 
var js = window.localStorage ? localStorage.getItem(name) : ""; 
if (js == null || js.length == 0) { 
if (window.ActiveXObject) { 
xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
} else if (window.XMLHttpRequest) { 
xhr = new XMLHttpRequest(); 
} 
xhr.open("GET", url); 
xhr.send(null); 
xhr.onreadystatechange = function () { 
if (xhr.readyState == 4 && xhr.status == 200) { 
js = xhr.responseText; 
localStorage.setItem(name, js); 
js = js == null ? "" : js; 
addTxt(js, "js"); 
} 
}; 
} else { 
addTxt(js, "js"); 
} 
} 
//第二步:初始化Css 
function initCss(name, url) { 
var xhr; 
var css = window.localStorage ? localStorage.getItem(name) : ""; 
if (css == null || css.length == 0) { 
if (window.ActiveXObject) { 
xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
} else if (window.XMLHttpRequest) { 
xhr = new XMLHttpRequest(); 
} 
xhr.open("GET", url); 
xhr.send(null); 
xhr.onreadystatechange = function () { 
if (xhr.readyState == 4 && xhr.status == 200) { 
css = xhr.responseText; 
localStorage.setItem(name, css); 
css = css == null ? "" : css; 
css = css.replace(/images\//g, "style/images/"); 
addTxt(css, "css"); 
} 
}; 
} else { 
css = css.replace(/images\//g, "style/images/"); 
addTxt(css, "css"); 
} 
} 
//辅助方法1:动态添加js,css文件引用 
function addFile(url, fileType) { 
var head = document.getElementsByTagName('HEAD').item(0); 
var link; 
if (fileType == "js") { 
link = document.createElement("script"); 
link.type = "text/javascript"; 
link.src = url; 
} else { 
link = document.createElement("link"); 
link.type = "text/css"; 
link.rel = "stylesheet"; 
link.rev = "stylesheet"; 
link.media = "screen"; 
link.href = url; 
} 
head.appendChild(link); 
} 
//辅助方法2:动态添加js,css文件内容 
function addTxt(text, fileType) { 
var head = document.getElementsByTagName('HEAD').item(0); 
var link; 
if (fileType == "js") { 
link = document.createElement("script"); 
link.type = "text/javascript"; 
link.innerHTML = text; 
} else { 
link = document.createElement("style"); 
link.type = "text/css"; 
link.innerHTML = text; 
} 
head.appendChild(link); 
} 
</script>

查看写入记录:

移动端使用localStorage缓存Js和css文的方法(web开发)

封装成JS插件:

/** 
* 插件功能:使用localStorage缓存js和css文件,减少http请求和页面渲染时间,适用于Web移动端H5页面制作。 
* 插件作者:zhangqs008@163.com 
* 使用方法: 
* 1.使用此插件前,需要给插件的pageVersion变量赋值,建议变量值由服务器后端输出,当需要更新客户端资源时,修改版本值即可。 
* 2.加载Js:由于js加载有顺序要求,所以需要将后加载的脚本作为前一个脚本的回调参数传入,如: 
* whir.res.loadJs("jquery", "<%= BasePath %>Turntable/Script/jquery-1.8.3.min.js", 
* function () { 
* whir.res.loadJs("turntable", "Script/whir.turntable.js", null); 
* }); 
* 3.加载css,如:whir.res.loadCss("css", "/Style/css_whir.css", null); 
*/ 
var whir = window.whir || {}; 
whir.res = { 
pageVersion: "", //页面版本,由页面输出,用于刷新localStorage缓存 
//动态加载js文件并缓存 
loadJs: function (name, url, callback) { 
if (window.localStorage) { 
var xhr; 
var js = localStorage.getItem(name); 
if (js == null || js.length == 0 || this.pageVersion != localStorage.getItem("version")) { 
if (window.ActiveXObject) { 
xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
} else if (window.XMLHttpRequest) { 
xhr = new XMLHttpRequest(); 
} 
if (xhr != null) { 
xhr.open("GET", url); 
xhr.send(null); 
xhr.onreadystatechange = function () { 
if (xhr.readyState == 4 && xhr.status == 200) { 
js = xhr.responseText; 
localStorage.setItem(name, js); 
localStorage.setItem("version", whir.res.pageVersion); 
js = js == null ? "" : js; 
whir.res.writeJs(js); 
if (callback != null) { 
callback(); //回调,执行下一个引用 
} 
} 
}; 
} 
} else { 
whir.res.writeJs(js); 
if (callback != null) { 
callback(); //回调,执行下一个引用 
} 
} 
} else { 
whir.res.linkJs(url); 
} 
}, 
loadCss: function (name, url) { 
if (window.localStorage) { 
var xhr; 
var css = localStorage.getItem(name); 
if (css == null || css.length == 0 || this.pageVersion != localStorage.getItem("version")) { 
if (window.ActiveXObject) { 
xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
} else if (window.XMLHttpRequest) { 
xhr = new XMLHttpRequest(); 
} 
if (xhr != null) { 
xhr.open("GET", url); 
xhr.send(null); 
xhr.onreadystatechange = function () { 
if (xhr.readyState == 4 && xhr.status == 200) { 
css = xhr.responseText; 
localStorage.setItem(name, css); 
localStorage.setItem("version", whir.res.pageVersion); 
css = css == null ? "" : css; 
css = css.replace(/images\//g, "style/images/"); //css里的图片路径需单独处理 
whir.res.writeCss(css); 
} 
}; 
} 
} else { 
css = css.replace(/images\//g, "style/images/"); //css里的图片路径需单独处理 
whir.res.writeCss(css); 
} 
} else { 
whir.res.linkCss(url); 
} 
}, 
//往页面写入js脚本 
writeJs: function (text) { 
var head = document.getElementsByTagName('HEAD').item(0); 
var link = document.createElement("script"); 
link.type = "text/javascript"; 
link.innerHTML = text; 
head.appendChild(link); 
}, 
//往页面写入css样式 
writeCss: function (text) { 
var head = document.getElementsByTagName('HEAD').item(0); 
var link = document.createElement("style"); 
link.type = "text/css"; 
link.innerHTML = text; 
head.appendChild(link); 
}, 
//往页面引入js脚本 
linkJs: function (url) { 
var head = document.getElementsByTagName('HEAD').item(0); 
var link = document.createElement("script"); 
link.type = "text/javascript"; 
link.src = url; 
head.appendChild(link); 
}, 
//往页面引入css样式 
linkCss: function (url) { 
var head = document.getElementsByTagName('HEAD').item(0); 
var link = document.createElement("link"); 
link.type = "text/css"; 
link.rel = "stylesheet"; 
link.rev = "stylesheet"; 
link.media = "screen"; 
link.href = url; 
head.appendChild(link); 
} 
}

调用该插件:

<script type="text/javascript"> 
//入口函数 
whir.res.pageVersion = "1002"; //页面版本,用于检测是否需要更新缓存 
whir.res.loadJs("jquery", "/gfdzp201508257998/Turntable/Script/jquery-1.8.3.min.js", 
function () { 
whir.res.loadJs("turntable", "/gfdzp201508257998/Turntable/Script/whir.turntable.js", null); 
}); 
whir.res.loadCss("css", "/gfdzp201508257998/Turntable/Style/css_whir.css", null); 
</script>

以上所述是小编给大家介绍的移动端使用localStorage缓存Js和css文的方法(web开发),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript getElementsByName()的用法说明
Jul 31 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 Javascript
vue实现选中效果
Oct 07 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 Javascript
关于Javascript中defer和async的区别总结
Sep 20 #Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 #Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 #Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 #Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 #Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 #Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 #Javascript
You might like
php 获取完整url地址
2008/12/20 PHP
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
Python单例模式实例分析
2015/01/14 Python
深入理解python多进程编程
2016/06/12 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
日语专业推荐信
2013/11/12 职场文书
精彩的大学生自我评价
2013/11/17 职场文书
大学老师推荐信
2014/02/25 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
元旦晚会活动总结
2014/07/09 职场文书
银行授权委托书样本
2014/10/13 职场文书
元宵节寄语大全
2015/02/27 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers