前端實用工具大集合

每一個前端開發都應該有屬於自己的一套工具(utils.js)，符合自己的開發習慣，隨身攜帶，開箱即用。當然我的大多數是摘自百度，有的稍加修改，分享一下我的utils.js（持續更新），歡迎大家指正補充。

 

1.判斷js類型

 js有自己判斷方法 typeof 但是當他遇到引用類型的時候得到的結果往往不是我們想要的，例如

typeof []      // object   
typeof null   // object

於是自定義判斷類型就出現了

// 自定義判斷元素類型JS
function toType(obj) {
  return Object.prototype.toString.call(obj).match(/\s+(\w+)/)[1].toLowerCase()
}

//來我們測試一下 
filterNull(undefined)  //'undefined'
filterNull(null)    //'null'
filterNull(NaN)    //'number'
filterNull(function(){})  //'function'
filterNull({})   //'object'
filterNull([])    //'array'
filterNull(0)    //'number'
filterNull(false)   //'boolean'

 

 

2.過濾參數

有沒有時候后台返回的參數是null或者undefined然后就被丟到了頁面上，很難看，要每一個地方都去處理，很不好，如果你也遇到過這樣情況，那么你就可以用到這個小工具啦

// 參數過濾函數（處理參數 格式化參數）
function filterNull(o) {
  for (var key in o) {
    if (o[key] === null) {
      o[key] = '/'
    }
    if (o[key] === undefined) {
      o[key] = '/'
    }
    if (toType(o[key]) === 'string' && o[key] === '') {
      o[key] = '/'
    //   debugger
    } else if (toType(o[key]) === 'object') {
      o[key] = filterNull(o[key])
    } else if (toType(o[key]) === 'array') {
      o[key] = filterNull(o[key])
    }
  }
  return o
}
// 自定義判斷元素類型JS
function toType(obj) {
  return Object.prototype.toString.call(obj).match(/\s+(\w+)/)[1].toLowerCase()
}

 3.截取視頻第一幀

//截取視頻第一幀
//需要后台配合視頻資源的跨域
  initialize() {
      var video, output;
      var scale = 0.8;
      var captureImage = function() {
                  var canvas = document.createElement("canvas");
                  canvas.width = video.videoWidth * scale;
                  canvas.height = video.videoHeight * scale;
                  canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
                  var img = document.createElement("img");
                  img.src = canvas.toDataURL("image/png");
                  output.appendChild(img);
      }
      output = document.getElementById("output");  //輸出的div
      video = document.getElementById("VIDEO");    //要截取的目標video
      video.setAttribute('crossorigin', 'anonymous');  //允許跨域
      video.addEventListener('loadeddata',captureImage); //當當前幀的數據已加載，但沒有足夠的數據來播放指定音頻/視頻的下一幀時，會發生 loadeddata 事件。
},

4.根據字節數截取字符串

    //根據字節截取字符串
    mySubString(str, len){
        var regexp = /[^\x00-\xff]/g;// 正在表達式匹配中文
        // 當字符串字節長度小於指定的字節長度時
        if (str.replace(regexp, "aa").length <= len) {
        return str;
        }
        // 假設指定長度內都是中文
        var m = Math.floor(len/2);
        for (var i = m, j = str.length; i < j; i++) {
        // 當截取字符串字節長度滿足指定的字節長度
        if (str.substring(0, i).replace(regexp, "aa").length >= len) {
        return str.substring(0, i);
        }
        }
        return str;
    }
    

5.js復制到剪切板

  //input框不能有disabled屬性
  // 根據第一條擴展，input的width || height 不能為0；
  //input框不能有hidden屬性  
<input id='input_url' v-model='product_url' style='opacity: 0;position: absolute;' type="text">
  var input = $('#input_url');
  input.select();
  document.execCommand("Copy");


  https://www.cnblogs.com/leong-min/p/6483523.html

6.rem適配字體大小

import Vue from 'vue'
function resizeFont() {
  var docEl = document.documentElement
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  var recalc = function() {
    var clientWidth = docEl.clientWidth
    if (!clientWidth) return
    docEl.style.fontSize = 10 * (clientWidth / 360) + 'px'
  }
  if (!document.addEventListener) return
  window.addEventListener(resizeEvt, recalc, false)
  recalc()
  document.addEventListener(onload, recalc, false)
}
Vue.prototype.$resizeFont = resizeFont

7.獲取當前域名

window.location.protocol+"//"+window.location.host; //   返回https://www.cnblogs.com

window.location.host; //返回url 的主機部分，例如：mp.csdn.net  
window.location.hostname; //返回"www.cnblogs.com
window.location.href; //返回整個url字符串(在瀏覽器中就是完整的地址欄)   "https://www.cnblogs.com/Qqqing/p/11417738.html"
window.location.pathname; //返回 /Qqqing/p/11417738.html 
window.location.protocol; //返回url 的協議部分，例如： http:，ftp:，maito:等等。  
window.location.port //url 的端口部分，如果采用默認的80端口，那么返回值並不是默認的80而是空字符  

 

 8.獲取url里的參數

 

//獲取url里的參數     
 function GetQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
        var r = window.location.search.substr(1).match(reg)// search,查詢？后面的參數，並匹配正則
        if (r != null) return unescape(r[2]); return null
   }
getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    vars[key] = value;
    });
    return vars;
},