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

徐小夕 等级 670 0 0

让你瞬间提高工作效率的常用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]*$/;


2. 检测平台(设备)类型
``` js
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 "时间到!"; }


4. 跨端事件处理
``` js
// 是否支持触摸事件
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);


6. xss预防方式
``` js
// 敏感符号转义
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中文翻译思维导图

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

公众号后台回复 lodash思维导图 获得高清源文件

欢迎关注《趣谈前端》公众号,让我们一起探讨前端的边界.

更多推荐

收藏
评论区

相关推荐

让你瞬间提高工作效率的常用js函数汇总(持续更新)
前言 本文总结了项目开发过程中常用的js函数和正则,意在提高大家平时的开发效率,具体内容如下: 1. 常用的正则校验 2. 常用的设备检测方式 3. 常用的日期时间函数 4.
js去除字符串
js去除字符串js<DOCTYPE html<html<head <title</title</head<body</body<script type"text/javascript" function delHtmlTag(str){   return str.replace(/<^/g,""); } var s
前端 - 常见的异常捕获方法
前端异常捕获在ES3之前js代码执行的过程中,一旦出现错误,整个js代码都会停止执行,这样就显的代码非常的不健壮。从ES3开始,js也提供了类似的异常处理机制,从而让js代码变的更健壮,程序执行的过程中出现了异常,也可以让程序具有了一部分的异常恢复能力。js异常的特点是,出现不会导致JS引擎崩溃,最多只会终止当前执行的任务。回归正题,我们该如何在程序异常发生
从 生成器 到 promise+async
本文主要讲解js中关于生成器的相关概念和作用,以及到后面结合 promise 实现 es7中的 async 原理,你将学习到js中异步流程控制相关知识 1、认识生成器思考如下代码:javascript let x 1 function foo() x++ bar() console.log(x) // 3 function bar(
JS 折线图
JS 折线图  echarts 折线图。需要引入:echarts.min.js <script src="${ctxStatic}/common/echarts.min.js" charset="utf-8" type="text/javascript"></script> JS调用后台方法,得到数据 Map<String, Obj
JSON学习笔记(二、语法)
#### JSON和js关系 欲学JSON先学js,那么JSON和js的关系是什么样的呢? .JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台。 .JSON 语法是 JavaScript 语法的子集 #### 基本语法 .数据在名称/值对中 .数据由逗号分隔 .大括号保存对象 .中括号保
JS导出页面为PDF文件,该如何操作?来看一眼就明白啦!
废话不多说,直接上代码。 1.资源文件或依赖 <script type="text/javascript" src="https://my.oschina.net//u/4265132/blog/4054317/js/canvg2.js"></script><script type="text/javascript" src="https://m
JS的常用属性
JS-------定义:基于事件和对象驱动,并具有安全性能的脚本语言。 引入:<script  type=”text/javascript”>具体js代码</script> <script  type=”text/javascript” src=”js文件”></script> 大小写敏感:例如:A与a是两个不同的东东 注释://  单
java中ajax的用法简单案例
1.index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-2.1.0.js">
Html5添加三联切换仿3D效果旋转木马jQuery插件教程
一、使用方法 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/gallery.js"></script>    二、Html结构 <div id="wrapper"> <div id="mai
JQValidate使用说明
JQuery Validate使用总结: 一、导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.validate.js" type="text/javascript"></script> 二、默认校验规则
JQuery
一、jq简介 jq其实就是js的一个文件。 二、jq书写步骤 1、先引入jq文件(min的文件) <script type="text/javascript" src="file:///C|/jquery/jquery-3.3.1.min.js"></script> 2、换新的一行写js代码 <script type="text/javascri
JavaScript 两个叹号含义
先起个例子吧~  这个用的是谋智的js引擎monkey spider  darion.yaphet@localhost.localdomain:/home/darion.yaphet> js               js> var i; js> print(i) undefined js>  js> va
JavaScript八张思维导图
**![](https://oscimg.oschina.net/oscnet/17104907-a0f0-4b40-ac9d-9c40d9b13157.jpg)** **目录** * JS基本概念 * JS操作符 * JS基本语句 * JS数组用法 * Date用法 * JS
Springmvc异步上传文件
<script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.ext.js" type="text/javascript"></script><script src="js/jquery.form.js" type="text/javascript"