栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

让你瞬间提高工作效率的常用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 = {
 '"': '"',
 '&': '&',
 '<': '<',
 '>': '>'
    }
    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)
 }
    }
}


 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=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中文翻译思维导图

可以在趣谈前端回复我 lodash思维导图 获得高清源文件
更多推荐
  • 如何用不到200行代码写一款属于自己的js类库
  • 记一次老项目中的跨页面通信问题和前端实现文件下载功能
  • 《前端实战》之变量提升,函数声明提升及变量作用域详解
  • 《前端实战总结》如何在不刷新页面的情况下改变URL
  • css3实战汇总(附源码)
  • 5分钟教你用nodeJS手写一个mock数据服务器
  • 前端组件/库打包利器rollup使用与配置实战
  • web性能优化的15条实用技巧
  • 快速掌握es6+新特性及es6核心语法盘点
转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号