好久沒來更新了，最近工作換的頻繁，依舊浮躁啊！這年頭安心搞搞技術也不容易。

現在公司比較閑整理了以前的代碼公共方法庫和彈出層。

先把整理后的公共方法庫放上來（以備忘），結構非常簡單甚至簡陋，功能上面幾乎沒太大的變化，主要是使用方法比以前簡單，搞得跟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.5var 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;}elsereturn [];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)//iereturn styleName?elem.currentStyle[styleName]:elem.currentStyle;else{ //webkitvar 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) {//獲取頁面上節點實際位置topvar doc = node ? node.ownerDocument : document;return doc.documentElement.scrollTop || doc.body.scrollTop;},getScrollLeft:function(node) {//獲取頁面上節點實際位置leftvar 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);

轉載于:https://www.cnblogs.com/foot3188/archive/2011/04/18/2020062.html

總結

以上是生活随笔為你收集整理的微型类库g的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。