微型类库g
好久没来更新了，最近工作换的频繁，依旧浮躁啊！这年头安心搞搞技术也不容易。
现在公司比较闲整理了以前的代码公共方法库和弹出层。
先把整理后的公共方法库放上来（以备忘），结构非常简单甚至简陋，功能上面几乎没太大的变化，主要是使用方法比以前简单，搞得跟jquery的api差不多，支持简单的链式操作。把所有方法和属性都挂在g这个对象上了，至于为什么取名为g，一则因为命名短而不又想用$，二则取原来的getEl方法的首字母。
ps：发现金蝶的公用库也是用getEl作选择器函数名（哎，错过金蝶的面试有点痛心）。
废话就这么多，下面是代码，相信这么易懂的函数库不需要api文档那么复杂吧！况且里面还是有些简短的注释。如确实有不明白可以跟帖提问
使用方法：
g('#test').children().each(function(){
alert(this.nodeName);
});
g.xhr('loadUrl','abc.txt',function(data){
var json = eval('('+data+')'),str='',nl;
nl = json.nodeList;
for(var i=0,len=nl.length;i<len;i++){
str += '<p><strong>'+i+'.'+nl[i].p+'</strong></p>';
}
g('#result').html(str);
});
//g()选择器返回包装后的对象，目前仍然只支持id/css/tagName，children()暂不接受参数返回包装后的对象，并改变当前对象的dom元素，
//each函数可以用来循环输出选择后的dom元素列表或者是数组对象
//xhr创建ajax对象，第一个参数可以loadUrl为get方法，或者是postData使用post方式，第二个参数为url，第三个为回调方法，第四个参数为post的数据。
g.js原代码：
/*
author:hot
createDate:2010-10-11
update:2011-8-30
JavaScript simple library
*/
(function(window,undefined){
var g=function(selecter){//简易类库
if(!(this instanceof g))
return new g(selecter);
if(selecter instanceof g)
return selecter;
this.dom=selecter?this.init(selecter):[];//原生dom元素
this.length=this.dom.length;
return this;
};
g.info={
create:"2010-10-11",
modify:"2011-08-30",
version:"1.0.1"
};
g.prototype={
init:function(selecter){//简易选择器,可以选择id,css,tag标签
switch(typeof selecter){
case 'string':
if(/^#([\w-]+)$/.test(selecter))//匹配id选择器
return [document.getElementById(selecter.replace('#',''))];
else if(/^\.([\w-]+)$/.test(selecter)){//匹配css选择器，返回数组集合
if(document.getElementsByClassName)
return document.getElementsByClassName(selecter.replace('.',''));
else{//以下兼容ie5.5
var allEl=document.all?document.all:document.documentElement.getElementsByTagName("*"),result=[];
for(var i=0,len=allEl.length;i-1)
result.push(allEl[i]);
}
return result;
}
}else if(/^([\w-]+)$/.test(selecter)){//匹配标签选择器
var els = document.getElementsByTagName(selecter).length==0?[]:document.getElementsByTagName(selecter);
return els;
}else
return [];
case 'object'://对象直接返回
return selecter.length?selecter:[selecter];
default:return [];
}
},
each:function(fun){//循环
if(!g.isFunction(fun))return ;
if(this.dom.length){
for(var i=0,len=this.dom.length;i0;
},
addEvent:function(type,fn){ //绑定事件
this.each(function(){
g.event().add(this,type,fn);
});
},
removeEvent:function(type,fn){//移除绑定
this.each(function(){
g.event().remove(this,type,fn);
});
},
hover:function(fnOver, fnOut){//鼠标滑过函数
if(!g.isFunction(fnOver)||!g.isFunction(fnOut))return ;
this.addEvent('mouseover',fnOver);
this.addEvent('mouseout',fnOut);
},
position:function(){//dom节点的绝对位置
if(this.dom[0]&&this.dom[0].nodeType == 1){
var left = 0, top = 0, right = 0, bottom = 0;
//ie8的getBoundingClientRect获取不准确
if ( !this.dom[0].getBoundingClientRect || g.browser.ie8 ) {
var n = this.dom[0];
while (n) { left += n.offsetLeft, top += n.offsetTop; n = n.offsetParent; };
right = left + n.offsetWidth; bottom = top + n.offsetHeight;
} else {
var rect = this.dom[0].getBoundingClientRect();
left = right = g.getScrollLeft(this.dom[0]); top = bottom = g.getScrollTop(this.dom[0]);
left += rect.left; right += rect.right;
top += rect.top; bottom += rect.bottom;
};
return { "left": left, "top": top, "right": right, "bottom": bottom };
}
},
css:function(){//设置当前样式属性
var str0=arguments[0],str1=arguments[1];
if(arguments.length==1&&g.isString(str0)){
return g.style(this.dom[0],str0);
}else if(arguments.length==1&&typeof(str0)=='object'){
for(var name in str0){
g.style(this.dom[0],name,str0[name]);
}
}else if(arguments.length==2&&g.isString(str0)&&g.isString(str1)){
g.style(this.dom[0],str0,str1);
}
return this;
},
size:function() {//获取元素的宽高，包括隐藏元素的
var dom=this.dom[0];
var width = dom.offsetWidth, height = dom.offsetHeight;
if ( !width && !height ) {
var clone=dom.cloneNode(false);
dom.parentNode.appendChild(clone);
var style = clone.style;
var cssShow ="position:absolute;visibility:hidden;display:block;left:-9999px;top:-9999px;";
//var cssBack ="position:"+style.position+";visibility:"+style.visibility+";display:"+style.display+";left:"+style.left+";top:"+style.top;
clone.style.cssText=cssShow;
width = clone.offsetWidth; height = clone.offsetHeight;
dom.parentNode.removeChild(clone);
}
return { "width": width, "height": height };
},
remove:function(elem){//移除内部的元素，也可以是自己本身
var self=this;
if(!elem){
self.each(function(){
this.parentNode.removeChild(this);
});
this.dom = [];
return this;
}
if(g(elem).dom.length){
self.each(function(){
var me = this;
g(elem).each(function(){
if(g(me).has(this))
this.parentNode.removeChild(this);
});
});
}
return this;
}
};
g.prototype.extend = g.extend = function() {
var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options, name, src, copy;
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[1] || {};
i = 2;
}
if ( typeof target !== "object" && !g.isFunction(target) ) {
target = {};
}
if ( length === i ) {
target = this;
--i;
}
for ( ; i < length; i++ ) {
if ( (options = arguments[i]) != null ) {
for ( name in options ) {
src = target[name];
copy = options[name];
if ( target === copy ) {
continue;
}
if ( deep && copy && g.isArray(copy) ) {
var clone = src && ( g.isArray(src) )?src:g.isArray(copy) ? [] : {};
target[ name ] = g.extend( deep, clone, copy );
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
}
return target;
};
g.extend({
style:function(el,name,value){
var set=value!==undefined;
if(name=='width'||name=='height'&&parseFloat(value)<0)value=undefined;
if(name=='opacity'&&g.browser.msie){
if(set){
el.style.zoom=1;
var opacity = parseInt( value, 10 ) + "" === "NaN" ? "" : "alpha(opacity=" + value * 100 + ")";
el.style.filter = opacity;
}
return el.style.filter&&el.style.filter.indexOf("opacity=") >= 0 ?
(parseFloat( /opacity=([^)]*)/.exec(el.style.filter)[1] ) / 100) + "":
"";
}
if(set){
el.style[name]=value;
}else{
return getStyle(el,name);
}
function getStyle(elem,styleName){//获取当前样式属性
if(elem.currentStyle)//ie
return styleName?elem.currentStyle[styleName]:elem.currentStyle;
else{ //webkit
var arr=elem.ownerDocument.defaultView.getComputedStyle(elem, null);
return styleName?arr[styleName]:arr;
}
}
},
stopEvent:function(e){//阻止触发默认事件
e = e || window.event;
if(e.preventDefault) {
e.preventDefault();
e.stopPropagation();
}else{
e.returnValue = false;
e.cancelBubble = true;
}
},
getScrollTop:function(node) {//获取页面上节点实际位置top
var doc = node ? node.ownerDocument : document;
return doc.documentElement.scrollTop || doc.body.scrollTop;
},
getScrollLeft:function(node) {//获取页面上节点实际位置left
var doc = node ? node.ownerDocument : document;
return doc.documentElement.scrollLeft || doc.body.scrollLeft;
},
cancelBubble:function(e){//阻止事件冒泡
e = e || window.event;
e.stopPropagation?e.stopPropagation():e.cancelBubble = true;
},
stopSelect:function(){//阻止浏览器默认选取
window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
},
event:function(){//原生事件兼容处理
var add,remove,guid = 1,base={};
add = function( element, type, handler ) {
if ( type === 'DOMContentLoaded' || type === 'ready' ) {
g.ready( handler );
return;
}
if ( element.addEventListener ) {
element.addEventListener( type, handler, false );
} else {
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;
}
};
remove = function( element, type, handler ) {
if ( element.removeEventListener ) {
element.removeEventListener(type, handler, false);
} else {
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 = ((this.ownerDocument || this.document || this).parentWindow || window).event;
(function( calc ) {
event.pageX = event.clientX + calc('Left');
event.pageY = event.clientY + calc('Top');
})(function( side ) {
return ( base['scroll' + side] || 0) - (base['client' + side] || 0 );
});
event.target = event.srcElement;
switch ( event.type ) {
case 'mouseout':
event.relatedTarget = event.toElement;
case 'mouseover':
event.relatedTarget = event.fromElement;
};
return event;
};
return {
'add': add,
'remove': remove,
'fixEvent': fixEvent
};
},
forEach:function(arr,fun){
if(!g.isFunction(fun))return ;
if(g.isArray(arr)){
for(var i=0,len=arr.length;i)[^\t]*)'/g, "$1\r")
.replace(/\t=(.*?)%>/g, "',$1,'")
.split("\t").join("');")
.split("%>").join("p.push('")
.split("\r").join("\\'")
+ "');}return p.join('');");
return data ? fn( data ) : fn;
};
})();
try{
document.execCommand("BackgroundImageCache", false, true);
}catch(e){}
window.getEl = window.g = g;
})(window);
