专栏首页趣谈前端让你瞬间提高工作效率的常用js函数汇总(持续更新)

让你瞬间提高工作效率的常用js函数汇总(持续更新)

前言

本文总结了项目开发过程中常用的js函数和正则,意在提高大家平时的开发效率,具体内容如下:

  1. 常用的正则校验
  2. 常用的设备检测方式
  3. 常用的日期时间函数
  4. 跨端事件处理
  5. js移动端适配方案
  6. xss预防方式
  7. 常用的js算法(防抖,截流,去重,排序,模板渲染,观察者...)

代码

  1. 正则
// 匹配邮箱
let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$

// (新)匹配手机号
let reg = /^1[0-9]{10}$/;

// (旧)匹配手机号
let reg = /^1[3|4|5|7|8][0-9]{9}$/;

// 匹配8-16位数字和字母密码的正则表达式
let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;

// 匹配国内电话号码 0510-4305211
let reg = /\d{3}-\d{8}|\d{4}-\d{7}/;

// 匹配身份证号码
let reg=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

// 匹配腾讯QQ号
let reg = /[1-9][0-9]{4,}/;

// 匹配ip地址
let reg = /\d+\.\d+\.\d+\.\d+/;

// 匹配中文
let reg = /^[\u4e00-\u9fa5]*$/;
复制代码
  1. 检测平台(设备)类型
let isWechat = /micromessenger/i.test(navigator.userAgent),
    isWeibo = /weibo/i.test(navigator.userAgent),
    isQQ = /qq\//i.test(navigator.userAgent),
    isIOS = /(iphone|ipod|ipad|ios)/i.test(navigator.userAgent),
    isAndroid = /android/i.test(navigator.userAgent);
复制代码
  1. 常用的日期时间函数
// 时间格式化
function format_date(timeStamp) {
    let date = new Date(timeStamp);
    return date.getFullYear() + "年"
        + prefix_zero(date.getMonth() + 1) + "月"
        + prefix_zero(date.getDate()) + "日 "
        + prefix_zero(date.getHours()) + ":"
        + prefix_zero(date.getMinutes());
}

// 数字格式化
function prefix_zero(num) {
    return num >= 10 ? num : "0" + num;
}

// 倒计时时间格式化
function format_time(timeStamp) {
    let day = Math.floor(timeStamp / (24 * 3600 * 1000));
    let leave1 = timeStamp % (24 * 3600 * 1000);
    let hours = Math.floor(leave1 / (3600 * 1000));
    let leave2 = leave1 % (3600 * 1000);
    let minutes = Math.floor(leave2 / (60 * 1000));
    let leave3 = leave2 % (60 * 1000);
    let seconds = Math.floor(leave3 / 1000);
    if (day) return day + "天" + hours + "小时" + minutes + "分";
    if (hours) return hours + "小时" + minutes + "分" + seconds + "秒";
    if (minutes) return minutes + "分" + seconds + "秒";
    if (seconds) return seconds + "秒";
    return "时间到!";
}
复制代码
  1. 跨端事件处理
// 是否支持触摸事件
let isSupportTouch = ("ontouchstart" in document.documentElement) ? true : false;

//禁用Enter键表单自动提交
document.onkeydown = function(event) {
    let target, code, tag;
    if (!event) {
        event = window.event; //针对ie浏览器
        target = event.srcElement;
        code = event.keyCode;
        if (code == 13) {
            tag = target.tagName;
            if (tag == "TEXTAREA") { return true; }
            else { return false; }
        }
    }
    else {
        target = event.target; //针对遵循w3c标准的浏览器,如Firefox
        code = event.keyCode;
        if (code == 13) {
            tag = target.tagName;
            if (tag == "INPUT") { return false; }
            else { return true; }
        }
    }
};
复制代码
  1. 移动端适配方案
(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            var fontSize = 20;
            docEl.style.fontSize = fontSize + 'px';
            var docStyles = getComputedStyle(docEl);
            var realFontSize = parseFloat(docStyles.fontSize);
            var scale = realFontSize / fontSize;
            console.log("realFontSize: " + realFontSize + ", scale: " + scale);
            fontSize = clientWidth / 667 * 20;
            if(isIphoneX()) fontSize = 19;
            fontSize = fontSize / scale;
            docEl.style.fontSize = fontSize + 'px';
        };
    // Abort if browser does not support addEventListener
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);

    // iphoneX判断
    function isIphoneX(){
        return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
    }

})(document, window);
复制代码
  1. xss预防方式
// 敏感符号转义
function entities(s) {
    let e = {
        '"': '"',
        '&': '&',
        '<': '&lt;',
        '>': '&gt;'
    }
    return s.replace(/["<>&]/g, m => {
        return e[m]
    })
}
复制代码
  1. 常用的js算法
/**
 * 节流函数--规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
 */
function throttle(fun, delay) {
    let last, deferTimer
    return function (args) {
        let that = this
        let _args = arguments
        let now = +new Date()
        if (last && now < last + delay) {
            clearTimeout(deferTimer)
            deferTimer = setTimeout(function () {
                last = now
                fun.apply(that, _args)
            }, delay)
        }else {
            last = now
            fun.apply(that,_args)
        }
    }
}

/**
 * 防抖函数--在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时
 */
 function debounce(fun, delay) {
    return function (args) {
        let that = this
        clearTimeout(fun.id)
        fun.id = setTimeout(function () {
            fun.call(that, args)
        }, delay)
    }
}

// 观察者模式
let Observer = (function(){
  let t __messages = {};
  return {
    regist: function(type, fn) {
      if(typeof __messages[type] === 'undefined') {
        messages[type] = [fn];
      }else {
        __messages[type].push(fn);
      }
    },
    fire: function(type, args) {
      if(!__messages[type]){
        return
      }
      let events = {
        type: type,
        args: args || {}
      },
      i = 0,
      len = __messages[type].length;
      for(;i<len;i++){
        __messages[type][i].call(this, events);
      }
    },
    remove: function(type, fn) {
      if(__messages[type] instanceof Array){
        let i = __messages[type].length -1;
        for(;i>=0;i--){
          __messages[type][i] === fn && __messages[type].splice(i, 1)
        }
      }
    }
  }
})();

 // 模板渲染方法
 function formatString(str, data) {
   return str.replace(/\{\{(\w+)\}\}/g, function(match, key) {
     return typeof data[key] === undefined ? '' : data[key]
   })
 }
 
 // 冒泡排序
function bubbleSort(arr) {
    for (let i = arr.length - 1; i > 0; i--) {
      for (let j = 0; j < i; j++) {
        if (arr[j] > arr[j + 1]) {
          swap(arr, j, j + 1);
        }
      }
    }
    return arr;
}

// 置换函数
function swap(arr, indexA, indexB) {
    [arr[indexA], arr[indexB]] = [arr[indexB], arr[indexA]];
}

// 数组去重
function distinct(arr = testArr) {
    return arr.filter((v, i, array) => array.indexOf(v) === i)
}
复制代码

后期会继续总结更多工作中遇到的经典函数,也作为自己在工作中的一点总结。我们当然也可以直接使用lodash或ramda这些比较流行的函数式工具库,在这里仅做学习参考使用。

附录 lodash API中文翻译思维导图

更多推荐

  • 一张图教你快速玩转vue-cli3
  • 3分钟教你用原生js实现具有进度监听的文件上传预览组件
  • 3分钟教你用原生js实现具有进度监听的文件上传预览组件
  • 使用Angular8和百度地图api开发《旅游清单》
  • js基本搜索算法实现与170万条数据下的性能测试
  • 《前端算法系列》如何让前端代码速度提高60倍
  • 《前端算法系列》数组去重
  • 如何把控css的方向感
  • vue高级进阶系列——用typescript玩转vue和vuex
  • 前端三年,谈谈最值得读的5本书籍

本文分享自微信公众号 - 趣谈前端(beautifulFront),作者:徐小夕

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 让你瞬间提高工作效率的常用js函数汇总(持续更新)

    本文总结了项目开发过程中常用的js函数和正则,意在提高大家平时的开发效率,具体内容如下:

    徐小夕
  • javascript算法学习打卡(第一周)

    之前因为工作原因接触了很多有意思的算法知识,为了巩固大家的算法基础和编程能力,笔者将开展为期2个月的算法学习打卡, 每周3-5次算法训练, 并附有算法题的答案,...

    徐小夕
  • 如何优雅的使用javascript递归画一棵结构树

    简单的说,递归就是函数自己调用自己,它作为一种算法在程序设计语言中广泛应用。其核心思想是把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解。一...

    徐小夕
  • 让你瞬间提高工作效率的常用js函数汇总(持续更新)

    本文总结了项目开发过程中常用的js函数和正则,意在提高大家平时的开发效率,具体内容如下:

    徐小夕
  • webpack2 的 tree-shaking 好用吗?

    下面是一个使用 react 的业务的代码依赖,但是实际上业务代码中并没有对依赖图中标识的模块,也就是说构建工具将不需要的代码打包到了最终的代码当中。显然,这是很...

    IMWeb前端团队
  • Coursera吴恩达《神经网络与深度学习》课程笔记(2)-- 神经网络基础之逻辑回归

    上节课我们主要对深度学习(Deep Learning)的概念做了简要的概述。我们先从房价预测的例子出发,建立了标准的神经网络(Neural Network)模型...

    红色石头
  • DApp开发:用Truffle 开发一个链上记事本

    本文以编写一个链上记事本为例,介绍如何开发DApp,一年多前写的开发、部署第一个DApp[1]因为Truffle 、MetaMask、Solidity都有升级,...

    Tiny熊
  • 什么996? 有了这个工具咱自愿007...

    生活中,你常会为自己定一些小目标、列一些小计划,但仔细一想,你又完成了多少呢?说到底是没人监督你,即使你不做也可以耍赖...

    区块链大本营
  • javascript中那些折磨人的面试题

    前端工程师有时候面试时会遇到一类面试官,他们问的问题对于语言本身非常较真儿,往往不是候选人可能期待的面向实际的问题(有些候选人强调能干活就行,至于知不知道其中缘...

    前端博客 : alili.tech
  • 从公有云无服务器应用中获得最大收益

    无服务器计算可以降低公有云中的应用成本,但企业需要正确的技能才能获得这些,且收获其他收益。 无服务器计算允许组织在更细的颗粒度上构建和部署云应用。与使用单体代码...

    静一

扫码关注云+社区

领取腾讯云代金券