[转]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();
        }
    })();