仿百度开源js框架tangram-2.0.0.0 封装的自己常用的方法框架
上个月研究了百度的tangram-2.0.0.0框架，主要研究里面的设计模式和函数写法，模仿着它的写法了，将平时经常用到的一些方法和属性封装了起来。用法和tangram-2.0.0.0用法一样，主要特点是代码容易看得懂，易学易用，纯属学习研究专用。会继续努力学习以便更新新内容的。
View Code
1 /**********************/ 2 /*name thinks.js*/ 3 /*date 2012-10-08*/ 4 /*version v1.0*/ 5 /*author thinksley*/ 6 /*纯手工常用前端功能函数封装，待续*/ 7 /**********************/ 8 var thinks=thinks || {}; 9 $dom=thinks.dom=thinks.dom || {}; 10 $array=thinks.array=thinks.array || {}; 11 $string=thinks.string=thinks.string || {}; 12 $number=thinks.number=thinks.number || {}; 13 $events=thinks.events=thinks.events || {}; 14 $page=thinks.page=thinks.page || {}; 15 $object=thinks.object=thinks.object || {}; 16 $fn=thinks.fn=thinks.fn || {}; 17 //g(element) 抓取元素 18 thinks.g=function(id){ 19 if(!id) return null; 20 if(typeof id == 'string' || id instanceof String){ 21 return document.getElementById(id) 22 }else if(id.nodeName && (id.nodeType==1 || id.nodeType==9)){ 23 return id; 24 } 25 return null; 26 } 27 //q(oParent,sClass) 28 thinks.q=function(oParent,sClass){ 29 var alls=oParent.getElementsByTagName('*'); 30 var res=[]; 31 for(var i=0;i<alls.length;i++){ 32 if(alls[i].className==sClass) 33 res.push(alls[i]); 34 } 35 return res; 36 } 37 //hide(element) 隐藏元素 38 thinks.dom.hide=function(element){ 39 var obj=thinks.g(element); 40 obj.style.display='none'; 41 } 42 //show(elemnt) 显示元素 43 thinks.dom.show=function(element){ 44 var obj=thinks.g(element); 45 obj.style.display='block'; 46 } 47 //addClass(elemnt,className) 添加样式名 48 thinks.dom.addClass=function(element,className){ 49 var element=thinks.g(element); 50 var classArray=className.split(','); 51 result=classArray; 52 element.className=result; 53 return element; 54 } 55 //thinks.toogle(element) 显示/隐藏元素 56 thinks.dom.toogle=function(element){ 57 var element=thinks.g(element); 58 element.style.display = element.style.display=='none' ? '' :'none'; 59 return element; 60 } 61 //thinks.remove 62 thinks.dom.remove=function(element){ 63 var element=thinks.g(element); 64 tmpEl=element.parentNode; 65 tmpEl && tmpEl.removeChild(element); 66 } 67 //thinks.dom.width(element) 获取元素宽度 68 thinks.dom.width=function(element){ 69 var element=thinks.g(element); 70 return element.offsetWidth; 71 } 72 //thinks.dom.height(element) 获取元素宽度 73 thinks.dom.height=function(element){ 74 var element=thinks.g(element); 75 return element.offsetHeight; 76 } 77 //getParent(element) 父亲层 78 thinks.dom.getParent=function(element){ 79 element=thinks.g(element); 80 return element.parentElement || element.parentNode || null; //兼容 81 } 82 //thinks.dom.getStyle(element,attr) 获取样式值得 83 thinks.dom.getStyle=function(element,attr){ 84 var element=thinks.g(element); 85 if(element.currentStyle) 86 { 87 return element.currentStyle[attr]; 88 }else 89 { 90 return getComputedStyle(element,false)[attr]; 91 } 92 } 93 //thinks.dom.showTab() 选项卡 94 thinks.dom.showTab=function(menu,card,cur,alls,listStyle){ 95 //待续 96 97 } 98 thinks.dom.bg=function(element,value){ 99 element=thinks.g(element); 100 element.style.background=value; 101 } 102 //thinks.dom.css() 103 thinks.dom.css=function(obj,attr,value){ 104 if(arguments.length==2){ 105 return parseFloat(obj.currentStyle ? obj.currentStyle[attr] : document.defaultView.getComputedStyle(obj,false)[attr]); 106 }else if(arguments.length==3){ 107 switch(attr) 108 { 109 case 'width': 110 case 'height': 111 case 'paddingLeft': 112 case 'paddingRight': 113 case 'paddingTop': 114 case 'paddingBottom': 115 value=Math.max(value,0); 116 case 'left': 117 case 'top': 118 case 'marginLeft': 119 case 'marginTop': 120 case 'marginRight': 121 case 'marginBottom': 122 obj.style[attr]=value+'px'; 123 break; 124 case 'opacity': 125 obj.style.filter='alpha(opacity'+value*100+')'; 126 obj.style.opacity=value; 127 break; 128 default: 129 obj.style[attr]=value; 130 } 131 } 132 return function(attr_in,value_in){css(obj,attr_in,value_in)}; 133 } 134 //thinks.array.empty(source)清空数组 135 thinks.array.empty=function(source){ 136 source.length=0; 137 } 138 //thinks.array.finds(source,iterator) 139 thinks.array.finds=function(source,iterator){ 140 var i,iteam,len=source.length; 141 if(typeof iterator=='function'){ 142 for(var i=0;i<len;i++){ 143 iteam=source[i]; 144 if(iterator.call(source,iteam,i)){ 145 return iteam; 146 } 147 } 148 } 149 return null; 150 } 151 //hash(keys,values) 哈希 152 thinks.string.hash=function(keys,values){ 153 var o={},l=keys.length,vl=values && values.length; 154 for(var i=0;i<l;i++){ 155 o[keys[i]]=(vl && vl>i) ? values[i] : true; 156 } 157 return o; 158 } 159 //thinks.trime(str) 去除左右空格 160 thinks.string.trim=function(str){ 161 return str.replace(/^\s+ | \s+$/g,''); 162 } 163 //thinks.string.randNum(mins,maxs) 生成随机数 164 thinks.string.randNum=function(mins,maxs){ 165 return Math.floor(Math.random()*(maxs-mins+1)+mins); 166 } 167 //thinks.number.numberFormat() 3个隔开阿拉伯数字 零宽度正预测先行断言(?=表达式)表示前面的位置 168 thinks.number.numberFormat=function(val){ 169 var numArr=String(val).split('.'); 170 numArr[0]=numArr[0].replace(/(\d)(?=(\d{3})+$)/ig,'$1,'); 171 return numArr.join('.'); 172 } 173 //thinks.number.pad(source,length) 前面置多少个零 174 thinks.number.pad=function(source,length){ 175 var pre='', 176 negative=(source<0), 177 string=String(Math.abs(source)); 178 if(string.length<length){ 179 pre=(new Array(length-string.length+1)).join('0'); 180 } 181 return (negative ? '-' : '') + pre + string; 182 183 } 184 //thinks.events.on(obj,type,fn)事件绑定 185 thinks.events.on=function(obj,type,fn){ 186 return obj.attachEvent ? obj.attachEvent('on'+type,fn) : obj.addEventListener(type,fn,false); 187 } 188 //thinks.events.getPageX(e)鼠标x位置 189 /*thinks.events.getPageX=function(ev){ //该函数可用的 by thinksley 190 var oEven=ev || window.event; 191 return oEven.clientX; 192 }*/ 193 thinks.events.getPageX=function(event){ 194 var result=event.pageX,doc=document; 195 if(!result || result!==0){ 196 result=(event.clientX || 0) + (doc.documentElement.scrollLeft || doc.body.scrollLeft) 197 } 198 return result; 199 } 200 //thinks.events.getPageY(e)鼠标y位置 201 thinks.events.getPageY=function(event){ 202 var result=event.pageY,doc=document; 203 if(!result || result!==0){ 204 result=(event.clientY || 0) + (doc.documentElement.scrollTop || doc.body.scrollTop) 205 } 206 return result; 207 } 208 //thinks.events.getKeyCode(e) 键盘监听 209 thinks.events.getKeyCode=function(event){ 210 return event.which || event.keyCode; 211 } 212 //thinks.page.loadCss(path) 加载css文件 213 thinks.page.loadCss=function(path){ 214 var element=document.createElement('link'); 215 element.href=path; 216 element.rel='stylesheet'; 217 element.type='text/css'; 218 document.getElementsByTagName('head')[0].appendChild(element); 219 } 220 //thinks.page.loadJs(path) 加载js文件 221 thinks.page.loadJs=function(path){ 222 var element=document.createElement('script'); 223 element.type='text/javascript'; 224 element.src=path; 225 document.getElementsByTagName('head')[0].appendChild(element); 226 } 227 //thinks.page.getScrollTop() 获取竖直方向的滚动值 228 thinks.page.getScrollTop=function(){ 229 var doc=document; 230 return window.pageYOffset || doc.documentElement.scrollTop || doc.body.scrollTop; 231 } 232 //thinks.page.getScroll() 获取水平方向的滚动值 233 thinks.page.getScrollLeft=function(){ 234 var doc=document; 235 return window.pageXOffset || doc.documentElement.scrollLeft || doc.body.scrollLeft; 236 } 237 //thinks.page.getMousePosition 获取鼠标坐标 238 /*(function(){ 239 thinks.page.getMousePosition = function(){ 240 return { 241 x : thinks.page.getScrollLeft() + xy.x, 242 y : thinks.page.getScrollTop() + xy.y 243 }; 244 }; 245 var xy = {x:0, y:0}; 246 // 监听当前网页的 mousemove 事件以获得鼠标的实时坐标 247 thinks.event.on(document, "onmousemove", function(e){ 248 e = window.event || e; 249 xy.x = e.clientX; 250 xy.y = e.clientY; 251 }); 252 })();*/ 253 //thinks.page.viewWidth 获取整个body可见区域宽度 254 thinks.page.viewWidth=function(){ 255 var doc=document; 256 client=doc.compatMode=='backCompat' ? doc.body : doc.documentElement; 257 return client.clientWidth; 258 } 259 //thinks.page.viewHeight 获取整个body可见区域高度 260 thinks.page.viewHeight=function(){ 261 var doc=document; 262 client=doc.compatMode=='backCompat' ? doc.body : doc.documentElement; 263 return client.clientHeight; 264 } 265 //运动 待续 266 thinks.fn.startMove=function(){ 267 268 } 269 //=thinks.object.extend(element,source) 270 thinks.object.extend=function(target,source){ 271 for(p in source){ 272 if(source.hasOwnProperty[p]){ 273 target[p]=source[p]; 274 } 275 } 276 return target; 277 } 278 //调用实例 279 280 var input=thinks.g('input'); //获取元素 281 282 thinks.dom.bg('input','#000'); //进行操作 283 284 thinks.dom.css(input,'border','#f00 1px solid');//进行操作 285 286
