JS常用函数和常用技巧小结


Posted in Javascript onOctober 15, 2016

学习和工作的过程中总结的干货,包括常用函数、常用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常用函数和常用技巧小结,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript ie6兼容position:fixed实现思路
Apr 01 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
node.js实现微信JS-API封装接口的示例代码
Sep 06 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
深入了解JavaScript 防抖和节流
Sep 12 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
JS内置对象和Math对象知识点详解
Apr 03 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 #Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 #Javascript
原生JS实现的放大镜效果实例代码
Oct 15 #Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 #Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 #Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 #Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 #Javascript
You might like
php+oracle 分页类
2006/10/09 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
checkbox使用示例
2013/08/23 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
Python实现冒泡排序的简单应用示例
2017/12/11 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
django将数组传递给前台模板的方法
2019/08/06 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
最新远光软件笔试题面试题内容
2013/11/08 面试题
雏鹰争章活动总结
2014/05/09 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
五年级学生评语大全
2014/12/26 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏
python中mongodb包操作数据库
2022/04/19 Python