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

使用范围:

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

遇到的问题:

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

目标:

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

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

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

4、  Js文件的复用。

页面结构:

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

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

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

正文

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

(0)

相关推荐

  • 一个简单的JavaScript数据缓存系统实现代码

    复制代码 代码如下: var DataCache = function(){ if(!(this instanceof DataCache)){ return new DataCache(); } this.id = 0; this.caches = {}; }; DataCache.prototype = { add : function(val){ val = val || null; key = "dc_" + this.id; this.caches[key] = val; r

  • JavaScript版的TwoQueues缓存模型

    本文所指TwoQueues缓存模型,是说数据在内存中的缓存模型. 无论何种语言,都可能需要把一部分数据放在内存中,避免重复运算.读取.最常见的场景就是JQuery选择器,有些Dom元素的选取是非常耗时的,我们希望能把这些数据缓存起来,不必每次调用都去重新遍历Dom树. 存就存吧,但总得有个量吧!总不能把所有的历史数据都放在内存中,毕竟目前内存的容量还是相当可怜的,就算内存够大,理论上每个线程分配的内存也是有限制的. 那么问题来了,如何才能高效的把真正有用的数据缓存起来呢?这就涉及到淘汰算法,需要

  • Javascript Memoization 缓存函数使用说明

    举个例子 复制代码 代码如下: var flower= function(){ var t=0,i=0; for(;i<5000000;i++){ t++; } return t; } flower 返回t的值 假设这个函数需要花费 2-3秒 . 通过 Memoization 函数,再次查找相同的值时,直接获取事先缓存好的 value,立刻返回; Memoization 函数 复制代码 代码如下: var Memoize = function(fn, cache, refetch, obj){

  • javascript下利用数组缓存正则表达式的实现方法

    如果能用字面量创建正则就最好不过,显然有时我们不得不使用new RegExp()这种大消耗的创建方法,比如语法高亮与排版就大量用到正则表达式,要用到的patten越多,需要的时间就越长,火狐好像是12秒就发出警告,IE就直接假死.这时我们就需要利用组存大法要提高我们程序的性能了. 通常摆在我们眼前的如下两种选择来作为我们的容器,数组或对象.我这里选择前者,前者更轻量一点.下面我们就hasClass函数作性能改进. 原来的写法: 复制代码 代码如下: var hasClass = function

  • javascript客户端解决方案 缓存提供程序

    相信每一个开发者都知道缓存的重要性.从头至尾有缓存的后台(memcached,xcache等.) 来减轻db的压力.对内容分发网络(CDN)缓存中希望你的浏览器缓存那些不止一次的加载资源.当然, 有客户端缓存,所以你不要重复昂贵的操作(即使是算法或大量的运算). 这是介绍的是一个不错的javascript的方面的客户端解决方案,可选配支持HTML5本地存储器. Starting Simple 复制代码 代码如下: function CacheProvider() { // values will

  • JavaScript中的常见问题解决方法(乱码,IE缓存,代理)

    解决AJAX中文乱码常用的两种方法 1. 在客户端进行encodeURI(utf-8也可以不做,默认),在服务器端将iso-8859-1编码转为utf-8编码 2.在客户端进行两次encodeURI,在服务器端进行一次转换. 第2种方法能解决问题的原因: 进行两次转换后,在第一次getparameter方法中进行第一次解码,因为解出来的是英文(第一次encode之后的结果),所以不会出问题:第二次使用URLDecoder的decode方法,所以能正常解决这个问题.需要注意的是,在decode方法

  • 理解Javascript文件动态加载

    Javascript文件动态加载一直是比较困扰的一件事情,像网络上传的比较常见的做法: function loadjs(fileurl){ var sct = document.createElement("script"); sct.src = fileurl; document.head.appendChild(sct); } 然后我们来测试一下结果: <html> <head> <link rel="stylesheet" typ

  • JavaScript实现动态加载删除表格

    本文实例为大家分享了JavaScript实现动态加载删除表格的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=&

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

    使用范围: OA.MIS.ERP等信息管理类的项目,暂时不考虑网站. 遇到的问题: 完成一个项目,往往需要引用很多js文件,比如jQuery.js.easyUI等.还有自己写的一些列js文件,那么这些文件如何方便的加载,如果文件有变化如何才能让客户端及时更新缓存?如果能够提高点运行效率,那就更好了. 目标: 1.  可以方便的引用js文件. 2.  尽量使用各种缓存,避免频繁从服务器读取文件. 3.  如果js文件有更新或者增加.减少几个减少js文件,需要客户端能够自动.立刻更新. 4.  Js

  • javascript中动态加载js文件多种解决办法总结

    一个比较全部在动态加方法 复制代码 代码如下: /*    动态加载js v1.0 by:dum     用法:src="webJsBase.js?load=a,b"    注:加载本目录下js*/var webJsBase = {    require: function(libraryName) {        document.write('<script type="text/javascript" src="'+libraryName+'

  • javascript实现动态加载CSS

    复制代码 代码如下: <script type="text/javascript">             function addStyle(stylePath) {                 var container = document.getElementsByTagName("head")[0];                 var addStyle = document.createElement("link"

  • javascript如何动态加载表格与动态添加表格行

    一.动态加载表格 1.首先在html中为表格的添加位置设置id 即是在html的body标签内部写一个div标签表明表格要添加到此div的内部.如下 <div id="tdl"><div> 2.在javascript中写添加表格的语句 若在当前html文件中,则写在<script>标签内部,如 复制代码 代码如下: <script type="text/javascript" > document.getElement

  • 动态加载JavaScript文件的3种方式

    以下是遇到的几种动态加载JavaScript文件的方式,持续更新中... 一.使用document.write/writeln()方式 该种方式可以实现js文件的动态加载,原理就是在重写文档流,这种方式会导致整个页面重绘. 实现方式: 复制代码 代码如下: document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>"

  • javascript动态加载三

    之前两篇都介绍了,通过动态加载JS文件或者说JS模块,是怎么一步一步实现. 首先是通过同步策略来实现模块加载与回调函数之间进行分离,接着是通过异步策略来实现模块加载与回调函数之间进行分离. 这一篇,主要是为了说说怎么优化异步策略,并且实现了随意加载(非任意顺序加载模块),页面Ready之后加载文件.先接一下上一篇遗留下来的问题 1.页面Ready之后进行加载 2.随意添加模块 进行加载 看第一个问题,这个问题其实还是比较简单的,主要是监听页面的DOMContentLoaded事件,这里就不多讲解

  • JavaScript 通过Ajax 动态加载CheckBox复选框

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <pre name="code" class="html"> <div class="controls" id="compareyear"> </div></pre><br> <img src="http://img.blog.csdn.net/20170830165326131?watermark

  • 使用javaScript动态加载Js文件和Css文件

    JS动态加载CSS 在可换主题的界面中具有很重要的意义,用户可以根据自己的浏览习惯选择自己喜欢的页面显示方式,下面详细说明. 希望下面的方法对你有帮助. (1)使用JavaScript动态加载Js文件 /*JavaScript动态加载Js文件*/ var scriptNode = document.createElement('script'); scriptNode.src = 'proxy.js?t='+new Date().getTime();/*附带时间参数,防止缓存*/ documen

随机推荐