JS开发常用工具函数

JS开发常用工具函数收集，方便后续项目的开发

1、dateFormater：格式化时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function dateFormater(formater, t){
    let date = t ? new Date(t) : new Date(),
        Y = date.getFullYear() + '',
        M = date.getMonth() + 1,
        D = date.getDate(),
        H = date.getHours(),
        m = date.getMinutes(),
        s = date.getSeconds();
    return formater.replace(/YYYY|yyyy/g,Y)
        .replace(/YY|yy/g,Y.substr(2,2))
        .replace(/MM/g,(M<10?'0':'') + M)
        .replace(/DD/g,(D<10?'0':'') + D)
        .replace(/HH|hh/g,(H<10?'0':'') + H)
        .replace(/mm/g,(m<10?'0':'') + m)
        .replace(/ss/g,(s<10?'0':'') + s)
}
// dateFormater('YYYY-MM-DD HH:mm', t) ==> 2019-06-26 18:30
// dateFormater('YYYYMMDDHHmm', t) ==> 201906261830

2、dateStrForma：将指定字符串由一种时间格式转化为另一种（ from的格式应对应str的位置 ）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function dateStrForma(str, from, to){
    //'20190626' 'YYYYMMDD' 'YYYY年MM月DD日'
    str += ''
    let Y = ''
    if(~(Y = from.indexOf('YYYY'))){
        Y = str.substr(Y, 4)
        to = to.replace(/YYYY|yyyy/g,Y)
    }else if(~(Y = from.indexOf('YY'))){
        Y = str.substr(Y, 2)
        to = to.replace(/YY|yy/g,Y)
    }
    let k,i
    ['M','D','H','h','m','s'].forEach(s =>{
        i = from.indexOf(s+s)
        k = ~i ? str.substr(i, 2) : ''
        to = to.replace(s+s, k)
    })
    return to
}
// dateStrForma('20190626', 'YYYYMMDD', 'YYYY年MM月DD日') ==> 2019年06月26日
// dateStrForma('121220190626', '----YYYYMMDD', 'YYYY年MM月DD日') ==> 2019年06月26日
// dateStrForma('2019年06月26日', 'YYYY年MM月DD日', 'YYYYMMDD') ==> 20190626
// 一般的也可以使用正则来实现
//'2019年06月26日'.replace(/(\d{4})年(\d{2})月(\d{2})日/, '$1-$2-$3') ==> 2019-06-26

3、将时间戳转化为YYYY-MM-DD

1
2
3
4
5
6
7
8
9
10
function getLocalTime(nS) {
  let date = new Date(nS);
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  month = month < 10 ? "0" + month : month;
  day = day < 10 ? "0" + day : day;
  date = year + '-' + month + '-' + day;
  return date;
}

4、getUrlParam：获取url参数，返回一个对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getUrlParam(){
    let url = document.location.toString();
    let arrObj = url.split("?");
    let params = Object.create(null)
    if (arrObj.length > 1){
        arrObj = arrObj[1].split("&");
        arrObj.forEach(item=>{
            item = item.split("=");
            params[item[0]] = item[1]
        })
    }
    return params;
}
// ?a=1&b=2&c=3 ==> {a: "1", b: "2", c: "3"}

5、getQueryValue：获取url参数的值，返回参数的值

1
2
3
4
5
6
7
8
9
10
11
12
function getQueryValue(variable) {
  let query = window.location.search.substring(1);
  let vars = query.split("&");
  for (let i = 0; i < vars.length; i++) {
    let pair = vars[i].split("=");
    if (pair[0] === variable) {
      return decodeURIComponent(pair[1]);
    }
  }
  return false;
}
// ?a=1&b=2&c=3 ==> getQueryValue('a') ==> 1

6、按钮倒计时，提高用户等待的体验

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function deadTime(element,time) {
  let deadTime = time;
  let button = $(element);
  let timeStop = setInterval(function () {
    deadTime--;
    if (deadTime > 0) {
      button.text(`稍等 ${deadTime} S`);
      button.attr('disabled', 'disabled');//禁止点击
    } else {
      deadTime = time;//当减到0时重新赋值
      button.text('导出全部');
      clearInterval(timeStop);//清除定时器
      button.removeAttr('disabled');//移除属性，可点击
    }
  }, 1000)
}

7、downloadFile：base64数据导出文件，文件下载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function downloadFile(filename, data){
    let DownloadLink = document.createElement('a');
    if ( DownloadLink ){
        document.body.appendChild(DownloadLink);
        DownloadLink.style = 'display: none';
        DownloadLink.download = filename;
        DownloadLink.href = data;
        if ( document.createEvent ){
            let DownloadEvt = document.createEvent('MouseEvents');
            DownloadEvt.initEvent('click', true, false);
            DownloadLink.dispatchEvent(DownloadEvt);
        }
        else if ( document.createEventObject )
            DownloadLink.fireEvent('onclick');
        else if (typeof DownloadLink.onclick == 'function' )
            DownloadLink.onclick();
        document.body.removeChild(DownloadLink);
    }
}

8、toFullScreen：全屏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function toFullScreen(){
    let el = document.documentElement;
    let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
    //typeof rfs != "undefined" && rfs
    if (rfs) {
        rfs.call(el);
    }else if (typeof window.ActiveXObject !== "undefined") {
        //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
        let wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }else{
        alert("浏览器不支持全屏");
    }
}

8、exitFullscreen：退出全屏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function exitFullscreen(){
    let el = parent.document;
    let cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen;
    //typeof cfs != "undefined" && cfs
    if (cfs) {
        cfs.call(el);
    }else if (typeof window.ActiveXObject !== "undefined") {
        //for IE，这里和fullScreen相同，模拟按下F11键退出全屏
        let wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }else{
        alert("切换失败,可尝试Esc退出")
    }
}

9、requestAnimationFrame：window动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
window.requestAnimationFrame = window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    function (callback) {
        //为了使setTimteout的尽可能的接近每秒60帧的效果
        window.setTimeout(callback, 1000 / 60);
    };
    
window.cancelAnimationFrame = window.cancelAnimationFrame ||
    Window.webkitCancelAnimationFrame ||
    window.mozCancelAnimationFrame ||
    window.msCancelAnimationFrame ||
    window.oCancelAnimationFrame ||
    function (id) {
        //为了使setTimteout的尽可能的接近每秒60帧的效果
        window.clearTimeout(id);
    }

10、Object.keys：返回一个由一个给定对象的自身可枚举属性组成的数组

1
2
3
4
5
6
7
8
9
10
11
12
Object.keys = Object.keys || function keys(object) {
    if(object === null || object === undefined){
        throw new TypeError('Cannot convert undefined or null to object');
    }
    let result = []
    if(isArrayLike(object) || isPlainObject(object)){
        for (let key in object) {
            object.hasOwnProperty(key) && ( result.push(key) )
        }
    }
    return result
}

11、Object.values：返回一个给定对象自身的所有可枚举属性值的数组

1
2
3
4
5
6
7
8
9
10
11
12
Object.values = Object.values || function values(object) {
    if(object === null || object === undefined){
        throw new TypeError('Cannot convert undefined or null to object');
    }
    let result = []
    if(isArrayLike(object) || isPlainObject(object)){
        for (let key in object) {
            object.hasOwnProperty(key) && ( result.push(object[key]) )
        }
    }
    return result
}

12、arr.includes：用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false，可指定开始查询的位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Array.prototype.includes = Array.prototype.includes || function includes(value, start){
    let ctx = this
    let length = ctx.length;
    
    start = parseInt(start)
    if(isNaN(start)){
        start = 0
    }else if (start < 0) {
        start = -start > length ? 0 : (length + start);
      }
    
    let index = ctx.indexOf(value)
    
    return index >= start;
}

13、arr.find：返回数组中通过测试（函数fn内判断）的第一个元素的值

1
2
3
4
5
6
7
8
9
10
Array.prototype.find = Array.prototype.find || function find(fn, ctx){
    fn = fn.bind(ctx)
    
    let result;
    this.some((value, index, arr), thisValue) => {
        return fn(value, index, arr) ? (result = value, true) : false
    })
    
    return result
}

14、arr.findIndex ：返回数组中通过测试（函数fn内判断）的第一个元素的下标

1
2
3
4
5
6
7
8
9
10
Array.prototype.findIndex = Array.prototype.findIndex || function findIndex(fn, ctx){
    fn = fn.bind(ctx)
    
    let result;
    this.some((value, index, arr), thisValue) => {
        return fn(value, index, arr) ? (result = index, true) : false
    })
    
    return result
}

15、performance.timing：利用performance.timing进行性能分析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.onload = function(){
    setTimeout(function(){
        let t = performance.timing
        console.log('DNS查询耗时 ：' + (t.domainLookupEnd - t.domainLookupStart).toFixed(0))
        console.log('TCP链接耗时 ：' + (t.connectEnd - t.connectStart).toFixed(0))
        console.log('request请求耗时 ：' + (t.responseEnd - t.responseStart).toFixed(0))
        console.log('解析dom树耗时 ：' + (t.domComplete - t.domInteractive).toFixed(0))
        console.log('白屏时间 ：' + (t.responseStart - t.navigationStart).toFixed(0))
        console.log('domready时间 ：' + (t.domContentLoadedEventEnd - t.navigationStart).toFixed(0))
        console.log('onload时间 ：' + (t.loadEventEnd - t.navigationStart).toFixed(0))
        if(t = performance.memory){
            console.log('js内存使用占比 ：' + (t.usedJSHeapSize / t.totalJSHeapSize * 100).toFixed(2) + '%')
        }
    })
}

16、适配窗口分辨率

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 适配
window.onload = function () {
  /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
    为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
  getRem(1920, 100);
};
window.onresize = function () {
  getRem(1920, 100);
};
function getRem(pWidth, pRem) {
  let html = document.getElementsByTagName('html')[0];
  let oWidth = document.body.clientWidth || document.documentElement.clientWidth;
  html.style.fontSize = oWidth / pWidth * pRem + 'px';
  // html.style.fontSize = 1920/pWidth*pRem + "px";
}
赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家