JS常用函數(shù)和常用技巧小結(jié)
學(xué)習(xí)和工作的過(guò)程中總結(jié)的干貨，包括常用函數(shù)、常用js技巧、常用正則表達(dá)式、git筆記等。為剛接觸前端的童鞋們提供一個(gè)簡(jiǎn)單的查詢(xún)的途徑，也以此來(lái)緬懷我的前端學(xué)習(xí)之路。
Ajax請(qǐng)求
jquery ajax函數(shù)
我自己封裝了一個(gè)ajax的函數(shù)，代碼如下：
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);
});
jsonp方式
有時(shí)候我們?yōu)榱丝缬?，要使用jsonp的方法，我也封裝了一個(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ò)誤處理
}
});
常用正則驗(yàn)證表達(dá)式
手機(jī)號(hào)驗(yàn)證
var validate = function(num) {
var exp = /^1[3-9]\d{9}$/;
return exp.test(num);
};
身份證號(hào)驗(yàn)證
var exp = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;
ip驗(yàn)證
var exp = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
常用js函數(shù)
$(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');
});
阻止冒泡
function stopBubble(e){
e = e || window.event;
if(e.stopPropagation){
e.stopPropagation(); //W3C阻止冒泡方法
}else {
e.cancelBubble = true; //IE阻止冒泡方法
}
}
全部替換replaceAll
var replaceAll = function(bigStr, str1, str2) { //把bigStr中的所有str1替換為str2
var reg = new RegExp(str1, 'gm');
return bigStr.replace(reg, str2);
}
獲取瀏覽器url中的參數(shù)值
var getURLParam = function(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)', "ig").exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null;
};
深度拷貝對(duì)象
function cloneObj(obj) {
var o = obj.constructor == Object ? new obj.constructor() : new obj.constructor(obj.valueOf());
for(var key in obj){
if(o[key] != obj[key] ){
if(typeof(obj[key]) == 'object' ){
o[key] = mods.cloneObj(obj[key]);
}else{
o[key] = obj[key];
}
}
}
return o;
}
數(shù)組去重
var unique = function(arr) {
var result = [], json = {};
for (var i = 0, len = arr.length; i < len; i++){
if (!json[arr[i]]) {
json[arr[i]] = 1;
result.push(arr[i]); //返回沒(méi)被刪除的元素
}
}
return result;
};
判斷數(shù)組元素是否重復(fù)
var isRepeat = function(arr) { //arr是否有重復(fù)元素
var hash = {};
for (var i in arr) {
if (hash[arr[i]]) return true;
hash[arr[i]] = true;
}
return false;
};
生成隨機(jī)數(shù)
function randombetween(min, max){
return min + (Math.random() * (max-min +1));
}
操作cookie
own.setCookie = function(cname, cvalue, exdays){
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = 'expires='+d.toUTCString();
document.cookie = cname + '=' + cvalue + '; ' + expires;
};
own.getCookie = function(cname) {
var name = cname + '=';
var ca = document.cookie.split(';');
for(var i=0; i< ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1);
if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
}
return '';
};
知識(shí)技巧總結(jié)
數(shù)據(jù)類(lèi)型
underfined、null、0、false、NaN、空字符串。他們的邏輯非結(jié)果均為true。
閉包格式
好處：避免命名沖突（全局變量污染）。
(function(a, b) {
console.log(a+b); //30
})(10, 20);
截取和清空數(shù)組
var arr = [12, 222, 44, 88]; arr.length = 2; //截取，arr = [12, 222]; arr.length = 0; //清空，arr will be equal to [].
獲取數(shù)組的最大最小值
var numbers = [5, 45822, 120, -215]; var maxInNumbers = Math.max.apply(Math, numbers); //45822 var minInNumbers = Math.min.apply(Math, numbers); //-215
浮點(diǎn)數(shù)計(jì)算問(wèn)題
0.1 + 0.2 == 0.3 //false
為什么呢？因?yàn)?.1+0.2等于0.30000000000000004。JavaScript的數(shù)字都遵循IEEE 754標(biāo)準(zhǔn)構(gòu)建，在內(nèi)部都是64位浮點(diǎn)小數(shù)表示?？梢酝ㄟ^(guò)使用toFixed()來(lái)解決這個(gè)問(wèn)題。
數(shù)組排序sort函數(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ù)組洗牌
});
var arr = [{ //對(duì)象數(shù)組
num: 1,
text: 'num1'
}, {
num: 5,
text: 'num2'
}, {
num: 6,
text: 'num3'
}, {
num: 3,
text: 'num4'
}];
arr.sort(function(a, b) {
return a.num - b.num; //從小到大排
return b.num - a.num; //從大到小排
});
對(duì)象和字符串的轉(zhuǎn)換
var obj = {a: 'aaa', b: 'bbb'};
var objStr = JSON.stringify(obj); // "{"a":"aaa","b":"bbb"}"
var newObj = JSON.parse(objStr); // {a: "aaa", b: "bbb"}
git筆記
git使用之前的配置
1.git config --global user.email xxx@163.com
2.git config --global user.name xxx
3.ssh-keygen -t rsa -C xxx@163.com(郵箱地址) // 生成ssh
4.找到.ssh文件夾打開(kāi)，使用cat id_rsa.pub //打開(kāi)公鑰ssh串
5.登陸github，settings － SSH keys － add ssh keys （把上面的內(nèi)容全部添加進(jìn)去即可）
說(shuō)明：然后這個(gè)郵箱（xxxxx@gmail.com）對(duì)應(yīng)的賬號(hào)在github上就有權(quán)限對(duì)倉(cāng)庫(kù)進(jìn)行操作了?？梢员M情的進(jìn)行下面的git命令了。
git常用命令
1、git config user.name / user.email //查看當(dāng)前git的用戶(hù)名稱(chēng)、郵箱
2、git clone https://github.com/jarson7426/javascript.git project //clone倉(cāng)庫(kù)到本地。
3、修改本地代碼，提交到分支: git add file / git commit -m “新增文件”
4、把本地庫(kù)推送到遠(yuǎn)程庫(kù): git push origin master
5、查看提交日志：git log -5
6、返回某一個(gè)版本：git reset --hard 123
7、分支：git branch / git checkout name / git checkout -b dev
8、合并name分支到當(dāng)前分支：git merge name / git pull origin
9、刪除本地分支：git branch -D name
10、刪除遠(yuǎn)程分支： git push origin :daily/x.x.x
11、git checkout -b mydev origin/daily/1.0.0 //把遠(yuǎn)程daily分支映射到本地mydev分支進(jìn)行開(kāi)發(fā)
12、合并遠(yuǎn)程分支到當(dāng)前分支 git pull origin daily/1.1.1
13、發(fā)布到線(xiàn)上：
git tag publish/0.1.5
git push origin publish/0.1.5:publish/0.1.5
14、線(xiàn)上代碼覆蓋到本地：
git checkout --theirs build/scripts/ddos
git checkout --theirs src/app/ddos
以上所述是小編給大家介紹的JS常用函數(shù)和常用技巧小結(jié)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的，在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
js對(duì)table的td進(jìn)行相同內(nèi)容合并示例詳解
正如標(biāo)題所言如何對(duì)table的td進(jìn)行相同內(nèi)容合并，下面為大家詳細(xì)介紹下使用js是如何做到的，感興趣的朋友不要錯(cuò)過(guò)2013-12-12
Bootstrap每天必學(xué)之簡(jiǎn)單入門(mén)
相信大家閱讀了Bootstrap第一篇文章后，對(duì)Bootstrap充滿(mǎn)了探索欲望，小編也對(duì)Bootstrap產(chǎn)生了興趣，所以今天再整理一篇關(guān)于Bootstrap的入門(mén)介紹，希望大家喜歡。2015-11-11
微信小程序?qū)崿F(xiàn)虎年春節(jié)頭像制作
春節(jié)來(lái)臨之際，看到有網(wǎng)友分享了網(wǎng)頁(yè)版的虎年頭像制作工具。本文將為大家介紹一個(gè)虎年春節(jié)頭像制作小程序，文中的示例代碼講解詳細(xì)，需要的可以參考一下2022-02-02
微信小程序自定義toast彈窗效果的實(shí)現(xiàn)代碼
微信小程序里面的自帶彈窗icon只有兩種，success和loading。這篇文章主要介紹了微信小程序之自定義toast彈窗效果的實(shí)現(xiàn)代碼 ,需要的朋友可以參考下2018-11-11
下面小編就為大家?guī)?lái)一篇JavaScipt選取文檔元素的方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
如何實(shí)現(xiàn)textarea里的不同文本顯示不同顏色
如何實(shí)現(xiàn)textarea里的不同文本顯示不同顏色呢？控制textarea的style設(shè)置Textarea以及把文本放到標(biāo)記里都不會(huì)起作用，下面有個(gè)不錯(cuò)的解決方法，感興趣的朋友可以了解下2014-01-01
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)簡(jiǎn)單瀑布流效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要為大家詳細(xì)介紹了一款開(kāi)源的移動(dòng)端腳本框架Hammer.js,可以完美的實(shí)現(xiàn)在移端開(kāi)發(fā)的大多數(shù)事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
javascript中等于（==）與全等（===）的區(qū)別說(shuō)明
等于（==）的情況下 只要值相同就返回True。而全等（===）的時(shí)候需要值和類(lèi)型都要匹配才能返回True.2011-01-01
js點(diǎn)擊出現(xiàn)懸浮窗效果不使用JQuery插件
JQuery有很多這樣的插件，但本文的這個(gè)是跟著自己的想法寫(xiě)的，也不知道他人是如何實(shí)現(xiàn)的，感興趣的朋友可以了解下2014-01-01