JS常用函数大全

首页 > 代码库 > JS常用函数大全

2024-07-17 07:35:35 218人阅读

免疫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( "abc@abc.com" ),       // true
reEmail.test( "abc.@abc.com" ),      // false
reEmail.test( "abc.def@abc.com" ),   // true
reEmail.test( "abc@abc.def.cn" );    // 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辅助判断，看是否是自定义对象。

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们