易栈网-膘叔

题前话：
其实以前也看到过类似的东西，但是我没有想到进用gzip之类的加密，看来，即使是见过的东西，也有不熟悉的。看到作者这样仔细的分析相类似的资料，当然要备份一点。
原文：http://www.zendstudio.net/js-zip-inflate/
AJAX还是比较强大的！（显然，这是一句废话），最近在研究一个网站的AJAX应用中发现其中的“拓展视野”部分频频被挖掘出来（也由此可见，平时本人 的视野有多么的狭窄了），首先是全站的JS全部使用packed进行了压缩，呃！也不知道这种称法是否正确，就是用 eval(function(p,a,c,k,e,d){})的那种世界各地都很流行的压缩方法吧，在实际的观察中，一个压缩后仅为6K，在我将其转化为 “肉眼能看清楚的代码”之后，足足有20K，可见其效果还是相当明显的；此外，用HttpWatch弄到了传输数据后，居然是加密的。。。形如下面这段：

任何一个有些许密码学经验的同志都容易很看出来，这是base64编码(我实在不喜欢称这个为“加密”)，没错，和各位看官一样，我很快就用php自带的base64_decode函数对其进行了解密，如果您觉得问题到此为止，那就错了！这时我才稍稍感到了有些震撼，解密出来的数据：

呃！一堆乱码，其实应该是二进制数据，加密了（后来知道是压缩了），可是用户是看不懂这些的，客户端是肯定要进行解密的！用什么？AJAX的当然用JS解密了，挖解密函数啊，挖解密函数，看到了如下的精彩代码：

utf8to16()和base64decode()都好理解，也再一次证明加密的最后是用base64编码输出的，关键就是这个zip_depress()，zip解压？
是的，千真万确，用JS实现了zip的解压算法！！！到这里我深深的感到了震撼，原来，我知道的真的太少了啊！虽然之前知晓有md5.js，知道JS在运算方面是没有问题的。不会是这家伙自己写的压缩算法吧？经过搜索，我找到了这个算法（Zip inflate）的原版，原来该网站的制作人员修改了函数名，难怪我直接google不到呢？

标准的JSON数据啦，不错！这就为以后的AJAX的传输上多了一个选择，虽然还不确定这种方法能否节省流量（因为base64算法会将原始数据“稍稍” 增大），但客户端有了解压算法，服务端的php压缩函数又是现成的，大不了在base64这个环节上大概需要改进下，我想对于大流量的数据应该还是有确切 效果的。嗯，我很满意。
————————
看完以上的内容，嗯，我也很满意，呵呵

这个插件很实用，适合那种写着教程内容的页面，以前如果有多个标题的话，必须一个一个的加锚点，然后再加链接，这样不太方便。所以看到这个插件的时候，我忍不住记录下来。

代码我没有细看，我只看了demo，自己觉得还是很有用的。
代码来自CSSRain.cn，图片同样来自他那里。
网站说：

不过，IE或者其他的一些多窗口版的浏览器，会不会把它当成AD层屏蔽掉呢？
截图：

源码分流：
createtitle.rar

看到这个内容的时候，很吃惊，其实我在以前看到过一个R开头的网站时（记不清了，实在记不清了），他用JS做了一个cache函数，对函数做了缓存。还用了斐伯拉切函数做了测试。后来我根据他写的代码用jQuery写了一个类似的插件（它是把方法注册到了window对象里，所以加快了一些速度）。后来感觉这样的方法也同样可以用在数据上，又根据这样的想法写了一个存储数据的cache函数。也分别用在了两个不同的项目里。

如今又看到有人写这样类似的东西，就把他贴上来进行分享。

文章的内容来自：

原文如下：http://www.cssrain.cn/article.asp?id=1295

在jQuery中可以使用data()来给元素存储临时的变量：
// jQuery:
    // Set data:
    $(elem).data('customProperty', 12345);
    // Get data:
    $(elem).data('customProperty');

在mootools中可以使用store()来给元素存储临时的变量：
// MooTools:
    // Set data:
    elem.store('customProperty', 12345);
    // Get data:
    elem.retrieve('customProperty');


下面我们用JavaScript 自己动手写一个：
(function(){

    var cache = [0],
          expando = 'data' + +new Date();

    function data(elem) {

        var cacheIndex = elem[expando],
            nextCacheIndex = cache.length;

        if(!cacheIndex) {
            cacheIndex = elem[expando] = nextCacheIndex;
            cache[cacheIndex] = {};
        }

        return cache[cacheIndex];

    }

    window.data = data;

})();

使用：
var myElem = document.getElementById('id');
// 设置data:
data(myElem).customProperty = 12345;
// 获取 data:
data(myElem).customProperty; // returns 12345

//  用其他的变量
data(myElem).info = {
    a : 123,
    b : [4,5,6]
};


这个脚本其实很简单，就是往cache 数组里添加 下标 元素。
默认cache=[0] ，当 elem[expando] 没有获取到时，则往数组里 添加一个下标，同时下标又与数组是关联起来的。
如果elem[expando]获取到时，则直接返回  cache[cacheIndex] 。


这点搞定后，那就简单了，就是往一个空对象中 配置 属性了。



进一步修改函数：
// WITH ENCAPSULATION:
(function(){

    var cache = [0],
        expando = 'data' + +new Date();

    function data(elem) {

        var cacheIndex = elem[expando],
            nextCacheIndex = cache.length;

        if(!cacheIndex) {
            cacheIndex = elem[expando] = nextCacheIndex;
            cache[cacheIndex] = {};
        }

        return {
            get : function(key) {
                return cache[cacheIndex][key];
            },
            set : function(key, val) {
                cache[cacheIndex][key] = val;
                return val;
            }
        }

    }

    window.data = data;

})();

用法：
var myElem = document.getElementById('id');

// 设置data:
data(myElem).set('customProperty', 12345);

// 获取data:
data(myElem).get('customProperty'); // returns 12345


ok，一个类似jQuery的data()函数就完成了。

其实我自己还是觉得用对象更好处理一些，一来，对象不象数组，一定要用下标才能读取，而且对于对象的覆盖等，也方便很多。删除的话也容易。

在jQuery的插件库里面，有一个imageLazyLoader，是专门用来进行延迟加载图片的。这次看到这个对于JS,CSS,IMAGE三者都能进行延迟加载的代码，当然是用来查看一下的。代码很小，大约只有3K左右，100多行代码，却实现了这么多的效果，看来jQuery的功能是被挖掘的越来越多了。

Example 1:

Load some files

 $.xLazyLoader({
     js: 'jquery.ui.all.js',
     css: 'ui.allplugins.css',
     image: 'your_image.jpg',
     load: function(){
         alert('All files are loaded');
     }
 });
 

Example 2:

Load multiple files of each type

 $.xLazyLoader({
     js: ['ui.core.js','ui.dialog.js'],
     css: ['ui.core.css', 'ui.dialog.css'],
     image: ['your_image.jpg', 'your_image1.jpg', 'your_image2.jpg'],
     name: 'dialog',
     load: function(){
         alert('All files are loaded');
     }
 });
 

Example 3:

Remove tags from head (javascript is still working, but css is completely destroyed )

 $.xLazyLoader('destroy','dialog');
 

Example 4:

Disable css.

 $.xLazyLoader('disable','dialog');
 

Enable css.

 $.xLazyLoader('enable','dialog');

项目存在于GOOGLECODE上，网址为：http://code.google.com/p/ajaxsoft/
估计还是会有BUG，不过相信作者应该会更新的

在cssrain.cn上看到很多jquery的最新插件和代码，也深为该站站长感到由衷的倾(突然就不知道这个字怎么打了，郁闷，打了个同音字，五笔也会忘字。。。汗)佩，坚持本来就是一种美德。

他的网上有很多jquery插件哦，这两天又贴了ajax大会的资料，如果是在上海，我就肯定去参加了，可惜离我太远了。

然后又看到这个PPT，入门级，我没有细看，但我想可能很多人会需要这些吧。于是下载到本地再上传了一下。