[转]qUIpt：JavaScript Cache Library

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 说明了这个运作流程：

/* *
* 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();
}
})();