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资料toString 方法
Mar 13 Javascript
js单例模式详解实例
Nov 21 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
深入浅析react native es6语法
Dec 09 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
package.json文件配置详解
Jun 15 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
mpvue跳转页面及注意事项
Aug 03 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
vue 开发企业微信整合案例分析
Dec 02 Javascript
React如何创建组件
Jun 27 Javascript
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
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
解密Python中的描述符(descriptor)
2015/06/03 Python
深入理解Python3中的http.client模块
2017/03/29 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
python:动态路由的Flask程序代码
2019/11/22 Python
python实现电子词典
2020/03/03 Python
python实现飞机大战项目
2020/03/11 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
python中pdb模块实例用法
2021/01/15 Python
详解HTML5中的标签
2015/06/19 HTML / CSS
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
编码实现字符串转整型的函数
2012/06/02 面试题
中学生旷课检讨书模板
2014/10/08 职场文书
56句经典英文座右铭
2019/08/09 职场文书