JSON

总结js常用函数和常用技巧(持续更新)

字号+ 作者:H5之家 来源:H5之家 2017-04-14 08:02 我要评论( )

学习和工作的过程中总结的干货,包括常用函数、常用js技巧、常用正则表达式、git笔记等。为刚接触前端的童鞋们提供一个简单的查询的途径,也以此来缅怀我的前端

学习和工作的过程中总结的干货,包括常用函数、常用js技巧、常用正则表达式、git笔记等。为刚接触前端的童鞋们提供一个简单的查询的途径,也以此来缅怀我的前端学习之路。 PS:此文档,我会持续更新。

2016-10-11Ajax

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 reg = /^1[3-9]\d{9}$/;

return reg.test(num);

};

身份证号验证:

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

ip验证:

var reg = /^(\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])){3}$/

常用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中的参数值:

('[?|&]' + 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;

};

判断数组元素是否重复:

;

};

生成随机数:

function randombetween(min, max){

return min + (Math.random() * (max-min +1));

}

操作cookie:

own.setCookie = ;

};

知识技巧总结

数据类型: 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常用命令:

git push origin publish/

14、线上代码覆盖到本地:

git checkout --theirs build/scripts/ddos

git checkout --theirs src/app/ddos

.gitignore文件(忽略上传的文件):

node_modules/

.idea/

.DS_Store

2016-11-01更新

判断是否有中文:

var reg = /.*[\u4e00-\u9fa5]+.*$/;

reg.test('123792739测试') //true

判断是对象还是数组:

= function(o) {

return toString.apply(o) === '[object Object]';

}

CSS修改滚动条样式:

::-webkit-scrollbar {

width: 10px;

background-color: #ccc;

}

::-webkit-scrollbar-track {

background-color: #ccc;

border-radius: 10px;

}

::-webkit-scrollbar-thumb {

background-color: rgb(255, 255, 255);

background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(rgb(77, 156, 65)), color-stop(0.6, rgb(84, 222, 93)), to(rgb(25, 145, 29)));

border-radius: 10px;

}

结语

希望本文总结的内容能给各位看官带来焕然一新的感觉。另外,如果你们有什么值得推荐的js技巧,欢迎在评论中补充,我可以收纳在本文中。

PS:此文档会持续新增内容。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • c#常用的Datable转换为json,以及json转换为DataTable操作方法

    c#常用的Datable转换为json,以及json转换为DataTable操作方法

    2017-04-11 16:03

  • php json相关函数用法示例

    php json相关函数用法示例

    2017-04-06 08:01

  • iOS中将后台JSON数据转化为模型的总结

    iOS中将后台JSON数据转化为模型的总结

    2017-03-29 17:00

  • Ajax与JSON一些总结.docx

    Ajax与JSON一些总结.docx

    2017-03-15 14:02

网友点评