學(xué)習(xí)過程中總結(jié)的干貨都伪，包括常用函數(shù)、常用js技巧示罗、常用正則表達(dá)式等惩猫。
Ajax封裝
var Ajax = function(url,type,success,error){
$.ajax({
url: url,
type: type,
dataType: 'json',
timeout: 10000,
success: function(d){
var data = d.data;
success && success(data);
},
error: function(e){
error && error(e)
}
})
}
使用方法：
Ajax('/data.json','get',function(data){
console.log(data)
})
后臺(tái)響應(yīng)Ajax
var xhr = new XMLHttpRequest();
xhr.open('get/post',url,true)
xhr.onreadystatechange = function(){
if(xjr.readyState == 4 && xhr.status == 200){
alert()
}
}
xhr.send()
Jsonp封裝
有時(shí)候我們?yōu)榱丝缬颍褂胘sonp的方法蚜点，我也封裝了一個(gè)函數(shù)：
function jsonp(config) {
var options = config || {}; // 需要配置url, success, time, fail四個(gè)屬性
var callbackName = ('jsonp_' + Math.random()).replace(".", "");
var oHead = document.getElementsByTagName('head')[0];
var oScript = document.createElement('script');
oHead.appendChild(oScript);
window[callbackName] = function(json) { //創(chuàng)建jsonp回調(diào)函數(shù)
oHead.removeChild(oScript);
clearTimeout(oScript.timer);
window[callbackName] = null;
options.success && options.success(json); //先刪除script標(biāo)簽轧房，實(shí)際上執(zhí)行的是success函數(shù)
};
oScript.src = options.url + '?' + callbackName; //發(fā)送請(qǐng)求
if (options.time) { //設(shè)置超時(shí)處理
oScript.timer = setTimeout(function () {
window[callbackName] = null;
oHead.removeChild(oScript);
options.fail && options.fail({ message: "超時(shí)" });
}, options.time);
}
};
使用方法：
jsonp({
url: '/b.com/b.json',
success: function(d){
//數(shù)據(jù)處理
},
time: 5000,
fail: function(){
//錯(cuò)誤處理
}
});
正則表達(dá)式
1. 電話號(hào)碼驗(yàn)證
var validate = function(num){
var exp = /^1[3|4|5|7|8]\d{9}$/;
return exp.test(num)
}
b244cdc6d17075c271a2d1b6b7cf737.png
2. 身份證驗(yàn)證
var validate = function(num){
var exp = /^320925\d{12} | [1-9]{1}[0-9]{16}([0-9]|[xX])$/;
return exp.test(num)
}
027e61762a5b6dd2d7eb4e8a548d6ae.png
3. IP地址驗(yàn)證
var validate = function(num){
var exp = /^((0|1[0-9]{0,2}|2[0-9]{0,1}|2[0-4][0-9]|25[0-5]|[3-9][0-9]{0,1})\.){3}(0|1[0-9]{0,2}|2[0-9]{0,1}|2[0-4][0-9]|25[0-5]|[3-9][0-9]{0,1})(?(\/)\/([0-9]|[1-2][0-9]|3[0-2])|)$/;
return exp.test(num)
}
常用函數(shù)
1. 檢測(cè)重復(fù)
var isRepeat = function(arr){
var hash = {};
for(var key in arr){
if(hash[arr[key]])
return true;
hash[arr[key]] = true;
}
return false
}
代碼說明：創(chuàng)建一個(gè)空的對(duì)象，for循環(huán)時(shí)绍绘，每次取出一個(gè)元素與對(duì)象對(duì)比锯厢，如果這個(gè)對(duì)象重復(fù)皮官，則return true，再將這個(gè)元素賦值為true实辑；如果不重復(fù)捺氢，則返回false。運(yùn)用這個(gè)方法可以拓展出數(shù)組去重剪撬。
2. 數(shù)組去重
var unique = function(arr){
var a = [],
b = {};
for(var i = 0, len=arr.length; i<len;i++){
if(!b[arr[i]]) {
b[arr[i]] = 1;
a.push(arr[i])
}
}
return a;
}
數(shù)組去重.PNG
代碼說明：for循環(huán)時(shí)摄乒，每次取出一個(gè)元素與對(duì)象進(jìn)行對(duì)比，如果這個(gè)元素不重復(fù)残黑，則把它存放到結(jié)果數(shù)組中,同時(shí)把這個(gè)元素的內(nèi)容作為對(duì)象的一個(gè)屬性馍佑，并賦值為1，存入到第2步建立的對(duì)象中梨水。
3. 數(shù)組排列
var arr = [1, 5, 6, 3]; //數(shù)字?jǐn)?shù)組
arr.sort(function(a, b) {
return a - b; //從小到大排
return b - a; //從大到小排
return Math.random() - 0.5; //數(shù)組洗牌
});
代碼說明：Array的排序法則是：a > b則是升序拭荤；a < b則是降序。隨機(jī)排列的方式是返回的隨機(jī)數(shù)在-0.5~0.5之間疫诽，只有負(fù)數(shù)舅世，正數(shù)或者0，從而進(jìn)行了隨機(jī)排列奇徒。
4.回到頂部
$(window).scroll(function(){
var a = $(window).scrollTop();
if (a>100){
$('.go-top').fadeIn();
}else{
$('.go-top').fadeOut();
}
});
$(".go-top").click(function(){
$("html,body").animate({scrollTop: "0px"},'600');
});
5.數(shù)組深拷貝
數(shù)組深拷貝一共有3種方法：
1. 運(yùn)用slice：
var arr = array.slice(start,[end])
參數(shù)：
- array 必選項(xiàng)雏亚。一個(gè) Array 對(duì)象。
- start 必選項(xiàng)摩钙。arrayObj 中所指定的部分的開始元素是從零開始計(jì)算的下標(biāo)罢低。
- end可選項(xiàng)。arrayObj 中所指定的部分的結(jié)束元素是從零開始計(jì)算的下標(biāo)胖笛。
說明：
- slice 方法返回一個(gè) Array 對(duì)象网持，其中包含了 arrayObj 的指定部分。slice 方法一直復(fù)制到 end 所指定的元素长踊，但是不包括該元素翎碑。
- 如果 start 為負(fù)，將它作為 length + start處理之斯，此處 length 為數(shù)組的長(zhǎng)度日杈。
- 如果 end 為負(fù)，就將它作為 length + end 處理佑刷，此處 length 為數(shù)組的長(zhǎng)度莉擒。
- 如果省略 end ，那么 slice 方法將一直復(fù)制到 arrayObj 的結(jié)尾瘫絮。
- 如果 end 出現(xiàn)在 start 之前涨冀，不復(fù)制任何元素到新數(shù)組中。
2. 使用concat麦萤，創(chuàng)建一個(gè)副本鹿鳖，產(chǎn)生新的數(shù)組扁眯，不會(huì)對(duì)根目錄產(chǎn)生影響。
var arr1 = [1,2,3];
var arr2 = arr1.concat();
拓展：concat()函數(shù)為拼接倆個(gè)字符或者數(shù)組函數(shù)
例1：拼接倆個(gè)數(shù)組
var arr1 = [1,2,3,4,5]
var arr2 = [7,8,9,10]
var a = arr1.concat(arr2)
微信截圖_20170811163343.png
例2：拼接多個(gè)數(shù)組
var arr1 = [1,2,3,4,5]
var arr2 = [7,8,9,10]
var arr3 = [11,12,13,15]
var a = arr1.concat(arr2,arr3)
微信截圖_20170811163522.png
6.隨機(jī)數(shù)
1. 從min到max之間的隨機(jī)整數(shù)翅帜，包括min不包括max
function radom(min,max){
return Math.floor(Math.random()*(max-min)) + min
}
2. 從min都max之間的隨機(jī)整數(shù)姻檀，包括min包括max
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
7.替換函數(shù)
var replaceAll = function(bigStr,str1,str2){ //將bigstr中的str1全部替換成str2
var reg = new RegExp(str1, 'gm');
return bigStr.replace(reg,str2);
}
代碼說明：
首先創(chuàng)建一個(gè)正則表達(dá)式，將尋找替換的規(guī)則寫好涝滴，再運(yùn)用replace根據(jù)正則表達(dá)式進(jìn)行替換
8. 通用事件監(jiān)聽函數(shù)
markyun.Event={
//頁(yè)面加載完成后
readyEvent:function(fn){
if(fn==null){
fn=document;
}
var oldonload=window.onload;
if(typeof window.onload!='function'){
window.onload=fn;
}else{
window.onload=function(){
oldonload();
fn();
};
}
},
//添加事件
addEvent:function(element,type,handle){
if(element.addEventListener){
//事件類型绣版、需要執(zhí)行的函數(shù)、是否捕捉
element.addEventListener(type,handle,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,function(){
handler.call(element);
});
}else{
element['on'+type]=handler;
}
},
//移除事件
removeEvent:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}else{
element['on'+type]=null;
}
},
//阻止事件
stopPropagation:function(ev){
if(ev.stopPropagation){
ev.stopPropagation();
}else{
ev.cancleBubble=true;
}
},
//取消事件的默認(rèn)行為
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
//獲取事件目標(biāo)
getTarget:function(event){
return event.target || event.srcElement;
},
//獲取event對(duì)象的引用歼疮，取到事件的所有信息杂抽，確保隨時(shí)能夠使用event；
getEvent:function(e){
var ev=e || window.event;
if(!ev){
var c=this.getEvent.caller;
while(c){
ev=c.arguments[0];
if(ev && Event==ev.constructor){
break;
}
c=c.caller;
}
}
return ev;
}
};
結(jié)語: 如果你們有什么值得推薦的js技巧韩脏，歡迎在評(píng)論中補(bǔ)充缩麸，我可以收納在本文中。
蔣恒 2017.08.11
