- 浏览: 61875 次
- 性别:
- 来自: 顺德
-
最新评论
-
liuxf1122:
不支持最新的IE9、10和11!修改了也不行,不知如何是好啊! ...
JavaScript 工具库:Cloudgamer JavaScript Library v0.1 发布 -
gongyeye:
$$E.addEvent( this._container, ...
JavaScript 工具库:Cloudgamer JavaScript Library v0.1 发布 -
kingliu:
很好,很强大,学习了
JavaScript 工具库:Cloudgamer JavaScript Library v0.1 发布 -
lwkjob:
非常强大谢谢
图片延迟加载(按需加载)效果 -
zxh277100963:
判断ie版本 错误,我明细是IE8的判断出来是IE7
JavaScript 工具库:Cloudgamer JavaScript Library v0.1 发布
JavaScript 工具库:Cloudgamer JavaScript Library v0.1 发布
- 博客分类:
- JavaScript
研究了一年多的js,也差不多写一个自己的js库了。
我写这个不算框架,只是一个小型的js工具库,所以我用的名字是Library。
主要集合了我写js时一些常用的方法,并参考了prototype.js,jquery,google,百度,有啊等框架。
这个工具库的主要特点是:
【跨浏览器】
能在以下浏览器使用:IE6,IE7,IE8,Firefox 3.5.3,Chrome 3.0,Safari 4.0.3,Opera 10.10
ie系列是必须的,其他能支持最新版本就够了。
【使用命名空间】
当然不是真正“命名空间”,只是一些全局变量,用途相似而已。
有如下命名空间:
$$:代表Object,保存对象相关方法,也代替最常用的getElementById方法;
$$B:代表Browser,保存浏览器信息;
$$A:代表Array,保存数组和类数组的相关方法;
$$F:代表Function,保存函数的相关方法;
$$D:代表Dom,文档对象的相关操作和方法;
$$E:代表Event,事件的相关操作和兼容处理;
$$S:代表String,保存字符串的相关方法。
虽然我不反对有节制地扩展原生对象,但可以的话还是避免命名污染吧。
用多个命名空间(而不用单个)只因管理容易,用起来方便。
用两个$,不是要更多美刀(虽然很想),而是避免跟流行的框架冲突。
使用全部变量时我没有用window.x的形式,因为那样会导致一些问题,具体参考这里。
【使用匿名函数】
貌似是jquery发扬光大的,就是把代码嵌在一个function里面。
其实就是利用闭包,一来可以使用局部变量,二来可以防止命名冲突。
【使用对象检测】
“对象检测天生地优于浏览器检测”,出自“ppk谈JavaScript”的真理。
能用对象检测的都尽量用,当然有些实在太难搞的也不要太执着。
对象检测方面jQuery的support做的很好,建议去看一下。
追求目标是:
【小体积】
这里的体积不是说字符的多少,而是属性和方法的数量。
工具库的属性和方法必须是很有用的,最好是“不得不加”的。
当然随着使用的增加,工具库也会慢慢的扩大,但要坚持这个原则。
【高效率】
高效是不变的追求,当然是在权衡利弊之后。
说到高效不得不佩服一下google,它不但代码追求效率,而且下载的代码是已经经过浏览器检测的。
具体可以自己用各个浏览器下载看看试试。
建立目的是:
【整合常用方法】
把常用的方法整合到一起,既利于代码复用,也便于维护。
但也不可避免地添加一些无关的方法,从而增加了代码量,降低了效率。
【解决兼容问题】
解决一些常见的兼容性问题,减轻编码负担。
各个部分说明
【Object】
命名空间是:$$
$$本身就是最常用的方法:document.getElementById
它还包括以下几个方法:extend、deepextend和wrapper。
其中extend跟prototype.js的Object.extend是一样的,用来扩展对象,是用得最久的方法之一了。
而deepextend是深度扩展,这里的深度跟深度复制里面的意思差不多,参考的是jQuery的extend。
wrapper就复杂一点,主要用来做继承,主要参考有啊的$extends(跟prototype的Class.create也类似)。
wrapper是$extends的简化版,只保留了关键的几个部分:
function each( object, callback ) {
if ( undefined === object.length ){
for ( var name in object ) {
if (false === callback( object[name], name, object )) break;
}
} else {
for ( var i = 0, len = object.length; i len; i++ ) {
if (i in object) { if (false === callback( object[i], i, object )) break; }
}
}
};
当有length属性(数组或类数组)时根据索引迭代,否则用for...in历遍对象的属性。
由于在方法的说明中规定了"elements that are deleted are not visited",所以要用if (i in object)来判断一下。
要注意的是当callback返回false时会跳出循环,利用callback的返回值,就可以在callback内部间接控制外部的跳出操作了。
然后准备自定义的迭代方法:
{
forEach: function( object, callback, thisp ){
each.call( thisp, object, function(){ callback.apply(thisp, arguments); } );
},
map: function( object, callback, thisp ){
var ret = [];
each.call( thisp, object, function(){ ret.push(callback.apply(thisp, arguments)); });
return ret;
},
filter: function( object, callback, thisp ){
var ret = [];
each.call( thisp, object, function(item){
callback.apply(thisp, arguments) && ret.push(item);
});
return ret;
},
every: function( object, callback, thisp ){
var ret = true;
each.call( thisp, object, function(){
if ( !callback.apply(thisp, arguments) ){ ret = false; return false; };
});
return ret;
},
some: function( object, callback, thisp ){
var ret = false;
each.call( thisp, object, function(){
if ( callback.apply(thisp, arguments) ){ ret = true; return false; };
});
return ret;
}
}
迭代部分给each来做,这里只要控制callback的具体操作就可以了。
这里利用了闭包,使callback可以修改迭代方法的返回值。
every和some就利用callback的返回值跳出循环。
定义好这些方法后,再用each历遍这些方法,并加入到命名空间中:
each(
[img]http://www.cnblogs.com/Images/dot.gif" alt="[/img]
, function(method, name){
ret[name] = function( object, callback, thisp ){
if (object[name]) {
return object[name]( callback, thisp );
} else {
return method( object, callback, thisp );
}
}
});
在方法执行时,会先判断对象本身有没有指定的方法,没有的话才使用自定义的迭代方法。
【Function】
命名空间是:$$F
里面现在只有两个方法:bind和bindAsEventListener。
这两个是prototype.js里面的经典方法了,是用来给function绑定this的。
原理是利用call/apply改变调用方法的对象:
var args = slice.call(arguments, 2);
return function() {
return fun.apply(thisp, args.concat(slice.call(arguments)));
}
其中用到Array.prototype.slice把arguments对象转成数组,不知道是谁发现的,知道这个用法就行了。
ps:不止slice,其他像concat,join等也能这样使用。
bindAsEventListener跟bind不同的是会把第一个参数设定为event对象,专门用在事件回调函数中:
var args = slice.call(arguments, 2);
return function(event) {
return fun.apply(thisp, [E.fixEvent(event)].concat(args));
}
其中用到fixEvent处理event的兼容性,后面Event的部分会详细说明。
【Dom】
命名空间是:$$D
这部分是工具库中最大,最复杂也最重要的部分。
主要是储存了一些Dom操作,并解决一般的兼容性问题。
其中getScrollTop和getScrollLeft分别是获取文档滚动的scrollTop和scrollLeft。
一般来说如果在标准模式下应该用documentElement获取,否则用body获取。
但chrome和safari(都是用WebKit渲染引擎)即使在标准模式下也要用body来获取。
这里用的方法是:
var doc = node ? node.ownerDocument : document;
return doc.documentElement.scrollTop || doc.body.scrollTop;
优先获取documentElement的再选择body的,这样就基本能解决了。
但这个其实是不完善的,如果给文档添加如下样式:
body{height:300px;overflow:scroll;width:500px;}
在ie6/7会发现在标准模式下body的部分会按指定高度和宽度呈现,而且能带滚动条。
就是说documentElement和body能各自设置scrollTop。
那这个时候该获取哪个就说不清了,还好一般情况并不需要这样设置的(至少我是没碰过)。
对于这样的特例,知道有这个情况就行了,没必要为了它增加太多代码。
ps:获取的scrollLeft/scrollLeft是不会有负值的。
contains方法是判断参数1元素对象是否包含了参数2元素对象。
主要利用ie的contains和w3c的compareDocumentPosition来判断。
具体参考这里的比较文档位置部分。
有两个元素坐标相关的方法:rect和clientRect。
其中rect是相对浏览器文档的位置,clientRect是相对浏览器视窗的位置。
当支持getBoundingClientRect时,利用它配合getScrollLeft/getScrollTop获取文档位置。
否则用循环获取offsetParent的offsetLeft/offsetTop的方式获取。
具体参考这里的比较元素位置部分。
还有三个样式相关的方法:curStyle、getStyle、setStyle
curStyle是用来获取元素的最终样式表的,根据支持情况返回getComputedStyle(w3c)或currentStyle(ie)。
ps:这里要优先判断getComputedStyle,因为opera也支持currentStyle。
getStyle是用来获取元素指定样式属性的最终样式值的。
支持getComputedStyle的直接用它获取样式的computed value就行,关于computed value可以参考这里。
而currentStyle虽然跟getComputedStyle有点像都是获取最终样式,但两者得到的值的形式是不同的。
它不像getComputedStyle那样返回渲染完成后准确的规格统一的值,而只是一个设置值。
而且这个值还不一定就是渲染后的准确值。
程序主要做的就是在ie中尽量获取接近getComputedStyle的值。
首先是处理透明度,ie虽然用的是滤镜但它的值除以100就跟w3c的"opacity"的值一样了:
if (/alpha\(opacity=(.*)\)/i.test(style.filter)) {
var opacity = parseFloat(RegExp.$1);
return opacity ? opacity / 100 : 0;
}
return 1;
还有"float",这个比较简单换成"styleFloat"就行了。
获取样式后还有一个工作是转换单位。当判断得到的值是一个数值而单位又不是px的话,就会进行转换。
方法是参考jQuery的curCSS的,理解之前先认识两个比较少用的属性:runtimeStyle和pixelLeft。
runtimeStyle是ie特有的属性,用法跟style差不多,但它有着最高的优先级。
就是说如果在runtimeStyle设置了样式就会忽略掉style中同样的样式。
具体可以参考birdshome的“关于HTML Object中三个Style实例的区别”和“关于使用runtimeStyle属性问题讨论”
而pixelLeft的作用是以像素px为单位返回元素的left样式值,ie(还能用在runtimeStyle)和opera支持。
知道这两个东西后,就能理解它的原理了:
1,先备份原来的值:
style = elem.style, left = style.left, rsLeft = elem.runtimeStyle.left;
2,设置runtimeStyle的left为currentStyle的left:
elem.runtimeStyle.left = elem.currentStyle.left;
目的是利用runtimeStyle的优先级保证修改style后能按原来的样式显示;
3,设置style的left为要转换的值,并巧妙地利用pixelLeft获取这个值的px单位形式:
style.left = ret || 0;
ret = style.pixelLeft + "px";
4,最后恢复原来的left值:
style.left = left;
elem.runtimeStyle.left = rsLeft;
这样就能在不改变渲染样式的情况下转换成像素值了。
ps:jQuery中有说明这个方法也是Dean Edwards提出的,神啊。
最后还有一个setStyle用来设置样式,主要用来批量设置样式和解决一些兼容问题。
可以用以下两种方式的调用:
$$D.setStyle(元素或元素集合, { 样式属性名: 属性值, ... })
$$D.setStyle(元素或元素集合, 样式属性名, 属性值)
第一个参数是要设置样式的元素或元素集合,如果是单个元素会自动转成单元素集合:
if (!elems.length) { elems = [ elems ]; }
第二个参数是一个键值对集合,键是样式属性名,值是对应的属性值。
如果只设置一个样式,可以设第二个参数是样式属性名,第三个参数是属性值,由程序新建一个键值对集合:
if (typeof style == "string") { var s = style; style = {}; style[s] = value; }
再用forEach历遍元素集合,绑定的函数里给元素设置用for in列出的所有样式。
ps:单个元素设置单个样式应该直接设置,除非是有兼容问题。
剩下的就是解决兼容问题了。
首先是透明度,ie是用滤镜的,如果直接设置filter会把其他滤镜都替换没了。
参考jQuery的方法,先获取原来的filter,替换掉透明滤镜的部分,再加上要设置好的透明滤镜:
elem.style.filter = (elem.currentStyle.filter || "").replace( /alpha\([^)]*\)/, "" ) +
"alpha(opacity=" + value * 100 + ")";
挺巧妙的方法,记得值要乘以100对应w3c的"opacity"。
至于"float"就比较简单,ie用"styleFloat"其他用"cssFloat"就行了。
【Event】
命名空间是:$$E
这个是兼容性的老问题了,这里包含三个方法:addEvent,removeEvent,fixEvent。
addEvent和removeEvent分别是添加和移除事件,以前我是用ie的attachEvent跟w3c的addEventListener做兼容。
但看到Dean Edwards的方法后,就改用他的了,除了兼容性更好外还能解决一些bug(详细看这里的cloneNode的bug部分)。
代码中的addEvent/removeEvent根据需要在Dean代码的基础上做了些修改,不过原理还是一样的。
而fixEvent是用来修正event对象的兼容性的,主要是添加一些w3c的属性和方法,上面bindAsEventListener就用到了它。
这里我只做了ie的兼容,其他都是直接使用event,这样就做不到细致的兼容,不过够用就行了。
jQuery的fix就做的比较完善,值得研究。
【String】
命名空间是:$$S
我比较少做String的高级应用,所以暂时也没什么方法需要放进来。
里面有一个camelize方法,用来把横杠形式的字符串(例如"border-top")转换成驼峰形式(例如"borderTop")。
原理是利用replace第二个参数是function时的技巧:
return s.replace(/-([a-z])/ig, function(all, letter) { return letter.toUpperCase(); });
这个可以用在样式属性名的转换,在getStyle/setStyle中就使用了它。
调用方式
最后说说调用方式,跟调用一般函数方法是一样的,只是前面要带上命名空间。
例如:$$.extend(...)
像$$由于本身就是function,可以直接这样用:$$(...)
链式调用或许比较酷,但不太适合用在这样的工具库上,除非是扩展原生对象(这里也没有使用)。
版本下载
Cloudgamer JavaScript Library v0.1
完整版本 压缩版本
这个个人喜好而已
我写这个不算框架,只是一个小型的js工具库,所以我用的名字是Library。
主要集合了我写js时一些常用的方法,并参考了prototype.js,jquery,google,百度,有啊等框架。
这个工具库的主要特点是:
【跨浏览器】
能在以下浏览器使用:IE6,IE7,IE8,Firefox 3.5.3,Chrome 3.0,Safari 4.0.3,Opera 10.10
ie系列是必须的,其他能支持最新版本就够了。
【使用命名空间】
当然不是真正“命名空间”,只是一些全局变量,用途相似而已。
有如下命名空间:
$$:代表Object,保存对象相关方法,也代替最常用的getElementById方法;
$$B:代表Browser,保存浏览器信息;
$$A:代表Array,保存数组和类数组的相关方法;
$$F:代表Function,保存函数的相关方法;
$$D:代表Dom,文档对象的相关操作和方法;
$$E:代表Event,事件的相关操作和兼容处理;
$$S:代表String,保存字符串的相关方法。
虽然我不反对有节制地扩展原生对象,但可以的话还是避免命名污染吧。
用多个命名空间(而不用单个)只因管理容易,用起来方便。
用两个$,不是要更多美刀(虽然很想),而是避免跟流行的框架冲突。
使用全部变量时我没有用window.x的形式,因为那样会导致一些问题,具体参考这里。
【使用匿名函数】
貌似是jquery发扬光大的,就是把代码嵌在一个function里面。
其实就是利用闭包,一来可以使用局部变量,二来可以防止命名冲突。
【使用对象检测】
“对象检测天生地优于浏览器检测”,出自“ppk谈JavaScript”的真理。
能用对象检测的都尽量用,当然有些实在太难搞的也不要太执着。
对象检测方面jQuery的support做的很好,建议去看一下。
追求目标是:
【小体积】
这里的体积不是说字符的多少,而是属性和方法的数量。
工具库的属性和方法必须是很有用的,最好是“不得不加”的。
当然随着使用的增加,工具库也会慢慢的扩大,但要坚持这个原则。
【高效率】
高效是不变的追求,当然是在权衡利弊之后。
说到高效不得不佩服一下google,它不但代码追求效率,而且下载的代码是已经经过浏览器检测的。
具体可以自己用各个浏览器下载看看试试。
建立目的是:
【整合常用方法】
把常用的方法整合到一起,既利于代码复用,也便于维护。
但也不可避免地添加一些无关的方法,从而增加了代码量,降低了效率。
【解决兼容问题】
解决一些常见的兼容性问题,减轻编码负担。
各个部分说明
【Object】
命名空间是:$$
$$本身就是最常用的方法:document.getElementById
它还包括以下几个方法:extend、deepextend和wrapper。
其中extend跟prototype.js的Object.extend是一样的,用来扩展对象,是用得最久的方法之一了。
而deepextend是深度扩展,这里的深度跟深度复制里面的意思差不多,参考的是jQuery的extend。
wrapper就复杂一点,主要用来做继承,主要参考有啊的$extends(跟prototype的Class.create也类似)。
wrapper是$extends的简化版,只保留了关键的几个部分:
function each( object, callback ) {
if ( undefined === object.length ){
for ( var name in object ) {
if (false === callback( object[name], name, object )) break;
}
} else {
for ( var i = 0, len = object.length; i len; i++ ) {
if (i in object) { if (false === callback( object[i], i, object )) break; }
}
}
};
当有length属性(数组或类数组)时根据索引迭代,否则用for...in历遍对象的属性。
由于在方法的说明中规定了"elements that are deleted are not visited",所以要用if (i in object)来判断一下。
要注意的是当callback返回false时会跳出循环,利用callback的返回值,就可以在callback内部间接控制外部的跳出操作了。
然后准备自定义的迭代方法:
{
forEach: function( object, callback, thisp ){
each.call( thisp, object, function(){ callback.apply(thisp, arguments); } );
},
map: function( object, callback, thisp ){
var ret = [];
each.call( thisp, object, function(){ ret.push(callback.apply(thisp, arguments)); });
return ret;
},
filter: function( object, callback, thisp ){
var ret = [];
each.call( thisp, object, function(item){
callback.apply(thisp, arguments) && ret.push(item);
});
return ret;
},
every: function( object, callback, thisp ){
var ret = true;
each.call( thisp, object, function(){
if ( !callback.apply(thisp, arguments) ){ ret = false; return false; };
});
return ret;
},
some: function( object, callback, thisp ){
var ret = false;
each.call( thisp, object, function(){
if ( callback.apply(thisp, arguments) ){ ret = true; return false; };
});
return ret;
}
}
迭代部分给each来做,这里只要控制callback的具体操作就可以了。
这里利用了闭包,使callback可以修改迭代方法的返回值。
every和some就利用callback的返回值跳出循环。
定义好这些方法后,再用each历遍这些方法,并加入到命名空间中:
each(
[img]http://www.cnblogs.com/Images/dot.gif" alt="[/img]
, function(method, name){
ret[name] = function( object, callback, thisp ){
if (object[name]) {
return object[name]( callback, thisp );
} else {
return method( object, callback, thisp );
}
}
});
在方法执行时,会先判断对象本身有没有指定的方法,没有的话才使用自定义的迭代方法。
【Function】
命名空间是:$$F
里面现在只有两个方法:bind和bindAsEventListener。
这两个是prototype.js里面的经典方法了,是用来给function绑定this的。
原理是利用call/apply改变调用方法的对象:
var args = slice.call(arguments, 2);
return function() {
return fun.apply(thisp, args.concat(slice.call(arguments)));
}
其中用到Array.prototype.slice把arguments对象转成数组,不知道是谁发现的,知道这个用法就行了。
ps:不止slice,其他像concat,join等也能这样使用。
bindAsEventListener跟bind不同的是会把第一个参数设定为event对象,专门用在事件回调函数中:
var args = slice.call(arguments, 2);
return function(event) {
return fun.apply(thisp, [E.fixEvent(event)].concat(args));
}
其中用到fixEvent处理event的兼容性,后面Event的部分会详细说明。
【Dom】
命名空间是:$$D
这部分是工具库中最大,最复杂也最重要的部分。
主要是储存了一些Dom操作,并解决一般的兼容性问题。
其中getScrollTop和getScrollLeft分别是获取文档滚动的scrollTop和scrollLeft。
一般来说如果在标准模式下应该用documentElement获取,否则用body获取。
但chrome和safari(都是用WebKit渲染引擎)即使在标准模式下也要用body来获取。
这里用的方法是:
var doc = node ? node.ownerDocument : document;
return doc.documentElement.scrollTop || doc.body.scrollTop;
优先获取documentElement的再选择body的,这样就基本能解决了。
但这个其实是不完善的,如果给文档添加如下样式:
body{height:300px;overflow:scroll;width:500px;}
在ie6/7会发现在标准模式下body的部分会按指定高度和宽度呈现,而且能带滚动条。
就是说documentElement和body能各自设置scrollTop。
那这个时候该获取哪个就说不清了,还好一般情况并不需要这样设置的(至少我是没碰过)。
对于这样的特例,知道有这个情况就行了,没必要为了它增加太多代码。
ps:获取的scrollLeft/scrollLeft是不会有负值的。
contains方法是判断参数1元素对象是否包含了参数2元素对象。
主要利用ie的contains和w3c的compareDocumentPosition来判断。
具体参考这里的比较文档位置部分。
有两个元素坐标相关的方法:rect和clientRect。
其中rect是相对浏览器文档的位置,clientRect是相对浏览器视窗的位置。
当支持getBoundingClientRect时,利用它配合getScrollLeft/getScrollTop获取文档位置。
否则用循环获取offsetParent的offsetLeft/offsetTop的方式获取。
具体参考这里的比较元素位置部分。
还有三个样式相关的方法:curStyle、getStyle、setStyle
curStyle是用来获取元素的最终样式表的,根据支持情况返回getComputedStyle(w3c)或currentStyle(ie)。
ps:这里要优先判断getComputedStyle,因为opera也支持currentStyle。
getStyle是用来获取元素指定样式属性的最终样式值的。
支持getComputedStyle的直接用它获取样式的computed value就行,关于computed value可以参考这里。
而currentStyle虽然跟getComputedStyle有点像都是获取最终样式,但两者得到的值的形式是不同的。
它不像getComputedStyle那样返回渲染完成后准确的规格统一的值,而只是一个设置值。
而且这个值还不一定就是渲染后的准确值。
程序主要做的就是在ie中尽量获取接近getComputedStyle的值。
首先是处理透明度,ie虽然用的是滤镜但它的值除以100就跟w3c的"opacity"的值一样了:
if (/alpha\(opacity=(.*)\)/i.test(style.filter)) {
var opacity = parseFloat(RegExp.$1);
return opacity ? opacity / 100 : 0;
}
return 1;
还有"float",这个比较简单换成"styleFloat"就行了。
获取样式后还有一个工作是转换单位。当判断得到的值是一个数值而单位又不是px的话,就会进行转换。
方法是参考jQuery的curCSS的,理解之前先认识两个比较少用的属性:runtimeStyle和pixelLeft。
runtimeStyle是ie特有的属性,用法跟style差不多,但它有着最高的优先级。
就是说如果在runtimeStyle设置了样式就会忽略掉style中同样的样式。
具体可以参考birdshome的“关于HTML Object中三个Style实例的区别”和“关于使用runtimeStyle属性问题讨论”
而pixelLeft的作用是以像素px为单位返回元素的left样式值,ie(还能用在runtimeStyle)和opera支持。
知道这两个东西后,就能理解它的原理了:
1,先备份原来的值:
style = elem.style, left = style.left, rsLeft = elem.runtimeStyle.left;
2,设置runtimeStyle的left为currentStyle的left:
elem.runtimeStyle.left = elem.currentStyle.left;
目的是利用runtimeStyle的优先级保证修改style后能按原来的样式显示;
3,设置style的left为要转换的值,并巧妙地利用pixelLeft获取这个值的px单位形式:
style.left = ret || 0;
ret = style.pixelLeft + "px";
4,最后恢复原来的left值:
style.left = left;
elem.runtimeStyle.left = rsLeft;
这样就能在不改变渲染样式的情况下转换成像素值了。
ps:jQuery中有说明这个方法也是Dean Edwards提出的,神啊。
最后还有一个setStyle用来设置样式,主要用来批量设置样式和解决一些兼容问题。
可以用以下两种方式的调用:
$$D.setStyle(元素或元素集合, { 样式属性名: 属性值, ... })
$$D.setStyle(元素或元素集合, 样式属性名, 属性值)
第一个参数是要设置样式的元素或元素集合,如果是单个元素会自动转成单元素集合:
if (!elems.length) { elems = [ elems ]; }
第二个参数是一个键值对集合,键是样式属性名,值是对应的属性值。
如果只设置一个样式,可以设第二个参数是样式属性名,第三个参数是属性值,由程序新建一个键值对集合:
if (typeof style == "string") { var s = style; style = {}; style[s] = value; }
再用forEach历遍元素集合,绑定的函数里给元素设置用for in列出的所有样式。
ps:单个元素设置单个样式应该直接设置,除非是有兼容问题。
剩下的就是解决兼容问题了。
首先是透明度,ie是用滤镜的,如果直接设置filter会把其他滤镜都替换没了。
参考jQuery的方法,先获取原来的filter,替换掉透明滤镜的部分,再加上要设置好的透明滤镜:
elem.style.filter = (elem.currentStyle.filter || "").replace( /alpha\([^)]*\)/, "" ) +
"alpha(opacity=" + value * 100 + ")";
挺巧妙的方法,记得值要乘以100对应w3c的"opacity"。
至于"float"就比较简单,ie用"styleFloat"其他用"cssFloat"就行了。
【Event】
命名空间是:$$E
这个是兼容性的老问题了,这里包含三个方法:addEvent,removeEvent,fixEvent。
addEvent和removeEvent分别是添加和移除事件,以前我是用ie的attachEvent跟w3c的addEventListener做兼容。
但看到Dean Edwards的方法后,就改用他的了,除了兼容性更好外还能解决一些bug(详细看这里的cloneNode的bug部分)。
代码中的addEvent/removeEvent根据需要在Dean代码的基础上做了些修改,不过原理还是一样的。
而fixEvent是用来修正event对象的兼容性的,主要是添加一些w3c的属性和方法,上面bindAsEventListener就用到了它。
这里我只做了ie的兼容,其他都是直接使用event,这样就做不到细致的兼容,不过够用就行了。
jQuery的fix就做的比较完善,值得研究。
【String】
命名空间是:$$S
我比较少做String的高级应用,所以暂时也没什么方法需要放进来。
里面有一个camelize方法,用来把横杠形式的字符串(例如"border-top")转换成驼峰形式(例如"borderTop")。
原理是利用replace第二个参数是function时的技巧:
return s.replace(/-([a-z])/ig, function(all, letter) { return letter.toUpperCase(); });
这个可以用在样式属性名的转换,在getStyle/setStyle中就使用了它。
调用方式
最后说说调用方式,跟调用一般函数方法是一样的,只是前面要带上命名空间。
例如:$$.extend(...)
像$$由于本身就是function,可以直接这样用:$$(...)
链式调用或许比较酷,但不太适合用在这样的工具库上,除非是扩展原生对象(这里也没有使用)。
版本下载
Cloudgamer JavaScript Library v0.1
完整版本 压缩版本
评论
8 楼
liuxf1122
2013-12-14
不支持最新的IE9、10和11!修改了也不行,不知如何是好啊!
7 楼
gongyeye
2013-10-24
$$E.addEvent( this._container, "keypress", function(e,s){
alert(e);
} );
这样写有错吗,为什么用不了?
alert(e);
} );
这样写有错吗,为什么用不了?
6 楼
kingliu
2012-11-21
很好,很强大,学习了
5 楼
zxh277100963
2012-02-28
判断ie版本 错误,我明细是IE8的判断出来是IE7
4 楼
'十三'
2010-08-01
写得好极了,包含了大部分普遍需要的公共方法和dom操作,那个迭代部分处理的很漂亮,还有样式单位转化部分,Dean Edwards真能琢磨,厉害。楼主对String扩展不多,我在实际应用中经常需要处理字符串去除两边空格的情况(trim方法),还有就是json对象的编码解码问题,当然了,个人需求不同,做为一个基本扩展库,已经很好了
。

3 楼
cloudgamer
2010-01-30
kjj 写道
非用$$吗,就不能换其他符号吗,两个看起来还有点怪怪的!!!
这个个人喜好而已
2 楼
kjj
2010-01-29
非用$$吗,就不能换其他符号吗,两个看起来还有点怪怪的!!!
1 楼
cloudgamer
2010-01-29
/*! * Cloudgamer JavaScript Library v0.1 * Copyright (c) 2009 cloudgamer * Blog: http://cloudgamer.cnblogs.com/ * Date: 2009-10-15 */ var $$, $$B, $$A, $$F, $$D, $$E, $$S; (function(){ var O, B, A, F, D, E, S; /*Object*/ O = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; O.extend = function (destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; }; O.deepextend = function (destination, source) { for (var property in source) { var copy = source[property]; if ( destination === copy ) continue; if ( typeof copy === "object" ){ destination[property] = arguments.callee( destination[property] || {}, copy ); }else{ destination[property] = copy; } } return destination; }; O.wrapper = function(me, parent) { var ins = function() { me.apply(this, arguments); }; var subclass = function() {}; subclass.prototype = parent.prototype; ins.prototype = new subclass; return ins; }; /*Browser*/ /*from youa*/ B = (function(ua){ var b = { msie: /msie/.test(ua) && !/opera/.test(ua), opera: /opera/.test(ua), safari: /webkit/.test(ua) && !/chrome/.test(ua), firefox: /firefox/.test(ua), chrome: /chrome/.test(ua) }; var vMark = ""; for (var i in b) { if (b[i]) { vMark = "safari" == i ? "version" : i; break; } } b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0"; b.ie = b.msie; b.ie6 = b.msie && parseInt(b.version, 10) == 6; b.ie7 = b.msie && parseInt(b.version, 10) == 7; b.ie8 = b.msie && parseInt(b.version, 10) == 8; return b; })(window.navigator.userAgent.toLowerCase()); /*Array*/ A = function(){ var ret = { isArray: function( obj ) { return Object.prototype.toString.call(obj) === "[object Array]"; }, indexOf: function( array, elt, from ){ if (array.indexOf) { return isNaN(from) ? array.indexOf(elt) : array.indexOf(elt, from); } else { var len = array.length; from = isNaN(from) ? 0 : from < 0 ? Math.ceil(from) + len : Math.floor(from); for ( ; from < len; from++ ) { if ( array[from] === elt ) return from; } return -1; } }, lastIndexOf: function( array, elt, from ){ if (array.lastIndexOf) { return isNaN(from) ? array.lastIndexOf(elt) : array.lastIndexOf(elt, from); } else { var len = array.length; from = isNaN(from) || from >= len - 1 ? len - 1 : from < 0 ? Math.ceil(from) + len : Math.floor(from); for ( ; from > -1; from-- ) { if ( array[from] === elt ) return from; } return -1; } } }; function each( object, callback ) { if ( undefined === object.length ){ for ( var name in object ) { if (false === callback( object[name], name, object )) break; } } else { for ( var i = 0, len = object.length; i < len; i++ ) { if (i in object) { if (false === callback( object[i], i, object )) break; } } } }; each({ forEach: function( object, callback, thisp ){ each.call( thisp, object, function(){ callback.apply(thisp, arguments); } ); }, map: function( object, callback, thisp ){ var ret = []; each.call( thisp, object, function(){ ret.push(callback.apply(thisp, arguments)); }); return ret; }, filter: function( object, callback, thisp ){ var ret = []; each.call( thisp, object, function(item){ callback.apply(thisp, arguments) && ret.push(item); }); return ret; }, every: function( object, callback, thisp ){ var ret = true; each.call( thisp, object, function(){ if ( !callback.apply(thisp, arguments) ){ ret = false; return false; }; }); return ret; }, some: function( object, callback, thisp ){ var ret = false; each.call( thisp, object, function(){ if ( callback.apply(thisp, arguments) ){ ret = true; return false; }; }); return ret; } }, function(method, name){ ret[name] = function( object, callback, thisp ){ if (object[name]) { return object[name]( callback, thisp ); } else { return method( object, callback, thisp ); } } }); return ret; }(); /*Function*/ F = (function(){ var slice = Array.prototype.slice; return { bind: function( fun, thisp ) { var args = slice.call(arguments, 2); return function() { return fun.apply(thisp, args.concat(slice.call(arguments))); } }, bindAsEventListener: function( fun, thisp ) { var args = slice.call(arguments, 2); return function(event) { return fun.apply(thisp, [E.fixEvent(event)].concat(args)); } } }; })(); /*Dom*/ D = { getScrollTop: function(node) { var doc = node ? node.ownerDocument : document; return doc.documentElement.scrollTop || doc.body.scrollTop; }, getScrollLeft: function(node) { var doc = node ? node.ownerDocument : document; return doc.documentElement.scrollLeft || doc.body.scrollLeft; }, contains: document.defaultView ? function (a, b) { return !!( a.compareDocumentPosition(b) & 16 ); } : function (a, b) { return a != b && a.contains(b); }, rect: function(node){ var left = 0, top = 0, right = 0, bottom = 0; //ie8的getBoundingClientRect获取不准确 if ( !node.getBoundingClientRect || B.ie8 ) { var n = node; while (n) { left += n.offsetLeft, top += n.offsetTop; n = n.offsetParent; }; right = left + node.offsetWidth; bottom = top + node.offsetHeight; } else { var rect = node.getBoundingClientRect(); left = right = D.getScrollLeft(node); top = bottom = D.getScrollTop(node); left += rect.left; right += rect.right; top += rect.top; bottom += rect.bottom; }; return { "left": left, "top": top, "right": right, "bottom": bottom }; }, clientRect: function(node) { var rect = D.rect(node), sLeft = D.getScrollLeft(node), sTop = D.getScrollTop(node); rect.left -= sLeft; rect.right -= sLeft; rect.top -= sTop; rect.bottom -= sTop; return rect; }, curStyle: document.defaultView ? function (elem) { return document.defaultView.getComputedStyle(elem, null); } : function (elem) { return elem.currentStyle; }, getStyle: document.defaultView ? function (elem, name) { var style = document.defaultView.getComputedStyle(elem, null); return name in style ? style[ name ] : style.getPropertyValue( name ); } : function (elem, name) { var style = elem.currentStyle; //透明度 from youa if (name == "opacity") { if ( /alpha\(opacity=(.*)\)/i.test(style.filter) ) { var opacity = parseFloat(RegExp.$1); return opacity ? opacity / 100 : 0; } return 1; }; if (name == "float") { name = "styleFloat"; } var ret = style[ name ] || style[ S.camelize( name ) ]; //单位转换 from jqury if ( !/^\-?\d+(px)?$/i.test( ret ) && /^\-?\d/.test( ret ) ) { style = elem.style, left = style.left, rsLeft = elem.runtimeStyle.left; elem.runtimeStyle.left = elem.currentStyle.left; style.left = ret || 0; ret = style.pixelLeft + "px"; style.left = left; elem.runtimeStyle.left = rsLeft; } return ret; }, setStyle: function(elems, style, value) { if ( !elems.length ) { elems = [ elems ]; } if ( typeof style == "string" ) { var s = style; style = {}; style[s] = value; } A.forEach( elems, function(elem ) { for (var name in style) { var value = style[name]; if (name == "opacity" && B.ie) { //ie透明度设置 from jqury elem.style.filter = (elem.currentStyle.filter || "").replace( /alpha\([^)]*\)/, "" ) + "alpha(opacity=" + value * 100 + ")"; } else if (name == "float") { elem.style[ B.ie ? "styleFloat" : "cssFloat" ] = value; } else { elem.style[ S.camelize( name ) ] = value; } }; }); } }; /*Event*/ E = (function(){ /*from dean edwards*/ var addEvent, removeEvent, guid = 1; if ( window.addEventListener ) { addEvent = function( element, type, handler ){ element.addEventListener(type, handler, false); }; removeEvent = function( element, type, handler ){ element.removeEventListener(type, handler, false); }; } else { addEvent = function( element, type, handler ){ if (!handler.$$guid) handler.$$guid = guid++; if (!element.events) element.events = {}; var handlers = element.events[type]; if (!handlers) { handlers = element.events[type] = {}; if (element["on" + type]) { handlers[0] = element["on" + type]; } } handlers[handler.$$guid] = handler; element["on" + type] = handleEvent; }; removeEvent = function( element, type, handler ){ if (element.events && element.events[type]) { delete element.events[type][handler.$$guid]; } }; function handleEvent() { var returnValue = true, event = fixEvent(); var handlers = this.events[event.type]; for (var i in handlers) { this.$$handleEvent = handlers[i]; if (this.$$handleEvent(event) === false) { returnValue = false; } } return returnValue; }; } function fixEvent(event) { if (event) return event; event = window.event; event.pageX = event.clientX + D.getScrollLeft(event.srcElement); event.pageY = event.clientY + D.getScrollTop(event.srcElement); event.target = event.srcElement; event.stopPropagation = stopPropagation; event.preventDefault = preventDefault; switch (event.type) { case "mouseout" : event.relatedTarget = event.toElement; break; case "mouseover" : event.relatedTarget = event.fromElement; break; }; return event; }; function stopPropagation() { this.cancelBubble = true; }; function preventDefault() { this.returnValue = false; }; return { "addEvent": addEvent, "removeEvent": removeEvent, "fixEvent": fixEvent }; })(); /*String*/ S = { camelize: function(s){ return s.replace(/-([a-z])/ig, function(all, letter) { return letter.toUpperCase(); }); } }; /*System*/ // remove css image flicker if (B.ie6) { try { document.execCommand("BackgroundImageCache", false, true); } catch(e) {} }; /*define*/ $$ = O; $$B = B; $$A = A; $$F = F; $$D = D; $$E = E; $$S = S; })();
发表评论
-
AlertBox 弹出层(信息提示框)效果
2010-10-11 11:06 1215弹出层就是相对文档或窗口定位的一个层,一般用来显示提示信息、广 ... -
JavaScript 图片3D展示空间(3DRoom)
2010-09-20 09:59 1363一般的平面效果,通过 ... -
ccs3/滤镜/canvas的图片旋转/缩放/翻转变换效果
2010-08-21 13:48 1666以前要实现图片的旋转或翻转,只能用ie的滤镜来实现,虽然can ... -
SlideView 图片滑动(扩展/收缩)展示效果
2010-07-30 08:52 1271滑动展示效果主要用在 ... -
ImageZoom 图片放大效果(扩展篇)
2010-04-16 21:32 1267上一篇ImageZoom已经对图片放大效果做了详细的分析,这次 ... -
ImageZoom 图片放大效果
2010-04-07 21:03 1279这个效果也叫放大镜效果,最早好像在ppg出现的,之后就有了很多 ... -
图片延迟加载(按需加载)效果
2010-03-11 21:13 2874之前在做一个图片浏览效果时,要看后面的小图必须等到前面的加载完 ... -
Lazyload 延迟加载(缓载)效果
2010-02-22 09:58 1576Lazyload是通过延迟加载 ... -
JavaScript 图片滑动展示效果
2008-05-13 01:34 1733看到jQuery实例:图片展示效果后,我也想拿来试试,但我不太 ... -
JavaScript 图片变换效果(ie only)
2008-05-23 12:02 2326仿照常见的那个图片变换flash做的效果,纯js。不过滤镜变换 ... -
JavaScript 图片滑动切换效果
2008-07-06 01:25 3208序一(08/07/06) 看到alibaba的一个图片切换效 ... -
JavaScript blog式日历控件
2008-08-23 00:25 1090近来要做一个记事本系统,想找一个合适的日历控件,但网上的都是那 ... -
JavaScript Table排序
2008-10-06 08:24 1106程序的实现的是在客户 ... -
JavaScript 日期联动选择器
2008-10-28 10:30 1277一个日期联动选择器, ... -
JavaScript 拖拉缩放效果
2008-12-03 09:07 813拖拉缩放效果,实现通过鼠标拖动来调整层的面积(宽高)大小。例如 ... -
JavaScript 滑动条效果
2008-12-24 08:27 2520这个滑动条(拖动条) ... -
JavaScript Tween算法及缓动效果
2009-01-06 09:17 1201Flash做动画时会用到Tween类,利用它可以做很多动画效果 ... -
JavaScript 颜色梯度和渐变效果
2009-03-11 08:24 1101近来看了Dean的“Convert any colour va ... -
JavaScript Table行定位效果
2009-05-18 14:02 1057近来有客户要求用table显示一大串数据,由于滚动后就看不到表 ... -
JavaScript 浮动定位提示效果
2009-07-07 08:23 1133本来想做一个集合浮动 ...
相关推荐
Cloudgamer JavaScript Library v0.1 是一个专为游戏开发者设计的JavaScript工具库,旨在提升在云端游戏开发和运行的效率。此版本的库重点聚焦于优化和简化JavaScript代码,以便在Web环境中流畅地运行游戏。它可能...
Cloudgamer JavaScript Library Author: Project in Chinese Animations [AlertBox 弹出层(信息提示框)效果] () [JavaScript 图片3D展示空间(3DRoom)] () [图片(旋转/缩放/翻转)变换效果(ccs3/滤镜/canvas)] ()...
人脸识别项目实战
深度学习教程和开发计划.zip
c语言学习
基本版贪吃蛇源代码.zip
项目资源包含:可运行源码+sql文件+ python3.8+django+mysql5.7+vue 适用人群:学习不同技术领域的小白或进阶学习者;可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 项目具有较高的学习借鉴价值,也可拿来修改、二次开发。 有任何使用上的问题,欢迎随时与博主沟通,博主看到后会第一时间及时解答。 Django==3.2.11 PyMySQL==1.0.2 djangorestframework==3.13.0 django-cors-headers==3.13.0 Pillow==9.1.1 psutil==5.9.4
Abaqus螺栓拧紧过程仿真 (1)螺栓螺母可实现参数化建模,全部采用六面体C3D8R单元建模 (2)施加边界条件实现螺母的拧紧过程,输出过程动画和应力、位移参数 (3)提取螺栓中部截面的轴力和螺母拧紧力矩之间的关系 ,Abaqus; 螺栓拧紧; 参数化建模; 六面体C3D8R单元建模; 边界条件; 输出动画; 应力位移参数; 轴力与拧紧力矩关系。,Abaqus螺栓拧紧仿真:六面体单元建模与力矩关系分析
标题基于SpringBoot的汽车售后服务系统及微信小程序的设计与实现AI更换标题第1章引言介绍汽车售后服务的重要性,SpringBoot和微信小程序的应用背景,以及本研究的意义和目的。1.1研究背景与意义阐述汽车售后服务市场的现状及发展趋势,SpringBoot和微信小程序在售后服务中的应用前景。1.2国内外研究现状概述国内外在汽车售后服务系统和小程序开发方面的研究进展。1.3研究内容与创新点介绍本文的主要研究内容,包括系统设计和微信小程序的开发,并阐述创新点。第2章相关理论与技术介绍SpringBoot框架、微信小程序开发的相关理论和关键技术。2.1SpringBoot框架概述阐述SpringBoot框架的特点、优势以及在系统开发中的应用。2.2微信小程序开发技术介绍微信小程序的开发流程、关键技术和功能实现。2.3数据库技术与系统设计讨论数据库设计原则、数据存储和处理速度的问题,并阐述系统设计的思路和方法。第3章系统需求分析与设计对汽车售后服务系统的需求进行分析,并设计系统的整体架构和功能模块。3.1需求分析从用户角度和业务需求出发,对系统的功能需求和非功能需求进行详细分析。3.2
在智慧园区建设的浪潮中,一个集高效、安全、便捷于一体的综合解决方案正逐步成为现代园区管理的标配。这一方案旨在解决传统园区面临的智能化水平低、信息孤岛、管理手段落后等痛点,通过信息化平台与智能硬件的深度融合,为园区带来前所未有的变革。 首先,智慧园区综合解决方案以提升园区整体智能化水平为核心,打破了信息孤岛现象。通过构建统一的智能运营中心(IOC),采用1+N模式,即一个智能运营中心集成多个应用系统,实现了园区内各系统的互联互通与数据共享。IOC运营中心如同园区的“智慧大脑”,利用大数据可视化技术,将园区安防、机电设备运行、车辆通行、人员流动、能源能耗等关键信息实时呈现在拼接巨屏上,管理者可直观掌握园区运行状态,实现科学决策。这种“万物互联”的能力不仅消除了系统间的壁垒,还大幅提升了管理效率,让园区管理更加精细化、智能化。 更令人兴奋的是,该方案融入了诸多前沿科技,让智慧园区充满了未来感。例如,利用AI视频分析技术,智慧园区实现了对人脸、车辆、行为的智能识别与追踪,不仅极大提升了安防水平,还能为园区提供精准的人流分析、车辆管理等增值服务。同时,无人机巡查、巡逻机器人等智能设备的加入,让园区安全无死角,管理更轻松。特别是巡逻机器人,不仅能进行360度地面全天候巡检,还能自主绕障、充电,甚至具备火灾预警、空气质量检测等环境感知能力,成为了园区管理的得力助手。此外,通过构建高精度数字孪生系统,将园区现实场景与数字世界完美融合,管理者可借助VR/AR技术进行远程巡检、设备维护等操作,仿佛置身于一个虚拟与现实交织的智慧世界。 最值得关注的是,智慧园区综合解决方案还带来了显著的经济与社会效益。通过优化园区管理流程,实现降本增效。例如,智能库存管理、及时响应采购需求等举措,大幅减少了库存积压与浪费;而设备自动化与远程监控则降低了维修与人力成本。同时,借助大数据分析技术,园区可精准把握产业趋势,优化招商策略,提高入驻企业满意度与营收水平。此外,智慧园区的低碳节能设计,通过能源分析与精细化管理,实现了能耗的显著降低,为园区可持续发展奠定了坚实基础。总之,这一综合解决方案不仅让园区管理变得更加智慧、高效,更为入驻企业与员工带来了更加舒适、便捷的工作与生活环境,是未来园区建设的必然趋势。
c语言学习
人脸识别项目源码实战
人脸识别项目实战
内容概要:本文详细介绍了电力电子技术的基础知识及相关器件,内容涵盖电力电子器件(如晶闸管、GTR、IGBT)、相控整流电路(单相和三相)、直流斩波电路、交流变换电路、逆变电路、软开关技术等,并探讨了其应用场景(如开关电源、不间断电源(UPS)、电子镇流器、感应加热、直流电源、开关模焊接等),以及电力电子装置带来的电力公害(谐波污染、电磁干扰和功率因数降低)及其抑制方法。通过丰富的实例讲解了各类电路的工作原理和波形分析方法,旨在让学生和从业人员更好地理解和掌握该领域的核心技术和发展趋势。书中结合最新的研究成果进行了详尽阐述,使内容兼具科学性和创新性,并提供了大量习题以便于教与学。 适合人群:自动化、电气工程及其自动化等相关专业本科生、研究生和技术工程师。 使用场景及目标:①高校教师用于课堂授课,辅助学生深入理解电力电子器件工作原理;②电力电子领域科研人员和工程技术人员参考资料,掌握行业前沿技术和设计理念。 阅读建议:本文不仅讲解了电力电子器件的结构特点、操作流程,更重要的是展示了电力电子技术在整个电力系统和电气设备应用中的关键作用,希望读者能够在学习过程中理论结合实践,加深对知识的理解
c语言学习
万能视频拼接软件源码,可以直接进行修改增加功能,二次开发!
人脸识别项目源码实战
内容概要:本文介绍了FibroScan PRO这款专门用于肝脏纤维化程度评估的医疗器械。强调了其仅能被认证过的专员使用,所得到的数据需要专业医生综合考虑病人的实际身体状况进行精准解释。文中列举了若干组测量示例以及相关单位,例如压力数值(kPa)、声衰减参数(dB/m),还特别指出VCTE探针的正确性和精确度依靠定期校正。此外,详细阐述了病人的姿势调整以及测试部位选取的原则,在不同层厚的情况下对皮肤组织进行检查。并提供了一份详细的检查报告模板,涵盖了操作者的身份确认、受检人基本信息、时间戳以及其他一些量化评价指标,例如IQR(四分位距),这有助于更好地理解和应用FibroScan的检测结果。 适合人群:面向医院、诊所等相关医疗保健机构的工作人员,包括但不限于操作员和技术支持团队成员。同时也可以为想要了解这一先进诊断工具的研究人员或医学学生提供重要参考资料。 使用场景及目标:旨在指导医疗机构如何标准化地完成FibroScan设备的实际临床应用过程;确保所有测量数据均能在符合质量控制的前提下产生,并提高医疗服务的质量和效率;并且帮助医师做出更加科学合理的健康决策,最终服务于病患的利益最大化。
海豚鲸鱼数据集 5435张图 正确识别率可达92.6% 可识别:海豚 虎鲸 蜥蜴 海豹 鲨鱼 龟 支持darknet格式标注