常用的前端 JavaScript 方法封裝（下）
26、封裝自己的filter方法
Array.prototype.myFilter?=?function?(func,?obj)?{
????var?len?=?this.length;
????var?arr?=?[];
????var?_this?=?arguments[1]?||?window;
????for?(var?i?=?0;?i?????????func.call(_this,?this[i],?i,?this)?&&?arr.push(this[i]);
????}
????return?arr;
}
27、數(shù)組map方法
Array.prototype.myMap?=?function?(func)?{
????var?arr?=?[];
????var?len?=?this.length;
????var?_this?=?arguments[1]?||?window;
????for?(var?i?=?0;?i?????????arr.push(func.call(_this,?this[i],?i,?this));
????}
????return?arr;
}
28、數(shù)組every方法
Array.prototype.myEvery?=?function?(func)?{
????var?flag?=?true;
????var?len?=?this.length;
????var?_this?=?arguments[1]?||?window;
????for?(var?i?=?0;?i?????????if?(func.apply(_this,?[this[i],?i,?this])?==?false)?{
????????????flag?=?false;
????????????break;
????????}
????}
????return?flag;
}
29、數(shù)組reduce方法
Array.prototype.myReduce?=?function?(func,?initialValue)?{
????var?len?=?this.length,
????????nextValue,
????????i;
????if?(!initialValue)?{
????????//?沒(méi)有傳第二個(gè)參數(shù)
????????nextValue?=?this[0];
????????i?=?1;
????}?else?{
????????//?傳了第二個(gè)參數(shù)
????????nextValue?=?initialValue;
????????i?=?0;
????}
????for?(;?i?????????nextValue?=?func(nextValue,?this[i],?i,?this);
????}
????return?nextValue;
}
30、獲取url中的參數(shù)
function?getWindonHref()?{
????var?sHref?=?window.location.href;
????var?args?=?sHref.split('?');
????if?(args[0]?===?sHref)?{
????????return?'';
????}
????var?hrefarr?=?args[1].split('#')[0].split('&');
????var?obj?=?{};
????for?(var?i?=?0;?i?????????hrefarr[i]?=?hrefarr[i].split('=');
????????obj[hrefarr[i][0]]?=?hrefarr[i][1];
????}
????return?obj;
}
31、數(shù)組排序
//?快排?[left]?+?min?+?[right]
function?quickArr(arr)?{
????if?(arr.length?<=?1)?{
????????return?arr;
????}
????var?left?=?[],
????????right?=?[];
????var?pIndex?=?Math.floor(arr.length?/?2);
????var?p?=?arr.splice(pIndex,?1)[0];
????for?(var?i?=?0;?i?????????if?(arr[i]?<=?p)?{
????????????left.push(arr[i]);
????????}?else?{
????????????right.push(arr[i]);
????????}
????}
????//?遞歸
????return?quickArr(left).concat([p],?quickArr(right));
}
//?冒泡
function?bubbleSort(arr)?{
????for?(var?i?=?0;?i?????????for?(var?j?=?i?+?1;?j?????????????if?(arr[i]?>?arr[j])?{
????????????????var?temp?=?arr[i];
????????????????arr[i]?=?arr[j];
????????????????arr[j]?=?temp;
????????????}
????????}
????}
????return?arr;
}
function?bubbleSort(arr)?{
????var?len?=?arr.length;
????for?(var?i?=?0;?i?????????for?(var?j?=?0;?j?????????????if?(arr[j]?>?arr[j?+?1])?{
????????????????var?temp?=?arr[j];
????????????????arr[j]?=?arr[j?+?1];
????????????????arr[j?+?1]?=?temp;
????????????}
????????}
????}
????return?arr;
}
32、遍歷Dom樹(shù)
//?給定頁(yè)面上的DOM元素,將訪問(wèn)元素本身及其所有后代(不僅僅是它的直接子元素)
//?對(duì)于每個(gè)訪問(wèn)的元素，函數(shù)講元素傳遞給提供的回調(diào)函數(shù)
function?traverse(element,?callback)?{
????callback(element);
????var?list?=?element.children;
????for?(var?i?=?0;?i?????????traverse(list[i],?callback);
????}
}
33、原生js封裝ajax
function?ajax(method,?url,?callback,?data,?flag)?{
????var?xhr;
????flag?=?flag?||?true;
????method?=?method.toUpperCase();
????if?(window.XMLHttpRequest)?{
????????xhr?=?new?XMLHttpRequest();
????}?else?{
????????xhr?=?new?ActiveXObject('Microsoft.XMLHttp');
????}
????xhr.onreadystatechange?=?function?()?{
????????if?(xhr.readyState?==?4?&&?xhr.status?==?200)?{
????????????console.log(2)
????????????callback(xhr.responseText);
????????}
????}
????if?(method?==?'GET')?{
????????var?date?=?new?Date(),
????????timer?=?date.getTime();
????????xhr.open('GET',?url?+?'?'?+?data?+?'&timer'?+?timer,?flag);
????????xhr.send()
????????}?else?if?(method?==?'POST')?{
????????xhr.open('POST',?url,?flag);
????????xhr.setRequestHeader('Content-Type',?'application/x-www-form-urlencoded');
????????xhr.send(data);
????}
}
34、異步加載script
function?loadScript(url,?callback)?{
????var?oscript?=?document.createElement('script');
????if?(oscript.readyState)?{?//?ie8及以下版本
????????oscript.onreadystatechange?=?function?()?{
????????????if?(oscript.readyState?===?'complete'?||?oscript.readyState?===?'loaded')?{
????????????????callback();
????????????}
????????}
????}?else?{
????????oscript.onload?=?function?()?{
????????????callback()
????????};
????}
????oscript.src?=?url;
????document.body.appendChild(oscript);
}
35、cookie管理
var?cookie?=?{
????set:?function?(name,?value,?time)?{
????????document.cookie?=?name?+?'='?+?value?+?';?max-age='?+?time;
????????return?this;
????},
????remove:?function?(name)?{
????????return?this.setCookie(name,?'',?-1);
????},
????get:?function?(name,?callback)?{
????????var?allCookieArr?=?document.cookie.split(';?');
????????for?(var?i?=?0;?i?????????????var?itemCookieArr?=?allCookieArr[i].split('=');
????????????if?(itemCookieArr[0]?===?name)?{
????????????????return?itemCookieArr[1]
????????????}
????????}
????????return?undefined;
????}
}
36、實(shí)現(xiàn)bind()方法
Function.prototype.myBind?=?function?(target)?{
????var?target?=?target?||?window;
????var?_args1?=?[].slice.call(arguments,?1);
????var?self?=?this;
????var?temp?=?function?()?{};
????var?F?=?function?()?{
????????var?_args2?=?[].slice.call(arguments,?0);
????????var?parasArr?=?_args1.concat(_args2);
????????return?self.apply(this?instanceof?temp???this?:?target,?parasArr)
????}
????temp.prototype?=?self.prototype;
????F.prototype?=?new?temp();
????return?F;
}
37、實(shí)現(xiàn)call()方法
Function.prototype.myCall?=?function?()?{
????var?ctx?=?arguments[0]?||?window;
????ctx.fn?=?this;
????var?args?=?[];
????for?(var?i?=?1;?i?????????args.push(arguments[i])
????}
????var?result?=?ctx.fn(...args);
????delete?ctx.fn;
????return?result;
}
38、實(shí)現(xiàn)apply()方法
Function.prototype.myApply?=?function?()?{
????var?ctx?=?arguments[0]?||?window;
????ctx.fn?=?this;
????if?(!arguments[1])?{
????????var?result?=?ctx.fn();
????????delete?ctx.fn;
????????return?result;
????}
????var?result?=?ctx.fn(...arguments[1]);
????delete?ctx.fn;
????return?result;
}
39、防抖
function?debounce(handle,?delay)?{
????var?timer?=?null;
????return?function?()?{
????????var?_self?=?this,
????????????_args?=?arguments;
????????clearTimeout(timer);
????????timer?=?setTimeout(function?()?{
????????????handle.apply(_self,?_args)
????????},?delay)
????}
}
40、節(jié)流
function?throttle(handler,?wait)?{
????var?lastTime?=?0;
????return?function?(e)?{
????????var?nowTime?=?new?Date().getTime();
????????if?(nowTime?-?lastTime?>?wait)?{
????????????handler.apply(this,?arguments);
????????????lastTime?=?nowTime;
????????}
????}
}
41、requestAnimFrame兼容性方法
window.requestAnimFrame?=?(function?()?{
????return?window.requestAnimationFrame?||
????????window.webkitRequestAnimationFrame?||
????????window.mozRequestAnimationFrame?||
????????function?(callback)?{
????????????window.setTimeout(callback,?1000?/?60);
????????};
})();
42、cancelAnimFrame兼容性方法
window.cancelAnimFrame?=?(function?()?{
????return?window.cancelAnimationFrame?||
????????window.webkitCancelAnimationFrame?||
????????window.mozCancelAnimationFrame?||
????????function?(id)?{
????????????window.clearTimeout(id);
????????};
})();
43、jsonp底層方法
function?jsonp(url,?callback)?{
????var?oscript?=?document.createElement('script');
????if?(oscript.readyState)?{?//?ie8及以下版本
????????oscript.onreadystatechange?=?function?()?{
????????????if?(oscript.readyState?===?'complete'?||?oscript.readyState?===?'loaded')?{
????????????????callback();
????????????}
????????}
????}?else?{
????????oscript.onload?=?function?()?{
????????????callback()
????????};
????}
????oscript.src?=?url;
????document.body.appendChild(oscript);
}
44、獲取url上的參數(shù)
function?getUrlParam(sUrl,?sKey)?{
????var?result?=?{};
????sUrl.replace(/(\w+)=(\w+)(?=[&|#])/g,?function?(ele,?key,?val)?{
????????if?(!result[key])?{
????????????result[key]?=?val;
????????}?else?{
????????????var?temp?=?result[key];
????????????result[key]?=?[].concat(temp,?val);
????????}
????})
????if?(!sKey)?{
????????return?result;
????}?else?{
????????return?result[sKey]?||?'';
????}
}
45、格式化時(shí)間
function?formatDate(t,?str)?{
????var?obj?=?{
????????yyyy:?t.getFullYear(),
????????yy:?(""?+?t.getFullYear()).slice(-2),
????????M:?t.getMonth()?+?1,
????????MM:?("0"?+?(t.getMonth()?+?1)).slice(-2),
????????d:?t.getDate(),
????????dd:?("0"?+?t.getDate()).slice(-2),
????????H:?t.getHours(),
????????HH:?("0"?+?t.getHours()).slice(-2),
????????h:?t.getHours()?%?12,
????????hh:?("0"?+?t.getHours()?%?12).slice(-2),
????????m:?t.getMinutes(),
????????mm:?("0"?+?t.getMinutes()).slice(-2),
????????s:?t.getSeconds(),
????????ss:?("0"?+?t.getSeconds()).slice(-2),
????????w:?['日',?'一',?'二',?'三',?'四',?'五',?'六'][t.getDay()]
????};
????return?str.replace(/([a-z]+)/ig,?function?($1)?{
????????return?obj[$1]
????});
}
46、驗(yàn)證郵箱的正則表達(dá)式
function?isAvailableEmail(sEmail)?{
????var?reg?=?/^([\w+\.])+@\w+([.]\w+)+$/
????return?reg.test(sEmail)
}
47、函數(shù)柯里化
//是把接受多個(gè)參數(shù)的函數(shù)變換成接受一個(gè)單一參數(shù)(最初函數(shù)的第一個(gè)參數(shù))的函數(shù)，并且返回接受余下的參數(shù)且返回結(jié)果的新函數(shù)的技術(shù)
function?curryIt(fn)?{
????var?length?=?fn.length,
????????args?=?[];
????var?result?=?function?(arg)?{
????????args.push(arg);
????????length--;
????????if?(length?<=?0)?{
????????????return?fn.apply(this,?args);
????????}?else?{
????????????return?result;
????????}
????}
????return?result;
}
48、大數(shù)相加
function?sumBigNumber(a,?b)?{
????var?res?=?'',?//結(jié)果
????????temp?=?0;?//按位加的結(jié)果及進(jìn)位
????a?=?a.split('');
????b?=?b.split('');
????while?(a.length?||?b.length?||?temp)?{
????????//~~按位非?1.類型轉(zhuǎn)換，轉(zhuǎn)換成數(shù)字?2.~~undefined==0?
????????temp?+=?~~a.pop()?+?~~b.pop();
????????res?=?(temp?%?10)?+?res;
????????temp?=?temp?>?9;
????}
????return?res.replace(/^0+/,?'');
}
49、單例模式
function?getSingle(func)?{
????var?result;
????return?function?()?{
????????if?(!result)?{
????????????result?=?new?func(arguments);
????????}
????????return?result;
????}
}
評(píng)論
圖片
表情