JavaScript常用方法轮子

javascript

Array篇

数组乱序：

Array.prototype.shuffle = function(){
    for(var j, x, l = i = this.length; 
        i; 
        j = parseInt(Math.random() * l), x = this[--i], this[i] = this[j], this[j] = x);
    return this;
};
var arr = new Array(1,2,3,4,5,6,7,8,9,0);
arr.shuffle();
console.log(arr);
//[ 5, 7, 1, 3, 9, 2, 0, 4, 6, 8 ]
//[Finished in 0.2s]

String篇

/*Desc:在string指定位置插入subStr*/
function insertStrToFixedPos(ResStr ,subStr , pos){
    subStr = subStr || "";
    pos = pos || 0;
    var newStr = "";
    var forntStr = ResStr.substring(0, pos);
    var endStr = ResStr.substring(pos , ResStr.length);
    newStr = forntStr + subStr + endStr;
    return newStr;
}
// insertStrToFixedPos("aaabbbccc" , "fff" , 3);    //aaafffbbbccc
// print(insertStrToFixedPos("aaabbbccc" , "fff")); //fffaaabbbccc
// print(insertStrToFixedPos("aaabbbccc"));         //aaabbbccc

操作JS String扩展

// 获取当前地址，指定参数的值;
 function queryUrlParam (name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
    var r = window.location.search.substr(1).match(reg)
    if (r != null) {
      return unescape(r[2])
    }
    return null
  }

动态加载 gtag

const loadScript = url => {
  return new Promise((resolve, reject) => {
    const head = document.head || document.getElementsByTagName('head')[0]
    const script = document.createElement('script')
    script.async = true
    script.src = url
    script.charset = 'utf8'
    head.appendChild(script)
    script.onload = resolve
    script.onerror = reject
  })
}
import Vue from 'vue'
export default () => {
  // Apparently is now mandatory to add the ID in the url
  const id = 'UA-xxxxxxxx-x'
  const scriptURL = `https://www.googletagmanager.com/gtag/js?id=${id}`
  loadScript(scriptURL)
    .then(() => {
      window.dataLayer = window.dataLayer || []
      const gtag = () => window.dataLayer.push(arguments)
      gtag('js', new Date())
      gtag('config', id)
      Vue.prototype.$gtag = gtag
    })
    .catch(error => {
      console.log(error.message)
    })
}

getBoundingClientRect判断元素是否在可视区域

getBoundingClientRect 是获取可视区域相关位置信息的，使用这个属性来判断更加方便：

function isElementInViewport (el) {
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );
}

/**
  * @desc: 判断浏览器是否处于全屏状态；
  * @date: 2018-03-21
  */
function checkIsFullScreen() {
  var isFullScreen = document.webkitIsFullScreen || window.fullScreen || document.mozFullScreen;
  var isPhysicalFullScreen = window.outerHeight === window.screen.height && window.outerWidth === window.screen.width
  return isFullScreen || isFullScreen || false;
}