JS常用函数大全
浏览数：45 /
时间：2015年06月09日
免疫bodyclick方法
这个是个比较好的方法，一个弹出窗口，要设定在任何其他地方点击这个窗口会自动消失，但点这个窗口内部是没事的。那么就要用到这个方法了。
// (对body点击产生效果免疫的部分， 阻止冒泡body事件)
// 通过ID屏蔽->@args（event, targetID）
function blockClickToBodyById(a,b){return b==$(a.target).prop("id")||$(a.target).parents("#"+b).length?!1:!0}
// 通过对象屏蔽->@args（event, target）
function blockClickToBodyByObj(a,b){var c;return b=$(b),b.prop("id")||(c=!0,b.prop("id","__kobe_special_id_zzzz__")),b.prop("id")==$(a.target).prop("id")||$(a.target).parents("#"+b.prop("id")).length?(c&&b.removeAttr("id"),!1):(c&&b.removeAttr("id"),!0)}
// 使用
if (false == blockClickToBodyByObj(ev, $("div#test"))) return;
// 一般用法
$("body").on("click", function(){
if(false == blockClickToBodyByObj(ev, $("div#test"))) return;
$("#test").remove();
});
将url参数转为obj
var urlParamToObj = function(u) {
var sear = u.slice(u.indexOf("?") + 1).split("&"), p = {};
for(var i = 0, j=sear.length; j>i; i++) {
var s = sear[i].split("=");
p[s[0]] = s[1];
}
return p;
};
数组去重
// 双for循环去重
function distinctArr(a){var e,f,b=a.concat(),c=[],d=function(a,b,c){var d;if(c){for(d=b.length-1;d>=0;d--)if(a===b[d])return!0;return!1}for(d=b.length-1;d>=0;d--)if(a==b[d])return!0;return!1};for(e=b.length-1;e>=0;e--)f=b.pop(),d(f,c)||c.push(f);return c}
// 将数组排序并去重
function distinctAndSortNumericArray(arr, wantDesc){
var arrSorted = [], sortDir = !wantDesc ? 1 : -1;
arr.sort(function(a, b){
return (a - b) * wantDesc;
});
for(var i=0, j=arr.length, len2; j>i; i++){
len2 = arrSorted.length;
if(len2){
if(arrSorted[len2 - 1] != arr[i])
arrSorted.push(arr[i]);
}else
arrSorted.push(arr[i]);
}
return arrSorted;
}
克隆方法-clone()
function clone(obj) {
var o;
switch (typeof obj) {
case ‘undefined‘:
break;
case ‘string‘:
o = obj + ‘‘;
break;
case ‘number‘:
o = obj - 0;
break;
case ‘boolean‘:
o = obj;
break;
case ‘object‘:
if (obj === null) {
o = null;
} else {
if (obj instanceof Array) {
o = [];
for (var i = 0, len = obj.length; i < len; i++) {
o.push(clone(obj[i]));
}
} else {
o = {};
for (var k in obj) {
o[k] = clone(obj[k]);
}
}
}
break;
default:
o = obj;
break;
}
return o;
}
邮箱格式-正则检查
var reEmail = /^(?:\w+\.)*\w+@\w+(?:\.\w+)+$/i; reEmail.test( "[email protected]" ), // true reEmail.test( "abc.@abc.com" ), // false reEmail.test( "[email protected]" ), // true reEmail.test( "[email protected]" ); // true
生成GUID码
Math.guid = function(){
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c){
var r = Math.random()*16|0, v = c == "x" ? r : (r&0x3|0x8);
return v.toString(16);
}).toUpperCase();
};
随机生成数字字母的字符串(验证码)
function generateRandomAlphaNum(len) {
var rdmString = "";
for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
return rdmString.substr(0, len);
}
// 译者注：特意查了一下Math.random()生成0到1之间的随机数，number.toString(36)是将这个数字转换成36进制（0-9，a-z），最后substr去掉前面的“0.”字符串
base64字符串编码与解码
function base64Encode(str) {
return btoa(unescape(encodeURIComponent(str)));
}
function base64Decode(str) {
return decodeURIComponent(escape(atob(str)));
}
js兼容获取最终样式
function getStyle(obj, attribute) {
return obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, null)[attribute];
}
//IE:
var bgColor = oDiv.currentStyle.backgroundColor; //只读的，如果对它进行写入会发生错误
//DOM:
//getComputedStyle(obj,null)接受两个参数，需要获取样式的元素和诸如:hover和:first-letter之类的伪元素
var bgColor = document.defaultView.getComputedStyle(oDiv, null).backgroundColor;
大数字每3位添加逗号
function addCommas(nStr) {
nStr += ‘‘;
var x = nStr.split(‘.‘);
var x1 = x[0];
var x2 = x.length >; 1 ? ‘.‘ + x[1] : ‘‘;
var rgx = /(d+)(d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, ‘$1‘ + ‘,‘ + ‘$2‘);
}
return x1 + x2;
}
window.requestAnimationFrame兼容写法
window.requestAnimFrame = function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(e, t) {
return window.setTimeout(e, 1e3 / 60)
};
}();
js的trim()
s = new String(" -- kobe ").trim() -> "-- kobe"
s = new String(" -- kobe ").trimLeft() -> "-- kobe "
s = new String(" -- kobe ").trimRight() -> " -- kobe"
// 正则实现trim()
function trim(a) {return a.replace(/(^\s*)|(\s*$)/g, "")}
// jquery
$.trim(" haha ");
判断浏览器类型
//浏览器判断，使用方法：
var userAgent = navigator.userAgent.toLowerCase();
browser = {
version: (userAgent.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [0, ‘0‘])[1],
safari: /webkit/.test(userAgent),
opera: /opera/.test(userAgent),
chrome: /chrome/.test(userAgent),
msie: /msie/.test(userAgent) && !/opera/.test(userAgent),
mozilla: /mozilla/.test(userAgent) && !/(compatible|webkit)/.test(userAgent)
}
//判断IE6
function isIe6() {
if (browser.msie && browser.version == ‘6.0‘) {
alert(‘他就是IE6‘);
} else {
alert(‘不是IE6‘);
}
}
isIe6();
jQuery方法：
/* <![CDATA[ */
$(document).ready(function() {
var bro = $.browser;
var binfo = "";
if (bro.msie) {
binfo = "Microsoft Internet Explorer " + bro.version;
}
if (bro.mozilla) {
binfo = "Mozilla Firefox " + bro.version;
}
if (bro.safari) {
binfo = "Apple Safari " + bro.version;
}
if (bro.opera) {
binfo = "Opera " + bro.version;
}
//alert(binfo);
$("#browser").html(binfo);
})
/* ]]> */
获取浏览器的前缀
var prefix = (function() {
if ("undefined" !== typeof window.getComputedStyle) {
var styles = window.getComputedStyle(document.documentElement, ‘‘),
pre = (Array.prototype.slice
.call(styles)
.join(‘‘)
.match(/-(moz|webkit|ms)-/) || (styles.OLink === ‘‘ && [‘‘, ‘o‘])
)[1],
dom = (‘WebKit|Moz|MS|O‘).match(new RegExp(‘(‘ + pre + ‘)‘, ‘i‘))[1];
return {
dom: dom,
lowercase: pre,
css: ‘-‘ + pre + ‘-‘,
js: pre[0].toUpperCase() + pre.substr(1)
};
}
})();
输出有：
{"dom":"WebKit","lowercase":"webkit","css":"-webkit-","js":"Webkit"}
{"dom":"MS","lowercase":"ms","css":"-ms-","js":"Ms"}
{"dom":"Moz","lowercase":"moz","css":"-moz-","js":"Moz"}
throttle-debounce
/*
* 频率控制 返回函数连续调用时，fn 执行频率限定为每多少时间执行一次
* @param fn {function} 需要调用的函数
* @param delay {number} 延迟时间，单位毫秒
* @param immediate {bool} 给 immediate参数传递false 绑定的函数先执行，而不是delay后后执行。
* @return {function} 实际调用函数
*/
var throttle = function(fn, delay, immediate, debounce) {
var curr = +new Date(), //当前时间
last_call = 0,
last_exec = 0,
timer = null,
diff, //时间差
context, //上下文
args,
exec = function() {
last_exec = curr;
fn.apply(context, args);
};
return function() {
curr = +new Date();
context = this,
args = arguments,
diff = curr - (debounce ? last_call : last_exec) - delay;
clearTimeout(timer);
if (debounce) {
if (immediate) {
timer = setTimeout(exec, delay);
} else if (diff >= 0) {
exec();
}
} else {
if (diff >= 0) {
exec();
} else if (immediate) {
timer = setTimeout(exec, -diff);
}
}
last_call = curr;
}
};
/*
* 空闲控制 返回函数连续调用时，空闲时间必须大于或等于 delay，fn 才会执行
* @param fn {function} 要调用的函数
* @param delay {number} 空闲时间
* @param immediate {bool} 给 immediate参数传递false 绑定的函数先执行，而不是delay后后执行。
* @return {function} 实际调用函数
*/
var debounce = function(fn, delay, immediate) {
return throttle(fn, delay, immediate, true);
};
// 通过jQuery的特殊事件和自定义事件的结合，封装延迟执行函数
$.event.special.throttledScroll = {
setup: function(data) {
var timer = 0;
$(this).bind(‘scroll.throttledScroll‘, function(event) {
if (!timer) {
timer = setTimeout(function() {
$(this).triggerHandler(‘throttledScroll‘);
timer = 0;
}, 250);
}
});
},
teardown: function() {
$(this).unbind(‘scroll.throttledScroll‘);
}
};
})(jQuery);
$(document).ready(function() {
$window.bind(‘throttledScroll‘, checkScrollPosition).trigger(‘throttledScroll‘);
});
获取css的伪元素
:hover, :active, :before……
var bgcolor = window.getComputedStyle(
document.querySelector(‘.element‘), ‘:before‘
).getPropertyValue(‘background-color‘);
var aFontSize = window.getComputedStyle(document.getElementById("a"), ":hover").fontSize;
js类型判断
typeof:不能很好判断obj, null , arr, regexp和自定义对象constructor: 支持大部分对象类型判断，特别是自定义类型对象，但不能在null和undefined上使用String.prototype.toString.call():支持绝大多数类型判断，但不支持自定义类型对象var toString = Object.prototype.toString;
console.log(toString.call(arr)); // [object Array]
console.log(toString.call(nullObj)); //[object Null]
console.log(toString.call(user)); // [object Object]不能作进一步的判断为什么不直接用obj.toString()？因为obj.toString()返回的是其对象的内容，如数值，字符串，数组等内容，不好做判断
总结：推荐使用Object.prototype.toString.call()方法，因为他能解决绝大部分情况的判断，在遇到返回值为[object Object]时，再使用constructor辅助判断，看是否是自定义对象。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
