浏览模式: 标准 | 列表分类:Javascript
Submitted by gouki on 2009, February 24, 11:01 PM
看到这个内容的时候,很吃惊,其实我在以前看到过一个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, 缓存
Javascript | 评论:0
| 阅读:26150
Submitted by gouki on 2009, February 17, 9:47 AM
在jQuery的插件库里面,有一个imageLazyLoader,是专门用来进行延迟加载图片的。这次看到这个对于JS,CSS,IMAGE三者都能进行延迟加载的代码,当然是用来查看一下的。代码很小,大约只有3K左右,100多行代码,却实现了这么多的效果,看来jQuery的功能是被挖掘的越来越多了。
JavaScript代码
-
-
-
-
-
-
-
-
-
- ;(function($){
- $.xLazyLoader = function ( method, options ) {
- if (typeof method == 'object') {
- options = method;
- method = 'load';
- };
- xLazyLoader[method]( options );
- };
-
- var xLazyLoader = new function ()
- {
- var head = document.getElementsByTagName("head")[0];
- this.load = function ( options )
- {
-
- var d = {
- js: [],
- css: [],
- image: [],
- name: null,
- load: function(){}
- };
- $.extend(d, options);
-
- var self = this,
- ready = false,
- loaded = {
- js: [],
- css: [],
- image: []
- }
- ;
-
- each('js', d.js);
- each('css', d.css);
- each('image', d.image);
-
- function each (type, urls)
- {
- if ( $.isArray(urls) && urls.length>0 )
- $.each( urls, function(i, url){
- load(type, url);
- });
- else if (typeof urls == 'string')
- load(type, urls);
- };
- function load (type, url)
- {
- self[type](url, function() {
- $.isArray(d[type]) ? loaded[type].push(url) : loaded[type] = url;
- d.js.length == loaded.js.length
- && d.css.length == loaded.css.length
- && d.image.length == loaded.image.length
- && d.load.apply(loaded, []);
- return;
- }, d.name ?'lazy-loaded-'+ d.name : 'lazy-loaded-'+new Date().getTime());
- };
- };
-
- this.js = function (src, callback, name)
- {
- if ($('script[src*="'+src+'"]').length>0) {
- callback();
- return;
- };
- var script = document.createElement('script');
- script.setAttribute("type","text/javascript");
- script.setAttribute("src", src);
- script.setAttribute('id', name);
- if ($.browser.msie)
- script.onreadystatechange = function () {
- /loaded|complete/.test(script.readyState) && callback();
- }
- else
-
- script.onload = callback;
- head.appendChild(script);
- };
-
- this.css = function (href, callback, name)
- {
- if ($('link[href*="'+href+'"]').length>0) {
- callback();
- return;
- };
-
- var link = $('<link rel="stylesheet" type="text/css" media="all" href="'+href+'" id="'+name+'"></link>')[0];
- if ($.browser.msie)
- link.onreadystatechange = function () {
- /loaded|complete/.test(link.readyState) && callback();
- }
- else if ($.browser.opera)
- link.onload = callback;
- else
-
- (function(){
- try {
- link.sheet.cssRule;
- } catch(e){
- setTimeout(arguments.callee, 20);
- return;
- };
- callback();
- })();
- head.appendChild(link);
- };
-
- this.image = function (src, callback)
- {
- var img = new Image();
- img.onload = callback;
- img.src = src;
- };
-
- this.disable = function ( name )
- {
- $('#lazy-loaded-'+name, head).attr('disabled', 'disabled');
- };
- this.enable = function ( name )
- {
- $('#lazy-loaded-'+name, head).removeAttr('disabled');
- };
-
- this.destroy = function ( name )
- {
- $('#lazy-loaded-'+name, head).remove();
- };
- };
- })(jQuery);
使用方法也很方便 :
Load some files
$.xLazyLoader({
js: 'jquery.ui.all.js',
css: 'ui.allplugins.css',
image: 'your_image.jpg',
load: function(){
alert('All files are loaded');
}
});
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');
}
});
Remove tags from head (javascript is still working, but css is completely destroyed )
$.xLazyLoader('destroy','dialog');
Disable css.
$.xLazyLoader('disable','dialog');
Enable css.
$.xLazyLoader('enable','dialog');
项目存在于GOOGLECODE上,网址为:http://code.google.com/p/ajaxsoft/
估计还是会有BUG,不过相信作者应该会更新的
Tags: jquery, lazyloader
Javascript | 评论:0
| 阅读:22681
Submitted by gouki on 2009, February 10, 12:00 AM
在cssrain.cn上看到很多jquery的最新插件和代码,也深为该站站长感到由衷的倾(突然就不知道这个字怎么打了,郁闷,打了个同音字,五笔也会忘字。。。汗)佩,坚持本来就是一种美德。
他的网上有很多jquery插件哦,这两天又贴了ajax大会的资料,如果是在上海,我就肯定去参加了,可惜离我太远了。
然后又看到这个PPT,入门级,我没有细看,但我想可能很多人会需要这些吧。于是下载到本地再上传了一下。
附件: jquery入门篇.rar (245.64 K, 下载次数:10989)
Tags: jquery, ppt, 入门
Javascript | 评论:2
| 阅读:28974
Submitted by gouki on 2009, February 6, 11:58 PM
jQuery获取当前元素的索引值还是很方便的,比如一大堆的li,当鼠标移上去的时候,你知道这个li是众多li中的第几个吗?
JavaScript代码
- $("li").hover(function(){
- alert($("li").index(this));
- });
.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.
Javascript | 评论:0
| 阅读:18361
Submitted by gouki on 2009, February 3, 10:46 PM
Tags: js, flash, effect, gif
Javascript | 评论:0
| 阅读:23120