JavaScript 工具库：Cloudgamer JavaScript Library v0.1 发布

研究了一年多的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
 * 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;

})();

非用$$吗,就不能换其他符号吗,两个看起来还有点怪怪的!!!

这个个人喜好而已

写得好极了，包含了大部分普遍需要的公共方法和dom操作，那个迭代部分处理的很漂亮，还有样式单位转化部分，Dean Edwards真能琢磨，厉害。楼主对String扩展不多，我在实际应用中经常需要处理字符串去除两边空格的情况（trim方法），还有就是json对象的编码解码问题，当然了，个人需求不同，做为一个基本扩展库，已经很好了 。