仿百度开源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