1. 程式人生 > >搜刮來的JavaScript工具函數集

搜刮來的JavaScript工具函數集

鼠標事件 break pla chang replace feature undefined opp eset

/**
* [getQueryStringArgs 用以解析查詢字符串]
* @return {[Object]} [一個包含所有參數的對象]
*/
function getQueryStringArgs(){
  //取得查詢字符串並去掉開頭的“?”
  var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
  // 保存數據對象
  args = {},
  // 取得每一項
  items = qs.length ? qs.split("&") : [],
  item = null,
  name = null,
  value = null,
  // 循環中使用的變量


  i = 0,
  len = items.length;

  //逐個將每一項添加到args對象中
  for (i = 0; i<len; i++){
    item = items[i].split("=");
    name = decodeURIComponent(item[0]);
    value = decodeURIComponent(item[1]);

    if(name.length){
    args[name] = value;
    }
  }

  return args;
}

/**
* [convertToArray 將NodeList轉為數組]


* @param {[Object]} nodes [一個nodelist對象]
* @return {[Object]} [返回一個數組]
*/
function convertToArray(nodes){
  var array = null;
  try{
    array = Array.prototype.slice.call(nodes,0);//針對非IE瀏覽器
  }catch(ex){
    array = new Array();
    for(var i = 0, len = nodes.length; i < len; i++){
      array.push(nodes[i]);
    }
  }

  return array;
}

/**
* [outputAttributes 遍歷元素中的所有屬性]
* @param {[Object]} element [一個DOM元素對象]
* @return {[Object]} [返回一個包含屬性名=“屬性值”的數組]
*/
function outputAttributes(element){
  var pairs = new Array(),
  attrName,
  attrValue,
  i,
  len;

  for(i = 0, len = element.attributes.length; i < len; i++){
    attrName = element.attributes[i].nodeName;
    attrValue = element.attributes[i].nodeValue;
    if(element.attributes[i].specified){//確保IE7及更早的版本中,也只會返回特定的屬性
      pairs.push(attrName + "=\"" + attrValue + "\"");
    }
  }

  return pairs.join(" ");
}

/**
* [loadScript 按需動態加載script文件]
* @param {[String]} url [JavaScript文件地址]
*/
function loadScript(url){
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = url;
  document.body.appendChild(script);
}

/**
* [loadStyles 按需動態加載css文件]
* @param {[String]} url [CSS文件地址]
*/
function loadStyles(url){
  var link = document.createElement("link");
  link.rel = "stylesheet";
  link.type = "text/css";
  link.href = url;
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(link);
}

/**
* [EventUtil 封裝跨瀏覽器的事件處理工具對象]
* @type {Object}
*/
var EventUtil = {
/**
* [addHandler 添加事件處理程序]
* @param {[Object]} ele [事件綁定dom元素]
* @param {[String]} type [事件類型]
* @param {[Function]} handler [事件處理函數]
*/
  addHandler: function(ele,type,handler){
    if(ele.addEventListener){
      ele.addEventListener(type,handler,false);
    }else if(ele.atachEvent){
      ele.atachEvent(‘on‘+type,handler);
    }else{
      ele[‘on‘+type] = handler;
    }
  },
/**
* [getEvent 獲取事件對象]
*/
  getEvent: function(event){
    return event ? event : window.event;
  },
/**
* [getTarget 獲取事件目標]
*/
  getTarget: function(event){
    return event.target || event.srcElement;
  },
/**
* [preventDefault 阻止默認事件]
*/
  preventDefault: function(event){
    if(event.preventDefault){
      event.preventDefault();
    }else{
      event.returnValue = false;
    }
  },
/**
* [removeHandler 移除事件處理程序]
* @param {[Object]} ele [事件綁定dom元素]
* @param {[String]} type [事件類型]
* @param {[Function]} handler [事件處理函數]
*/
  removeHandler: function(ele,type,handler){
    if(ele.removeEventListener){
      ele.removeEventListener(type,handler,false);
    }else if(ele.detachEvent){
      ele.detachEvent(‘on‘+type,handler);
    }else{
      ele[‘on‘+type] = null;
    }
  },
/**
* [stopPropagation 阻止事件冒泡]
*/
  stopPropagation: function(event){
    if(event.stopPropagation){
      event.stopPropagation();
    }else{
      event.cancelBubble = true;
    }
  },
/**
* [getRelatedTarget 當事件為mouseover和mouseout時才有值,其余事件為null]
*/
  getRelatedTarget: function(event){
    if(event.relatedTarget){
      return event.relatedTarget;
    }else if(event.toElement){
      return event.toElement;
    }else if(event.fromElement){
      return event.fromElement;
    }else{
      return null;
    }
  },
/**
* [getButton DOM版鼠標事件]
* @param {[Object]} event [事件對象]
*/
  getButton: function(event){
    if(document.implementation.hasFeature("MouseEvents","2.0")){
      return event.button;
    }else{
    switch(event.button){
      case 0:
      case 1:
      case 3:
      case 5:
      case 7:
        return 0;
      case 2:
      case 6:
        return 2;
      case 4:
        return 1;
      }
    }
  },
/**
* [getWheelDelta 獲取鼠標滾輪增值(delta)的方法]
*/
  getWheelDelta: function(event){
    if(event.wheelDelta){
      return (client.engine.oprea && client.engine.oprea < 9.5 ?
        -event.wheelDelta : event.wheelDelta);
    }else{
      return -event.detail * 40;
    }
  },
/**
* [getCharCode 獲取字符編碼]
*/
  getCharCode: function(event){
    if(typeof event.charCode == "number"){
      return event.charCode;
    }else{
      return event.keyCode;
    }
  },
/**
* [getClipboardText 剪貼板事件,獲取剪切內容]
*/
  getClipboardText: function(event){
    var clipboardData = (event.clipboardData || window.clipboardData);
    return clipboardData.getData("text");
  },
/**
* [setClipboardText 剪貼板事件,設置剪切內容]
*/
  setClipboardText: function(event, value){
    if(event.clipboardData){
      return event.clipboardData.setData("text/plain", value);
    }else if(window.clipboardData){
      return window.clipboardData.setData("text", value);
    }
  }
}

/**
* [serialize 表單序列化]
* @param {[Object]} form [一個表單dom對象]
*/
function serialize(form){
  var parts = [],
  field = null,
  i,
  len,
  j,
  optLen,
  option,
  optValue;

  for(i = 0, len = form.elements.length; i < len; i++){
    field = form.elements[i];

    switch(field.type){
      case "select-one":
      case "select-multiple":
        if(field.name.length){
          for(j = 0,optLen = field.options.length; j < optLen; j++){
            option = field.options[j];
            if(option.selected){
              optvalue = "";
              if(option.hasAttribute){
                optValue = (option.hasAttribute("value") ?
                  option.value : option.text);
              }else{//兼容IE
                optValue = (option.attributes["value"].specified ?
                  option.value : option.text);
              }

              parts.push(encodeURIComponent(field.name) + "=" +
                encodeURIComponent(optValue));
            }
          }
        }
        break;
      case undefined: //字段集
      case "file": //文件輸入
      case "submit": //提交按鈕
      case "reset": //重置按鈕
      case "button": //自定義按鈕
        break;
      case "radio": //單選按鈕
      case "checkbox": //多選按鈕
        if(!field.checked){
          break;
        }
      default:
        if(field.name.length){
          parts.push(encodeURIComponent(field.name) + "=" +
            encodeURIComponent(field.value));
        }
      }
    }
  return parts.join("&");
}
/**
* [trim 去掉字符串中的空格]
* @param {[String]} str [需要進行處理的字符串]
* @param {[Number]} type [處理的類型]
* @return {[String]} [返回去除空格之後的字符串]
* 1:所有空格
* 2:前後空格
* 3:前空格
* 4:後空格
*/
function trim(str, type){
  switch(type){
    case 1:
      return str.replace(/\s+/g,"");
    case 2:
      return str.replace(/(^\s*)|(\s$)/g,"");
    case 3:
      return str.replace(/(^s*)/g,"");
    case 4:
      return str.replace(/(\s*$)/g,"");
    default:
      return str;
  }
}
/**
* [removeRepeatArray 數組去重]
* new Set()是ES6的用法
*/
function removeRepeatArray(arr){
  return Array.form(new Set(arr));
}
/**
* [upsetArray 數組順序打亂]
*/
function upsetArray(arr){
  return arr.sort(function(){
    return Math.random() - 0.5;
  })
}
/**
* [MaxArray 數組最大值]
*/
function MaxArray(arr){
  return Math.max.apply(null,arr);
}
/**
* [MinArray 數組最小值]
*/
function MinArray(arr){
  return Math.min.apply(null,arr);
}

/**
* 這一塊的封裝,主要是針對數字類型的數組
* [sumArr 數組求和]
*/
function sumArray(arr){
  var sum=0;
  for(var i = 0, len = arr.length; i < len; i++){
    sum += arr[i];
  }
  return sum;
}
/**
* [averageArr 求數組的平均值]
*/
function averageArray(arr){
  var sum = sumArray(arr);
  var average = sum/arr.length;
  return average;
}
/**
* [randomOne 數組中隨機取一個元素]
*/
function randomOne(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}
/**
* [getEleCount 返回數組(字符串)一個元素出現的次數]
* @param {[type]} obj [可以是一個字符串也可以是一個數組]
* @param {[type]} ele [某個元素]
* getEleCount(‘asd56+asdasdwqe‘,‘a‘)
* //3
* getEleCount([1,2,3,4,5,66,77,22,55,22],22)
* //2
*/
function getEleCount (obj, ele) {
  var num = 0;
  for (var i = 0, len = obj.length; i < len; i++) {
    if (ele == obj[i]) {
      num ++;
    }
  }
  return num;
}
/**
* [getCount 返回數組(字符串)出現最多次數的元素和它出現次數]
* @param {[type]} arr [處理的數組]
* @param {[type]} rank,ranktype [rank->長度,默認為數組長度,ranktype,排序方式,默認降序]
*/
function getCount(arr, rank,ranktype){
  var obj = {},
  i,
  len,
  k,
  arr1 = [];
  //記錄每一元素出現的次數
  for (i = 0, len = arr.length; i < len; i++) {
    k = arr[i];
    if (obj[k]) {
      obj[k]++;
    }
    else {
      obj[k] = 1;
    }
  }
  //保存結果{el-‘元素‘,count-出現次數}
  for (var o in obj) {
    arr1.push({el: o, count: obj[o]});
  }
  //排序(降序)
  arr1.sort(function (n1, n2) {
    return n2.count - n1.count;
  });
  //如果ranktype為1,則為升序,反轉數組
  if(ranktype === 1){
    arr1 = arr1.reverse();
  }
  var rank1 = rank || arr1.length;
  return arr1.slice(0,rank1);
}
/**
* [getArrayNum 得到n1-n2下標的數組]
* 不傳第二個參數,默認返回從n1到數組結束的元素
* @param {[Array]} arr [傳入的數組]
* @param {[Number]} n1 [開始的位置]
* @param {[Number]} n2 [結束的位置]
*/
function getArrayNum(arr,n1,n2){
  var arr1 = [],
  len = n2 || arr.length - 1;
  for(var i = n1; i <= len; i++){
    arr1.push(arr[i]);
  }
  return arr1;
}
/**
* [removeArrayForValue 篩選數組]
* //removeArrayForValue([‘test‘,‘test1‘,‘test2‘,‘test‘,‘aaa‘],‘test‘,‘%‘)
* //["aaa"] 帶有‘test‘的都刪除
* //removeArrayForValue([‘test‘,‘test1‘,‘test2‘,‘test‘,‘aaa‘],‘test‘)
* //["test1", "test2", "aaa"] //數組元素的值全等於‘test‘才被刪除
* @param {[type]} arr [傳入的數組]
* @param {[type]} val [要刪除的值]
* @param {[type]} type [是不是全等於value]
*/
function removeArrayForValue(arr,val,type){
  arr.filter(function(item){
    return type === ‘%‘ ? item.indexOf(val) !== -1 : item !== val;
  });
}

/**
* [checkPwd 檢測密碼強度]
* @param {[String]} str [要檢測的密碼字符串]
*/
function checkPwd(str) {
  var nowLv = 0;
  if (str.length < 6) {
    return nowLv;
  }
  if (/[0-9]/.test(str)) {
    nowLv++;
  }
  if (/[a-z]/.test(str)) {
    nowLv++;
  }
  if (/[A-Z]/.test(str)) {
    nowLv++;
  }
  if (/[\.|-|_]/.test(str)) {
    nowLv++;
  }
  return nowLv;
}
/**
* [repeatStr 字符串循環復制]
* @param {[String]} str [傳入的字符串]
* @param {[Number]} count [需要循環復制的次數]
*/
function repeatStr(str, count) {
  var text = ‘‘;
  for (var i = 0; i < count; i++) {
    text += str;
  }
  return text;
}
/**
* [changeCase 字母大小寫切換]
* 1:首字母大寫
* 2:首頁母小寫
* 3:大小寫轉換
* 4:全部大寫
* 5:全部小寫
* @param {[String]} str [傳入的字符串]
* @param {[Number]} type [切換的類型]
*/
function changeCase(str,type){
  function ToggleCase(str) {
    var itemText = ""
    str.split("").forEach(
      function (item) {
        if (/^([a-z]+)/.test(item)) {
          temText += item.toUpperCase();
        }
        else if (/^([A-Z]+)/.test(item)) {
          itemText += item.toLowerCase();
        }
        else{
          itemText += item;
        }
      });
    return itemText;
  }  

  switch (type) {
    case 1:
      return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {
        return v1.toUpperCase() + v2.toLowerCase();
      });
    case 2:
      return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {
        return v1.toLowerCase() + v2.toUpperCase();
      });
    case 3:
      return ToggleCase(str);
    case 4:
      return str.toUpperCase();
    case 5:
      return str.toLowerCase();
    default:
      return str;
    }
  }

搜刮來的JavaScript工具函數集