本文总结了JavaScript开发中常用的函数与技巧，涵盖Ajax与JSONP封装、手机号及身份证等正则验证、数组操作与深度拷贝等实用工具，并附带Git常用命令配置笔记，旨在为前端初学者提供便捷的查询参考。
前言与概述
本文汇集了学习与工作中积累的实用内容，包括常用函数、JavaScript技巧、正则表达式以及Git操作笔记，旨在为前端初学者提供便捷的查询途径，同时也作为对前端学习历程的记录。
Ajax与JSONP封装
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])$/;JavaScript实用函数工具
常用JavaScript函数工具
$(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阻止冒泡方法
}
}字符串全部替换方法
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 '';
};数据类型与基础技巧
知识技巧总结部分
数据类型判断
undefined、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版本控制笔记
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命令查看公钥字符串
5. 登录GitHub，进入settings中的SSH keys选项，将上述公钥内容添加进去
说明：完成上述步骤后，该邮箱对应的账号即获得GitHub仓库的操作权限，可执行后续Git命令。
Git常用命令速查
1. 使用git config user.name / user.email查看当前Git用户名及邮箱
2. 执行git clone https://github.com/jarson7426/javascript.git project将仓库克隆至本地
3. 修改本地代码后提交至分支：执行git add file / git commit -m“新增文件”
4. 将本地库推送到远程库：执行git push origin master
5. 查看提交日志：执行git log -5查看最近5条记录
6. 回退至某一版本：执行git reset --hard 123（123为commit hash）
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常用函数与技巧，希望对大家有所帮助。如有任何疑问欢迎留言，小编会及时回复，感谢支持。