手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

学做jQuery中的data()函数

看到这个内容的时候,很吃惊,其实我在以前看到过一个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()函数就完成了。


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

Tags: data, cache, 缓存

JS/CSS/images lazyLoader for JQuery

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

JavaScript代码
  1. /* 
  2.  * xLazyLoader 1.0 - Plugin for jQuery 
  3.  * Load js, css and  images 
  4.  * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 
  5.  * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. 
  6.  * Depends: 
  7.  *   jquery.js 
  8.  *  Copyright (c) 2008 Oleg Slobodskoi (jimdo.com) 
  9.  */  
  10. ;(function($){  
  11.     $.xLazyLoader =  function ( method, options ) {  
  12.         if (typeof method == 'object') {  
  13.             options = method;  
  14.             method = 'load';  
  15.         };  
  16.         xLazyLoader[method]( options );  
  17.     };  
  18.       
  19.     var xLazyLoader = new function ()  
  20.     {  
  21.         var head = document.getElementsByTagName("head")[0];  
  22.         this.load = function ( options )  
  23.         {  
  24.             //Defaults  
  25.             var d = {  
  26.                 js: [],  
  27.                 css: [],  
  28.                 image: [],  
  29.                 name: null,  
  30.                 load: function(){}  
  31.             };  
  32.             $.extend(d, options);  
  33.               
  34.             var self = this,  
  35.                 ready = false,  
  36.                 loaded = {  
  37.                     js: [],  
  38.                     css: [],  
  39.                     image: []  
  40.                 }  
  41.             ;  
  42.               
  43.             each('js', d.js);  
  44.             each('css', d.css);  
  45.             each('image', d.image);  
  46.               
  47.             function each (type, urls)  
  48.             {  
  49.                 if ( $.isArray(urls) && urls.length>0 )  
  50.                     $.each( urls, function(i, url){  
  51.                         load(type, url);  
  52.                     });  
  53.                 else if (typeof urls == 'string')  
  54.                     load(type, urls);  
  55.             };  
  56.             function load (type, url)  
  57.             {  
  58.                 self[type](url, function() {   
  59.                     $.isArray(d[type]) ? loaded[type].push(url) : loaded[type] = url;  
  60.                     d.js.length == loaded.js.length   
  61.                     && d.css.length == loaded.css.length   
  62.                     && d.image.length == loaded.image.length  
  63.                     && d.load.apply(loaded, []);  
  64.                     return;  
  65.                 }, d.name ?'lazy-loaded-'+ d.name : 'lazy-loaded-'+new Date().getTime());  
  66.             };  
  67.         };  
  68.           
  69.         this.js = function (src, callback, name)  
  70.         {  
  71.             if ($('script[src*="'+src+'"]').length>0) {  
  72.                 callback();  
  73.                 return;  
  74.             };  
  75.             var script = document.createElement('script');  
  76.             script.setAttribute("type","text/javascript");  
  77.             script.setAttribute("src", src);  
  78.             script.setAttribute('id', name);  
  79.             if ($.browser.msie)  
  80.                 script.onreadystatechange = function () {  
  81.                      /loaded|complete/.test(script.readyState) && callback();  
  82.                 }  
  83.             else  
  84.                 //FF, Safari, Opera  
  85.                 script.onload = callback;  
  86.             head.appendChild(script);  
  87.         };  
  88.           
  89.         this.css = function (href, callback, name)  
  90.         {  
  91.             if ($('link[href*="'+href+'"]').length>0) {  
  92.                 callback();  
  93.                 return;  
  94.             };  
  95.               
  96.             var link = $('<link rel="stylesheet" type="text/css" media="all" href="'+href+'" id="'+name+'"></link>')[0];  
  97.             if ($.browser.msie)  
  98.                 link.onreadystatechange = function ()   {  
  99.                     /loaded|complete/.test(link.readyState) && callback();  
  100.                 }  
  101.             else if ($.browser.opera)  
  102.                 link.onload = callback;  
  103.             else  
  104.                 //FF, Safari, Chrome  
  105.                 (function(){  
  106.                     try {  
  107.                         link.sheet.cssRule;  
  108.                     } catch(e){  
  109.                         setTimeout(arguments.callee, 20);  
  110.                         return;  
  111.                     };  
  112.                     callback();  
  113.                 })();  
  114.             head.appendChild(link);  
  115.         };  
  116.           
  117.         this.image = function (src, callback)  
  118.         {  
  119.             var img = new Image();  
  120.             img.onload = callback;  
  121.             img.src = src;  
  122.         };  
  123.       
  124.         this.disable = function ( name )  
  125.         {     
  126.             $('#lazy-loaded-'+name, head).attr('disabled''disabled');  
  127.         };  
  128.         this.enable = function ( name )  
  129.         {     
  130.             $('#lazy-loaded-'+name, head).removeAttr('disabled');  
  131.         };  
  132.           
  133.         this.destroy = function ( name )  
  134.         {  
  135.             $('#lazy-loaded-'+name, head).remove();   
  136.         };  
  137.     };  
  138. })(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,不过相信作者应该会更新的

Tags: jquery, lazyloader

jQuery入门教程的PPT

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

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

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

大小: 87 K
尺寸: 500 x 284
浏览: 2262 次
点击打开新窗口浏览全图

附件: jquery入门篇.rar (245.64 K, 下载次数:10989)

Tags: jquery, ppt, 入门

获取当前元素的索引值

jQuery获取当前元素的索引值还是很方便的,比如一大堆的li,当鼠标移上去的时候,你知道这个li是众多li中的第几个吗?

JavaScript代码
  1. $("li").hover(function(){  
  2.     alert($("li").index(this));  
  3. });  
.index函数还是很好用的。它的说明为:

搜索与参数表示的对象匹配的元素,并返回相应元素的索引值。
如果找到了匹配的元素,从0开始返回;如果没有找到匹配的元素,返回-1。

Searches every matched element for the object and returns the index of the element, if found, starting with zero.
Returns -1 if the object wasn't found.

JS模拟FLASH效果

JS模拟FLASH的效果,一般也就用在图片的控制上了,否则,还能怎么模拟?其实我说的这个模拟并不是说真的象FLASH,而是利用了一堆图片来模拟GIF的效果。
理论上,用图片模拟GIF是可以达到的,只要利用setTimeout或者setIntval这两个函数中的任意一个,在人的视觉那24帧进行合理的控制,可以让人感觉到它在动的感觉。
当然我没有写过,只是说理论上可行,但事实上,有人这样实现了。不过我个人觉得这样的意义并不是很大,因为要下载N个图片的话如果网速不好,那么很有可能就会出现叉叉这样的情况。不过,如果用在LOGO上,就不一样了:LOGO是一个人头,当鼠标移上去时,眼珠会动,因为LOGO一般不会有人会用鼠标去点击或移动,这样当成一个彩蛋也是很不错的。
以前淘宝的宝字,YAHOO的O,都有这样类似的效果。
原文:http://www.cnblogs.com/ublue2006/archive/2009/01/21/1379242.html
文章摘要如下:

JavaScript代码
  1. var ImageShow=function(options){  
  2.     var self=this;  
  3.       
  4.     this.MyTimeOut=null;    
  5.     this.DeleteTimeOut=function(){  
  6.           if(self.MyTimeOut!=null)  
  7.           clearTimeout(self.MyTimeOut);  
  8.             
  9.        };   
  10.          
  11.     this.NowIndex=0;  
  12.     this.ASC=true;  
  13.     this.errState=false;       
  14.     var Images=[];  
  15.     var TimeSpace=0;      
  16.       
  17.      
  18.       
  19.     if(options.Obj!=null&&options.Images!=null){      
  20.     var Obj=options.Obj;    
  21.     var TempImages=options.Images;     
  22.     if(TempImages.length>=2){  
  23.        var imgType;  
  24.        try {  
  25.           for(var i=0;i<TempImages.length;i++){            
  26.              var imageName=TempImages[i].Image;  
  27.               imgType=imageName.toLowerCase().substring(TempImages[i].Image.length-4);           
  28.               if(imgType==".jpg"||imgType==".gif"||imgType==".bmp"||imgType==".png"||imgType=="jpeg"){  
  29.               Images.push(TempImages[i]);               
  30.               }  
  31.              }  
  32.            }  
  33.           catch(err){}  
  34.     }          
  35.          
  36.        if(options.TimeSpace!=null&&IsNum(options.TimeSpace)==true) TimeSpace=options.TimeSpace;  
  37.        else TimeSpace=10;  
  38.        if(TimeSpace<5)  TimeSpace=5;   
  39.     }  
  40.      this.ChangeImage=function(){   
  41.        
  42.         try{    
  43.           if(Images[self.NowIndex]!=null)  
  44.           {   
  45.            
  46.           if(options.BackGround==true){            
  47.           if(Images[self.NowIndex].Image!=null) Obj.style.backgroundImage="url("+Images[self.NowIndex].Image+")";   
  48.           if(Images[self.NowIndex].Position!=null) Obj.style.backgroundPosition=Images[self.NowIndex].Position;  
  49.           if(Images[self.NowIndex].PositionX!=null)  Obj.style.backgroundPositionX=Images[self.NowIndex].PositionX;  
  50.           if(Images[self.NowIndex].PositionY!=null) Obj.style.backgroundPositionY=Images[self.NowIndex].PositionY;  
  51.           if(Images[self.NowIndex].Repeat!=null&&(Images[self.NowIndex].Repeat=="repeat"||Images[self.NowIndex].Repeat=="no-repeat"||Images[self.NowIndex].Repeat=="repeat-x"||Images[self.NowIndex].Repeat=="repeat-y"))  
  52.           Obj.style.backgroundRepeat=Images[self.NowIndex].Repeat;}           
  53.           if(options.Src==true){           
  54.           if(Images[self.NowIndex].Image!=null) Obj.src=Images[self.NowIndex].Image;  
  55.           if(Images[self.NowIndex].Width!=null&&BlueEffects.IsNum(Images[self.NowIndex].Width)==true) Obj.style.width=Images[self.NowIndex].Width+"px";    
  56.           if(Images[self.NowIndex].Height!=null&&BlueEffects.IsNum(Images[self.NowIndex].Height)==true) Obj.style.height=Images[self.NowIndex].Height+"px";   }          
  57.           if(options.BackGround!=true&&options.Src!=true){  
  58.           if(Images[self.NowIndex].Image!=null) Obj.style.backgroundImage="url("+Images[self.NowIndex].Image+")";   
  59.           if(Images[self.NowIndex].Position!=null) Obj.style.backgroundPosition=Images[self.NowIndex].Position;  
  60.           if(Images[self.NowIndex].PositionX!=null) Obj.style.backgroundPositionX=Images[self.NowIndex].PositionX;  
  61.           if(Images[self.NowIndex].PositionY!=null) Obj.style.backgroundPositionY=Images[self.NowIndex].PositionY;  
  62.           if(Images[self.NowIndex].Repeat!=null&&(Images[self.NowIndex].Repeat=="repeat"||Images[self.NowIndex].Repeat=="no-repeat"||Images[self.NowIndex].Repeat=="repeat-x"||Images[self.NowIndex].Repeat=="repeat-y"))  
  63.           Obj.style.backgroundRepeat=Images[self.NowIndex].Repeat; }  
  64.           }  
  65.           }  
  66.           catch(err)  
  67.           {self.errState=true;}   
  68.                    
  69.           self.MyTimeOut=setTimeout(self.ChangeImage,TimeSpace);  
  70.             
  71.           if(self.ASC==false)  
  72.           {             
  73.               self.NowIndex--;  
  74.               if(self.NowIndex<=-1||self.errState==true) {  
  75.               clearTimeout(self.MyTimeOut);  
  76.               if(options.Stop!=null)try{options.Stop();}catch(err){}  
  77.               }              
  78.           }  
  79.           else if(self.ASC==true)  
  80.           {  
  81.            self.NowIndex++;   
  82.            if(self.NowIndex>=Images.length+1||self.errState==true){  
  83.            clearTimeout(self.MyTimeOut);  
  84.            if(options.Stop!=null)try{options.Stop();}catch(err){}  
  85.            }  
  86.           }  
  87.        }//end this.ChangeImage  
  88.  } //end ImageShow  

控制代码:

JavaScript代码
  1.  var Show1=null;        
  2.   
  3. function MouseOver(Num)  
  4. {         
  5. var Obj=null;  
  6. if(Num==1)  
  7.  Obj=Show1;        
  8.         
  9. Obj.DeleteTimeOut();  
  10. Obj.ASC=true;  
  11. Obj.ChangeImage();          
  12. }  
  13.   
  14. function MouseOut(Num)  
  15. {  
  16. var Obj=null;  
  17. if(Num==1)  
  18.  Obj=Show1;   
  19.        
  20. Obj.DeleteTimeOut();  
  21. Obj.ASC=false;  
  22. Obj.ChangeImage();  
  23. // alert(Show.NowIndex);  
  24. }  
  25.   
  26. function Loaded()  
  27. {  
  28. Show1=new ImageShow({Obj:document.getElementById("ImgArea1"),TimeSpace:50,Images:Images1,BackGround:true});         
  29. MouseOver(1);  
  30. }  

更多的代码我就不贴了,可以到上面的网址去看,我也只是把这些实现的代码理出来了。

Tags: js, flash, effect, gif