JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布 |
主要集合了我写js时一些常用的方法,并参考了prototype.js,jquery,google,百度,有啊等框架 。 工具库已经在近几个效果中使用: 【跨浏览器】 【使用命名空间】 【使用匿名函数】 【使用对象检测】
【小体积】 【高效率】
【整合常用方法】 【解决兼容问题】
【Object】 命名空间是:$$ $$本身就是最常用的方法:document.getElementById
命名空间是:$$B 通过userAgent获取浏览器信息,主要获取浏览器的类型和版本 。 先通过判断特有字符来判断浏览器类型: 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 = i; } } if (b.safari) { vMark = "version"; } b.version = RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0";
命名空间是:$$A 里面包括以下方法: 以上方法除了isArray,都是JavaScript 1.6里数组增加的方法,具体可以去mozilla查看 。 不止数组能使用这些方法,只要对象能像数组那样历遍就能使用,例如NodeList对象,arguments对象 。
命名空间是:$$F 里面现在只有两个方法:bind和bindAsEventListener 。 bindAsEventListener跟bind不同的是会把第一个参数设定为event对象,专门用在事件回调函数中 。
命名空间是:$$D 这部分是工具库中最大,最复杂也最重要的部分 。 其中getScrollTop和getScrollLeft分别是获取文档滚动的scrollTop和scrollLeft 。 var doc = node ? node.ownerDocument : document;
return doc.documentElement.scrollTop || doc.body.scrollTop;
body{height:300px;overflow:scroll;width:500px;}
contains方法是判断参数1元素对象是否包含了参数2元素对象 。 有两个元素坐标相关的方法:rect和clientRect 。 还有三个样式相关的方法:curStyle、getStyle、setStyle getStyle是用来获取元素指定样式属性的最终样式值的 。 首先是处理透明度,ie虽然用的是滤镜但它的值除以100就跟w3c的"opacity"的值一样了: if (/alpha\(opacity=(.*)\)/i.test(style.filter)) {
var opacity = parseFloat(RegExp.$1); return opacity ? opacity / 100 : 0; } return 1;
获取样式后还有一个工作是转换单位 。当判断得到的值是一个数值而单位又不是px的话,就会进行转换 。 runtimeStyle是ie特有的属性,用法跟style差不多,但它有着最高的优先级 。 知道这两个东西后,就能理解它的原理了: 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;
最后还有一个setStyle用来设置样式,主要用来批量设置样式和解决一些兼容问题 。 if (!elems.length) { elems = [ elems ]; }
if (typeof style == "string") { var s = style; style = {}; style[s] = value; }
剩下的就是解决兼容问题了 。 elem.style.filter = (elem.currentStyle.filter || "").replace( /alpha\([^)]*\)/, "" ) +
"alpha(opacity=" + value * 100 + ")";
至于"float"就比较简单,ie用"styleFloat"其他用"cssFloat"就行了 。
命名空间是:$$E 这个是兼容性的老问题了,这里包含三个方法:addEvent,removeEvent,fixEvent 。 addEvent和removeEvent分别是添加和移除事件,以前我是用ie的attachEvent跟w3c的addEventListener做兼容 。 而fixEvent是用来修正event对象的兼容性的,主要是添加一些w3c的属性和方法,上面bindAsEventListener就用到了它 。
命名空间是:$$S 我比较少做String的高级应用,所以暂时也没什么方法需要放进来 。 return s.replace(/-([a-z])/ig, function(all, letter) { return letter.toUpperCase(); });
最后说说调用方式,跟调用一般函数方法是一样的,只是前面要带上命名空间 。 复制代码 代码如下: /*! * Cloudgamer JavaScript Library v0.1 * Copyright (c) 2009 cloudgamer * Blog: http://cloudgamer.cnblogs.com/ * Date: 2009-10-29 */ 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; }; /*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 = i; } } if (b.safari) { vMark = "version"; } b.version = RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0"; b.ie = b.msie; b.ie6 = b.msie && parseInt(b.version) == 6; b.ie7 = b.msie && parseInt(b.version) == 7; b.ie8 = b.msie && parseInt(b.version) == 8; return b; })(window.navigator.userAgent.toLowerCase()); /*Array*/ A = { isArray: function( obj ) { return Object.prototype.toString.call(obj) === "[object Array]"; }, forEach: function( array, callback, thisp ){ if (array.forEach) { array.forEach(callback, thisp); } else { for ( var i = 0, len = array.length; i < len; i++ ) { callback.call( thisp, array[i], i, array ); } } }, filter: function( array, callback, thisp ){ if (array.filter) { return array.filter(callback, thisp); } else { var res = []; for ( var i = 0, len = array.length; i < len; i++ ) { callback.call( thisp, array[i], i, array ) && res.push(array[i]); }; return res; } }, every: function( array, callback, thisp ){ if (array.every) { return array.every(callback, thisp); } else { for ( var i = 0, len = array.length; i < len; i++ ) { if ( !callback.call( thisp, array[i], i, array ) ) return false; }; return true; } }, some: function( array, callback, thisp ){ if (array.some) { return array.some(callback, thisp); } else { for ( var i = 0, len = array.length; i < len; i++ ) { if ( callback.call( thisp, array[i], i, array ) ) return true; }; return false; } }, map: function( array, callback, thisp ){ if (array.map) { return array.map(callback, thisp); } else { var res = []; for ( var i = 0, len = array.length; i < len; i++ ) { res.push( callback.call( thisp, array[i], i, array ) ); }; return res; } }, indexOf: function( array, elt ){ if (array.indexOf) { return array.indexOf(elt); } else { for ( var i = 0, len = array.length; i < len; i++ ) { if ( array[i] === elt ) return i; }; return -1; } }, lastIndexOf: function( array, elt, from ){ if (array.lastIndexOf) { return array.lastIndexOf(elt); } else { var len = array.length; if ( isNaN(from) || from >= len - 1 ) { from = len - 1; } else { from = from < 0 ? Math.ceil(from) + len : Math.floor(from); } for ( ; from > -1; from-- ) { if ( array[i] === elt ) return i; }; return -1; } } }; /*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: function(a, b){ return (this.contains = a.compareDocumentPosition ? function(a, b){ return !!(a.compareDocumentPosition(b) & 16); } : function(a, b){ return a != b && a.contains(b); } )(a, 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 = this.getScrollLeft(node); top = bottom = this.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 = this.rect(node), sLeft = this.getScrollLeft(node), sTop = this.getScrollTop(node); rect.left -= sLeft; rect.right -= sLeft; rect.top -= sTop; rect.bottom -= sTop; return rect; }, curStyle: function(elem){ return (this.curStyle = document.defaultView ? function(elem){ return document.defaultView.getComputedStyle(elem, null); } : function(elem){ return elem.currentStyle; } )(elem); }, getStyle: function(elem, name){ return (this.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; } )(elem, name); }, 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.pageY = event.clientY + D.getScrollTop(); event.target = event.srcElement; event.stopPropagation = stopPropagation; event.preventDefault = preventDefault; if(event.type == "mouseout") { event.relatedTarget = event.toElement; }else if(event.type == "mouseover") { event.relatedTarget = event.fromElement; } 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) {} }; /**/ $$ = O; $$B = B; $$A = A; $$F = F; $$D = D; $$E = E; $$S = S; })(); 打包下载 |