[转]qUIpt:JavaScript Cache Library
2011-04-15 10:11
246 查看
qUIpt 是一个很小很小的 JavaScript Library,所有原始码也才只有 115 行而已(包括批注),我觉得作者 Mario Heiderich 真是太有创意了,他的原理十分简单,使用的 Cache 方法是将数据储存在 window 对象的 name 属性中 ( window.name ),在这里他是将透过 XHR ( XML Http Request ) 取回的 JavaScript 档案内容储存在 window.name 属性里。
通常 window.name 是用在 window.open() 的时候指定的第二的参数,还有当我们在窗体(form)中设定 target 属性的时候,这个 target 指定的就是 window.name 的值,但预设来说 window.name 大部分来讲都是空的,所以 qUIpt 就拿这个属性来做额外的快取(Cache)用途。
qUIpt 基本的运作流程如下:
首先,他先检查你的 window.name 是否有资料。
如果 window.name 是空的,就透过 XHR 动态下载 JavaScript 档案,并将档案内容储存在 window.name 属性中。
如果使用者第一次造访你的网页,或从其他网站进来的,就会先将 window.name 给清空,并重新下载 JS 档回来。
等使用者下次造访你的网页(例如连到下一页),就直接用 eval() 函示将 window.name 的 JS 读出执行,这样所有对象都重新被加载回来了,完全不需要重新下载 JavaScript 檔。
底下这段 code 说明了这个运作流程:
原理就是这么简单,你可以下载看原始码回来看,才几行而已,也许可以激发你一些更有创意的想法。
由于此项目十分的阳春,毕竟是第一版嘛,经我个人测试之后发现只有 Firefox 能用,IE 目前是无法执行的,所以我小修了一下程序把一些仅支持 Firefox 的语法给修正了,底下的 code 应该可以运作于 Firefox 与 IE 7 ( 其他版本的 IE 我没测试过 )。
通常 window.name 是用在 window.open() 的时候指定的第二的参数,还有当我们在窗体(form)中设定 target 属性的时候,这个 target 指定的就是 window.name 的值,但预设来说 window.name 大部分来讲都是空的,所以 qUIpt 就拿这个属性来做额外的快取(Cache)用途。
qUIpt 基本的运作流程如下:
首先,他先检查你的 window.name 是否有资料。
如果 window.name 是空的,就透过 XHR 动态下载 JavaScript 档案,并将档案内容储存在 window.name 属性中。
如果使用者第一次造访你的网页,或从其他网站进来的,就会先将 window.name 给清空,并重新下载 JS 档回来。
等使用者下次造访你的网页(例如连到下一页),就直接用 eval() 函示将 window.name 的 JS 读出执行,这样所有对象都重新被加载回来了,完全不需要重新下载 JavaScript 檔。
底下这段 code 说明了这个运作流程:
/** * some security checks to avoid arbitrary off-site * self.name poisoning */ if(document.referrer == '' || document.referrer.match(/\w+:\/\/[^\/]+/)[0] !== location.href.match(/\w+:\/\/[^\/]+/)[0]) { self.name = ''; } /** * let's start */ if(!self.name.length) { quipt_load(); } else { quipt_eval(); }
原理就是这么简单,你可以下载看原始码回来看,才几行而已,也许可以激发你一些更有创意的想法。
由于此项目十分的阳春,毕竟是第一版嘛,经我个人测试之后发现只有 Firefox 能用,IE 目前是无法执行的,所以我小修了一下程序把一些仅支持 Firefox 的语法给修正了,底下的 code 应该可以运作于 Firefox 与 IE 7 ( 其他版本的 IE 我没测试过 )。
/** * quipt - caching in the name of performance * * @author Mario Heiderich <mario.heiderich@gmail.com> , Will 保哥 <doggy.huang@gmail.com> * @license LGPL */ (function quipt_init() { /** * the config object */ var quipt_config = { /** * the method to call when loading is done * * hint: just set it to false if not needed */ 'starter' : 'my_init_function', /** * add files to load to this array * * hint: you can add as many files as you wish - as long as they * come from the same domain. quipt also supports proxied * off-domain scripts. */ 'files' : [ 'jquery-1.2.6.min.js', 'dummy-js-file-01.js', 'dummy-js-file-02.js' ], /** * don't touch this - private stuff! else! */ 'status' : 0 } var quipt_code = []; /** * the loader method - it monitors the status of the ressource * fetching and kick-starts the XHR method * */ var quipt_load = function() { quipt_request(); } /** * this method just fires XHR requests against the files given in the * config literal until all ressources are fetched * */ var quipt_request = function() { try { console.log('loading ressources from filesystem'); } catch(e) {} var x = new XMLHttpRequest(); x.open('GET', quipt_config.files[quipt_config.status], true); x.send(null); x.onreadystatechange = function() { if(x.readyState == 4 && x.status == 200) { quipt_code.push(x.responseText); quipt_config.status++; self.name += x.responseText + ';\n'; if(quipt_config.status < quipt_config.files.length) { quipt_request(); } else { quipt_eval(); } } } } /** * the eval method - which is called if window.name contains * the right data */ var quipt_eval = function() { self.eval(self.name); if(quipt_config.starter) { self[quipt_config.starter](); } } /** * some security checks to avoid arbitrary off-site * self.name poisoning */ if(document.referrer == '' || document.referrer.match(/\w+:\/\/[^\/]+/)[0] !== location.href.match(/\w+:\/\/[^\/]+/)[0]) { self.name = ''; } /** * let's start */ if(!self.name.length) { quipt_load(); } else { quipt_eval(); } })();
相关文章推荐
- Oracle单实例情况下的library cache pin的问题模拟与问题分析
- 企业库缓存类(EnterpriseLibrary CacheHelper )
- Memory Notification: Library Cache Object Loaded Into Sga (文档 ID 330239.1)
- The JavaScript Library World Cup
- library cache pin和library cache lock(转)
- latch: library cache pin等待事件
- CAD绘图控件VectorDraw web library (javascript) v7.7010.1.0发布丨附下载
- Library Cache internal
- cookieLibrary.js 写入cookie的JavaScript代码库
- Troubleshooting: Tuning the Shared Pool and Tuning Library Cache Latch Contention (文档 ID 62143.1)
- 在本地部署离线ArcGIS JavaScript API的Library和SDK,以II7为例和ArcGIS Server(Java)
- [置顶] 【ArcGis for javascript从零开始】之一ArcGIS API for Javascript library 3.9安装说明
- Oracle队列锁:IV,Library Cache Invalidation
- library cache latch等待事件
- JSDB.io - Javascript 的 Framework、Library 和 Tool 分類
- Dojo入门——《Dojo_.Using.the.Dojo.JavaScript.Library.to.Build.Ajax.Applications》读书笔记
- 【Object类型】JavaScript中的原生对象以及Microsoft AJAX Library中的相关扩展
- 一次library cache pin故障的解决过程
- Library cache lock 故障解决一例
- 数据库慢之Library cache lock