首页 > 建站教程 > JS、jQ、TS >  CJL.0.1.min.js一个小巧的JS工具库正文

CJL.0.1.min.js一个小巧的JS工具库

研究了一年多的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完整版本
Cloudgamer JavaScript Library v0.1压缩版本