DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS常用函數和常用技巧小結
JS常用函數和常用技巧小結
編輯:關於JavaScript     

學習和工作的過程中總結的干貨,包括常用函數、常用js技巧、常用正則表達式、git筆記等。為剛接觸前端的童鞋們提供一個簡單的查詢的途徑,也以此來緬懷我的前端學習之路。

Ajax請求

jquery ajax函數

我自己封裝了一個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);
});

jsonp方式

有時候我們為了跨域,要使用jsonp的方法,我也封裝了一個函數:

function jsonp(config) {
var options = config || {}; // 需要配置url, success, time, fail四個屬性
var callbackName = ('jsonp_' + Math.random()).replace(".", "");
var oHead = document.getElementsByTagName('head')[0];
var oScript = document.createElement('script');
oHead.appendChild(oScript);
window[callbackName] = function(json) { //創建jsonp回調函數
oHead.removeChild(oScript);
clearTimeout(oScript.timer);
window[callbackName] = null;
options.success && options.success(json); //先刪除script標簽,實際上執行的是success函數
};
oScript.src = options.url + '?' + callbackName; //發送請求
if (options.time) { //設置超時處理
oScript.timer = setTimeout(function () {
window[callbackName] = null;
oHead.removeChild(oScript);
options.fail && options.fail({ message: "超時" });
}, options.time);
}
};
// 使用方法:
jsonp({
url: '/b.com/b.json',
success: function(d){
//數據處理
},
time: 5000,
fail: function(){
//錯誤處理
} 
});

常用正則驗證表達式

手機號驗證

var validate = function(num) {
var exp = /^1[3-9]\d{9}$/;
return exp.test(num);
};

身份證號驗證

var exp = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;

ip驗證

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函數

$(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中的參數值

var getURLParam = function(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)', "ig").exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null;
};

深度拷貝對象

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;
}

數組去重

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]); //返回沒被刪除的元素
}
}
return result;
};

判斷數組元素是否重復

var isRepeat = function(arr) { //arr是否有重復元素
var hash = {};
for (var i in arr) {
if (hash[arr[i]]) return true;
hash[arr[i]] = true;
}
return false;
};

生成隨機數

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 '';
};

知識技巧總結

數據類型

underfined、null、0、false、NaN、空字符串。他們的邏輯非結果均為true。

閉包格式

好處:避免命名沖突(全局變量污染)。

(function(a, b) {
console.log(a+b); //30
})(10, 20);

截取和清空數組

var arr = [12, 222, 44, 88];
arr.length = 2; //截取,arr = [12, 222]; 
arr.length = 0; //清空,arr will be equal to [].

獲取數組的最大最小值

var numbers = [5, 45822, 120, -215];
var maxInNumbers = Math.max.apply(Math, numbers); //45822
var minInNumbers = Math.min.apply(Math, numbers); //-215

浮點數計算問題

0.1 + 0.2 == 0.3 //false

為什麼呢?因為0.1+0.2等於0.30000000000000004。JavaScript的數字都遵循IEEE 754標准構建,在內部都是64位浮點小數表示。可以通過使用toFixed()來解決這個問題。

數組排序sort函數

var arr = [1, 5, 6, 3]; //數字數組
arr.sort(function(a, b) {
return a - b; //從小到大排
return b - a; //從大到小排
return Math.random() - 0.5; //數組洗牌
});
var arr = [{ //對象數組
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; //從大到小排
});

對象和字符串的轉換

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文件夾打開,使用cat id_rsa.pub //打開公鑰ssh串

5.登陸github,settings - SSH keys - add ssh keys (把上面的內容全部添加進去即可)

說明:然後這個郵箱(xxxxx@gmail.com)對應的賬號在github上就有權限對倉庫進行操作了。可以盡情的進行下面的git命令了。

git常用命令

1、git config user.name / user.email //查看當前git的用戶名稱、郵箱

2、git clone https://github.com/jarson7426/javascript.git project //clone倉庫到本地。

3、修改本地代碼,提交到分支: git add file / git commit -m “新增文件”

4、把本地庫推送到遠程庫: git push origin master

5、查看提交日志:git log -5

6、返回某一個版本:git reset --hard 123

7、分支:git branch / git checkout name / git checkout -b dev

8、合並name分支到當前分支:git merge name / git pull origin

9、刪除本地分支:git branch -D name

10、刪除遠程分支: git push origin :daily/x.x.x

11、git checkout -b mydev origin/daily/1.0.0 //把遠程daily分支映射到本地mydev分支進行開發
12、合並遠程分支到當前分支 git pull origin daily/1.1.1

13、發布到線上:

git tag publish/0.1.5
git push origin publish/0.1.5:publish/0.1.5

14、線上代碼覆蓋到本地:

git checkout --theirs build/scripts/ddos
git checkout --theirs src/app/ddos

以上所述是小編給大家介紹的JS常用函數和常用技巧小結,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的,在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved