javascript的动态加载、缓存、更新以及复用(一)


Posted in Javascript onJune 09, 2014

使用范围:

OA、MIS、ERP等信息管理类的项目,暂时不考虑网站。

遇到的问题:

完成一个项目,往往需要引用很多js文件,比如jQuery.js、easyUI等。还有自己写的一些列js文件,那么这些文件如何方便的加载,如果文件有变化如何才能让客户端及时更新缓存?如果能够提高点运行效率,那就更好了。

目标:

1、  可以方便的引用js文件。

2、  尽量使用各种缓存,避免频繁从服务器读取文件。

3、  如果js文件有更新或者增加、减少几个减少js文件,需要客户端能够自动、立刻更新。

4、  Js文件的复用。

页面结构:

一般OA、MIS这一类的项目,大多采用frameset或者iframe的方式来实现,这样就有了父页和子页的概念。我们可以利用这一点来做做文章。

网页可以分为三块:外壳、首页、标签、数据列表、表单(添加、修改)。因为这里要说的加载js的方法,需要利用这种页面结构,也正是因为这个原因,所以暂时不支持网站。

看这个图有点眼熟吧。恩,就是这种结构。

javascript的动态加载、缓存、更新以及复用(一)

正文

现在做web版的应用,越来越依赖各种js了,第三方的jQuery、easyUI、my97等,还有自己写的各种js。要实现的功能越来越多,需要使用的js也越来越多,js文件的修改也很频繁。于是就出现了许多问题,比如每个页面都要写一大堆<script src=””>。这个也太麻烦了吧,增加一个新的js文件,需要改多少页面?js文件更新了如何让客户端也立即更新?如何让客户端更快的加载js。有的Js文件还有依赖关系,如何确保加载顺序?本文内容就是分享一下我的解决方案。

动态加载

在页面里使用<script>加载js,显然很麻烦,那么怎么办呢?想来想去还是用动态加载的方法来解决。在网上也搜索了一番,有很多种方法,有自己手动写的,有整理成框架的(比如seejs)。有的时候还是感觉自己弄一个更加的应手,所以打算自己写一套。

如何动态加载呢?使用jQuery提供的方法吗?这个倒是可以,但是页面必须引用jQuery和我写的加载js文件的js。也就是说一个页面要写两个<script>,这个就麻烦了。能写一个,就一定不要写两个,虽然只是多了一个,但是多了这么一个就真的很麻烦。所以决定自己手写一个动态加载的小方法。

不会写怎么办呢?百度大婶来帮忙吧。各种搜呀,终于找到了一个比较理想的方法,恩就用这个了。

/*实现动态加载js的函数,来自于互联网,做了一点修改,可以兼容IE10 */
var loadscript =
{
    $$: function(id) { return document.getElementById(id); },
    tag: function(element) { return document.getElementsByTagName(element); },
    ce: function(element) { return document.createElement(element); },
    js: function(url, callback) {
        var s = loadscript.ce('script');
        s.type = "text/javascript";
        s.src = url;
        if (document.documentMode == 10 || document.documentMode == 9) {
            s.onerror = s.onload = loaded;
        } else {
            s.onreadystatechange = ready;
            s.onerror = s.onload = loaded;
        }
        loadscript.tag('head')[0].appendChild(s);
        function ready() { /*IE7.0/IE10.0*/
            if (s.readyState == 'loaded' || s.readyState == 'complete') {
                callback();
            }
        }
        function loaded() { /*chrome/IE10.0*/
            callback();
        }
    }
};

加载顺序

和新代码已经搞定了,下面就是如何加载其他js文件了,由于文件比较多,还有一定的依赖关系,想来想去还是弄个js文件的字典吧,然后做一个加载顺序,按照这个顺序来加载。

为了更稳定一点,决定采用一个一个加载的方式,即加载完一个js,然后在加载另一个js。这样就可以确保依赖关系。当然缺点是加载速度会比较慢。一般网页加载js是可以多个js文件一起下载的,这个速度就会比较快。

使用缓存

一般浏览器对于各种资源(比如网页、图片、js、css等)会有一个缓存,已经有了就不会再向服务器去下载了。看似很好,但是有两个问题:

A、浏览器如何判断缓存的js文件是不是最新的?

B、js文件更新了,如何强制浏览器更新?

浏览器是怎么判断的呢?具体步骤我也不太清楚,只是知道有一个步骤是要到服务器问问,我缓存的js文件是不是最新的,然后才能够确定本地的缓存是否是最新的,如果是最新的就不折腾了,如果不是再去下载最新的。就是说呢,即使客户端已经有了js文件的缓存,但是浏览器要确认一下是否最新,还是会跑到服务器去问问。这个,折腾呀。当然一般情况下,这个过程会很快,但是有时候这个过程会很慢。

所以呢,还是尽量避免加载js的好。于是就引出来的“js文件的复用”。

更新js文件

Js文件更新了,但是浏览器却还在用以前的js文件,因为有缓存了,而且还固执的认为缓存的js文件就是最新的,哎咋办呀?

最简单的方法就是在加载js的时候,后面跟一个版本号,有更新了,就版本号+1。比如 xxx.js?v=1。Js文件更新后就是 xxx.js?v=2。这样js就肯定会被更新了。

看起来似乎很简单,但是这个版本号如何加上去?版本号本身又如何更新呢?

复用

这个就要先看看上面那个图了,就是页面结构,有一个外壳页(或者首页),我们叫做父页。里面还有若干个iframe加载的页面,我们加做子页。

一般的做法是,父页里加载jQuery.js,然后子页里也要加载jQuery.js。当然当子页在加载jQuery.js的时候,直接从缓存里面提取,一般不会再去折腾服务器了。

但是,既然父页里面已经加载了,子页为啥还要再加载一次?直接用父页里加载好的行不行呢?到网上搜了一下,似乎没有人这么做。也许是我太另类了吧,我就是想实现这个方法。优点就是,所有的js文件都在父页里加载,子页直接使用父页里加载好的js,这样子页就不需要在折腾js文件了。这样效率也可以更高一些,毕竟即使用缓存里加载,也是要判断一下,然后在做个加载的动作,还是会有一点点损耗,js文件越多也就越明显。

那么如何实现呢,想想似乎很简单。

父页里使用jQuery

Var aa = $('div');  //找到父页里的所有div

子页里是不是可以这么做?

Var  bb = top.$ ('div') ; //能够找到div,但是不是子页的div而是父页里的div。

咋回事呢?原因就在于搜索范围。jQuery是有三个参数的,我们平时只用了第一个,后面的就被忽略了。那么第二个参数是啥呢?就是搜索范围。没有指定的时候,jQuery会在哪里搜索呢?加载jQuery的页面里面搜索,而不是调用$的页面里搜索。

解决方法也很简单,加个参数就好了

Var  bb = top.$ ('div',document) ; //指定搜索范围:子页的document

等等,这个似乎很烦人,我们在写脚本的时候,还要考虑一下,这个脚本是在父页里执行还是在子页里执行吗?

好了,做一个简单的封装,避免这个麻烦。子页里写个函数

function $ (p1){
         return top.$ (p1,document);
}

 

好了,大功告成了吗?当然没有!预知后事如何,请听下回分解。

ps:下集预告。就是具体的实现代码,还有一些思路和想法,不知道大家还有啥想知道的没,有的话,欢迎在下面回复一下。谢谢先。

javascript的动态加载、缓存、更新以及复用(一)
 

Javascript 相关文章推荐
js textarea自动增高并隐藏滚动条
Dec 16 Javascript
javascript new一个对象的实质
Jan 07 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
js实现继承的方法及优缺点总结
May 08 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
javascript实现倒计时效果
Feb 17 Javascript
Jquery $.map使用方法实例详解
Sep 01 jQuery
JavaScript利用正则表达式去除日期中的-
Jun 09 #Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 #Javascript
初识SmartJS - AOP三剑客
Jun 08 #Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 #Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 #Javascript
js 去除字符串第一位逗号的方法
Jun 07 #Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 #Javascript
You might like
多文件上传的例子
2006/10/09 PHP
PHP 编程安全性小结
2010/01/08 PHP
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
php组合排序简单实现方法
2016/10/15 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
python代码制作configure文件示例
2014/07/28 Python
python 默认参数问题的陷阱
2016/02/29 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
python学习入门细节知识点
2018/03/29 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
日语专业推荐信
2013/11/12 职场文书
社区学习十八大感想
2014/01/22 职场文书
驻村工作先进事迹
2014/08/14 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书