ife2015-task2-javascript-util.js

util.js
/**
 * Created by Administrator on 2016/12/14.
 */
//判斷是否爲數組
function isArray(arr){
 return (arr instanceof Array);
}

//判斷是否爲函數
function isFunction(fn){
 return (typeof(fn));
}

//深度克隆
function cloneObject(src){
 var result,
 //判斷src的類型
 oClass=isClass(src);
 if(oClass==="Object"){
 result={};
 }
 else if(oClass==="Array"){
 result= [];
 }
 else{
 return src;
 }
 for(var key in src){
 var copy=src[key];
 if(isClass(copy)==="Object"){
 //遞歸調用
 result[key]=arguments.callee(copy);
 }
 else if(isClass(copy)==="Array"){
 result[key]=arguments.callee(copy);
 }
 else{
 result[key]=copy;
 }
 }
 return result;
}
//返回cla的類 ：object 或array 或 基本類型
function isClass(cla){
 if(cla===null){
 return null;
 }
 else if(cla===undefined){
 return undefined;
 }
 else{
 return Object.prototype.toString.call(cla).slice(8,-1);
 }
}

//數組去重
function uniqArray(arr){
 //去重數組變量temp
 var temp=[];
 //每一個數組值都與以前的數組值做比較，是否重複
 for(var i=0,l=arr.length;i<l;i++){
 var j=0;
 while(arr[i]!=arr[j]){
 if(j<i){
 j++;
 }
 }
 //不重複，將值push進 去重數組
 if(j==i){
 temp.push(arr[j]);
 }
 }
 return temp;
}

//去除字符串頭尾的空格、tab、全角半角空格
function trim(str){
 var regex=/^\s*/;
 var regex2=/\s*$/;
 return str.replace(regex,'').replace(regex2,'');
}

// 實現一個遍歷數組的方法，針對數組中每個元素執行fn函數，並將數組索引和元素做爲參數傳遞
function each(arr, fn) {
 for(var i= 0,l=arr.length;i<l;i++){
 fn(i,arr[i]);
 }
}
function fn(idx,item){
 item=idx+1;
}

// 獲取一個對象裏面第一層元素的數量，返回一個整數
function getObjectLength(obj) {
 var j=0;
 for(var i in obj){
 j++;
 }
 return j;
}

// 判斷是否爲郵箱地址
function isEmail(emailStr) {
 var re=/\w+@\w+.com/;
 return re.test(emailStr);
}

// 判斷是否爲手機號
function isMobilePhone(phone) {
 var re=/\d{11}/;
 return (re.test(phone));
}

//爲element增長一個樣式名爲newClassName的新樣式
function addClass(element,newClassName){
 var oldClassName=element.className;
 element.className=oldClassName+' '+newClassName;
}

//刪除element一個樣式名爲oldClassName的舊樣式
function removeClass(element,oldClassName){
 element.className=element.className.replace(oldClassName,''); return element;}// 判斷siblingNode和element是否爲同一個父元素下的同一級的元素，返回bool值function isSiblingNode(siblingNode,element){ return (siblingNode.parentNode===element.parentNode);}// 獲取element相對於瀏覽器窗口的位置，返回一個對象{x, y}function getPosition(element) { var top=element.offsetTop, left=element.offsetLeft; while(element.offsetParent){ element=element.offsetParent; top+=element.offsetTop; left+=element.offsetLeft; } return {'x':left,'y':top}}// 實現一個簡單的Queryfunction $(selector) { var char=selector.charAt(0), element, idx; switch (char){ //經過id獲取dom元素 case '#': idx=selector.indexOf('.'); if(idx==(-1)){ var idName=selector.slice(1); element=document.getElementById(idName); return element; } //經過id和classname得到dom元素 else{ var className=selector.slice(idx+1) ; idName=selector.slice(1,idx-1);//id和classname之間要用一個宮格隔開 element=document.getElementById(idName); element=element.getElementsByTagName('*'); for(var i= 0,l=element.length;i<l;i++){ className=element[i].className.split(' '); for(var m= 0,n=className.length;m<n;m++){ if(className[m]==className){ return element[i]; } } } } break; //經過classname得到dom元素 case '.': selector=selector.slice(1); element=document.getElementsByTagName('*'); for(var i= 0,l=element.length;i<l;i++){ if(element[i].className) { className = element[i].className.split(' '); for (var m = 0, n = className.length; m < n; m++) { if (className[m] == className) { return element[i]; } } } } break; //經過屬性名和相對應的屬性值得到dom元素 case '[': var attName, value; idx=selector.indexOf('='); element=document.getElementsByTagName('*'); if(idx==(-1)){ attName=selector.slice(1,-1); } else{ attName=selector.slice(1,idx); value=selector.slice(idx+1,-1); } for(var i= 0,l=element.length;i<l;i++){ if(element[i].hasAttribute(attName)){ if(idx!=(-1)){ if(element[i].getAttribute(attName)==value){ return element[i]; } return false; } return element[i]; } } break; //默認經過標籤名得到dom元素 default : return document.getElementsByTagName(selector); }}// 使用事件冒泡Bubble給一個element綁定一個針對event事件的響應，響應函數爲listenerfunction addEvent(element,event,listener){ if(addEventListener){ element.addEventListener(event,listener,false); } else if(attachEvent){ element.attachEvent(event,listener); } else{ element['on'+event]=listener; }}// 移除element對象對於event事件發生時執行listener的響應function removeEvent(element, event, listener) { if(removeEventListener){ element.removeEventListener(event,listener,false); } else if(detachEvent){ element.detachEvent(event,listener); } else{ element['on'+event]=null; }}// 實現對click事件的綁定function addClickEvent(element, listener) { addEvent(element,'click',listener);}// 實現對於按Enter鍵時的事件綁定function addEnterEvent(element, listener) { addEvent(element,'keyup', function (e) { e=e||window.event; if(e.keyCode==13){ listener; } });}//用事件冒泡給一個element綁定一個針對eventName事件的響應，響應函數爲listenerfunction delegateEvent(element, tag, eventName, listener) { addEvent(element,eventName, function (e) { e=e||window.event; var target= e.srcElement?e.srcElement: e.target; orginX= target.style.left; orginY= target.style.top; if(target.nodeName===tag.toUpperCase()){ listener(target,e,orginX,orginY); } });}// 使用事件捕獲Capture給一個element綁定一個針對event事件的響應，響應函數爲listener 爲focus而生function addEventCaptureFocus(element,event,listener){ if(addEventListener){ element.addEventListener(event,listener,true); } else{ element.addEventListener(event+'in',listener,false); }}// 使用事件捕獲Capture給一個element綁定一個針對event事件的響應，響應函數爲listener 爲blur而生function addEventCaptureBlur(element,event,listener){ if(addEventListener){ element.addEventListener(event,listener,true); } else{ element.addEventListener(event+'out',listener,false); }}//focus、blur、load、unload不支持事件冒泡//使用事件捕獲Capture給一個element綁定一個針對eventName事件的響應，響應函數爲listenerfunction delegateEvent2(element, tag, eventName, listener) { addEventCaptureFocus(element,eventName,function (e) { e=e||window.event; var target= e.srcElement?e.srcElement: e.target; if(target.nodeName===tag.toUpperCase()){ console.log(target.value); listener(); } });}//使用事件捕獲Capture給一個element綁定一個針對eventName事件的響應，響應函數爲listenerfunction delegateEvent3(element, tag, eventName, listener) { addEventCaptureBlur(element,eventName,function (e) { e=e||window.event; var target= e.srcElement?e.srcElement: e.target; if(target.nodeName===tag.toUpperCase()){ listener(); } });}//將addEvent,removeEvent,addClickEvent,addEnterEvent變成$對象的一些方法$.on=addEvent;$.un=removeEvent;$.click=addClickEvent;$.enter=addEnterEvent;$.delegat=delegateEvent;// 判斷是否爲IE瀏覽器，返回-1或者版本號function isIE() { return document.documentMode||false;}// 設置cookiefunction setCookie(cookieName, cookieValue, expiredays) { var cookieText=encodeURIComponent(cookieName)+'='+encodeURIComponent(cookieValue); var exDate=new Date(); exDate.setDate(exDate.getDate()+expiredays); cookieText+=';expires='+exDate.toUTCString(); document.cookie=cookieText;}// 獲取cookie值function getCookie(cookieName) { cookieName=encodeURIComponent(cookieName); var start=document.cookie.indexOf(cookieName), cookieValue=null; if(start!=-1){ var end=document.cookie.indexOf(';'); if(end==-1){ end=document.cookie.length; } cookieValue=encodeURIComponent(document.cookie.substring(start+1+cookieName.length,end)); } return cookieValue;}//封裝一個Ajax方法function ajax(url, options) { // your implementvar xhr=createXHR(); var type, data, successFn, failFn; if(typeof (options)=='object'){ type=options.type.toUpperCase(); data=options.data||null; successFn=options.successFn||'undefined'; failFn=options.onfail||'undefined'; } if(typeof (data)=='object'){ var str=''; for(var key in data){ str+=key+'='+data[key]+'&'; } data=str.replace(/&$/,''); str=null; } xhr.onreadystatechange= function () { if(xhr.readyState==4){ if(xhr.status>=200&&xhr.status<300||xhr.status==304){ successFn(xhr.responseText); } else{ if(failFn){ failFn(xhr.status); } else{ console.error('Unsuccessful:\t'+xhr.status); } } } }; switch (type){ case 'GET': xhr.open('GET',url+'?'+data,true); xhr.send(); break; case 'POST': xhr.open('POST',url,true); break; }}function createXHR(){ var xhr; if(window.XMLHttpRequest){ xhr=new XMLHttpRequest(); } else{ xhr=new ActiveXObject('Microsoft.XMLHTTP'); } return xhr;}//ajax('test.php',{type:'GET',successFn:function(){console.log("i am success");}});