qUIpt:JavaScript Cache Library

來源:互聯網
上載者:User

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();
}
})();
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.