让你瞬间提高工作效率的常用JS函数汇总

前言

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

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

代码

1.正则

 
 
 
 
    
  
  
  
  
  1. // 匹配邮箱 
    2. 
  
  
  
  
  2. let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$ 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. // (新)匹配手机号 
    5. 
  
  
  
  
  5. let reg = /^1[0-9]{10}$/; 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. // (旧)匹配手机号 
    8. 
  
  
  
  
  8. let reg = /^1(3|4|5|7|8)[0-9]{9}$/; 
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10. // 匹配8-16位数字和字母密码的正则表达式 
    11. 
  
  
  
  
  11. let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/; 
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13. // 匹配国内电话号码 0510-4305211 
    14. 
  
  
  
  
  14. let reg = /\d{3}-\d{8}|\d{4}-\d{7}/; 
    15. 
  
  
  
  
  15.  
    16. 
  
  
  
  
  16. // 匹配身份证号码 
    17. 
  
  
  
  
  17. let reg=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
    18. 
  
  
  
  
  18.  
    19. 
  
  
  
  
  19. // 匹配腾讯QQ号 
    20. 
  
  
  
  
  20. let reg = /[1-9][0-9]{4,}/; 
    21. 
  
  
  
  
  21.  
    22. 
  
  
  
  
  22. // 匹配ip地址 
    23. 
  
  
  
  
  23. let reg = /\d+\.\d+\.\d+\.\d+/; 
    24. 
  
  
  
  
  24.  
    25. 
  
  
  
  
  25. // 匹配中文 
    26. 
  
  
  
  
  26. let reg = /^[\u4e00-\u9fa5]*$/; 
    27.

2.检测平台(设备)类型

 
 
 
 
    
  
  
  
  
  1. let isWechat = /micromessenger/i.test(navigator.userAgent), 
    2. 
  
  
  
  
  2.     isWeibo = /weibo/i.test(navigator.userAgent), 
    3. 
  
  
  
  
  3.     isQQ = /qq\//i.test(navigator.userAgent), 
    4. 
  
  
  
  
  4.     isIOS = /(iphone|ipod|ipad|ios)/i.test(navigator.userAgent), 
    5. 
  
  
  
  
  5.     isAndroid = /android/i.test(navigator.userAgent); 
    6.

3.常用的日期时间函数

 
 
 
 
    
  
  
  
  
  1. // 时间格式化 
    2. 
  
  
  
  
  2. function format_date(timeStamp) { 
    3. 
  
  
  
  
  3.     let date = new Date(timeStamp); 
    4. 
  
  
  
  
  4.     return date.getFullYear() + "年" 
    5. 
  
  
  
  
  5.         + prefix_zero(date.getMonth() + 1) + "月" 
    6. 
  
  
  
  
  6.         + prefix_zero(date.getDate()) + "日 " 
    7. 
  
  
  
  
  7.         + prefix_zero(date.getHours()) + ":" 
    8. 
  
  
  
  
  8.         + prefix_zero(date.getMinutes()); 
    9. 
  
  
  
  
  9. } 
    10. 
  
  
  
  
  10.  
    11. 
  
  
  
  
  11. // 数字格式化 
    12. 
  
  
  
  
  12. function prefix_zero(num) { 
    13. 
  
  
  
  
  13.     return num >= 10 ? num : "0" + num; 
    14. 
  
  
  
  
  14. } 
    15. 
  
  
  
  
  15.  
    16. 
  
  
  
  
  16. // 倒计时时间格式化 
    17. 
  
  
  
  
  17. function format_time(timeStamp) { 
    18. 
  
  
  
  
  18.     let day = Math.floor(timeStamp / (24 * 3600 * 1000)); 
    19. 
  
  
  
  
  19.     let leave1 = timeStamp % (24 * 3600 * 1000); 
    20. 
  
  
  
  
  20.     let hours = Math.floor(leave1 / (3600 * 1000)); 
    21. 
  
  
  
  
  21.     let leave2 = leave1 % (3600 * 1000); 
    22. 
  
  
  
  
  22.     let minutes = Math.floor(leave2 / (60 * 1000)); 
    23. 
  
  
  
  
  23.     let leave3 = leave2 % (60 * 1000); 
    24. 
  
  
  
  
  24.     let seconds = Math.floor(leave3 / 1000); 
    25. 
  
  
  
  
  25.     if (day) return day + "天" + hours + "小时" + minutes + "分"; 
    26. 
  
  
  
  
  26.     if (hours) return hours + "小时" + minutes + "分" + seconds + "秒"; 
    27. 
  
  
  
  
  27.     if (minutes) return minutes + "分" + seconds + "秒"; 
    28. 
  
  
  
  
  28.     if (seconds) return seconds + "秒"; 
    29. 
  
  
  
  
  29.     return "时间到！"; 
    30. 
  
  
  
  
  30. } 
    31.

5.跨端事件处理

 
 
 
 
    
  
  
  
  
  1. (function (doc, win) { 
    2. 
  
  
  
  
  2.     var docEl = doc.documentElement, 
    3. 
  
  
  
  
  3.         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 
    4. 
  
  
  
  
  4.         recalc = function () { 
    5. 
  
  
  
  
  5.             var clientWidth = docEl.clientWidth; 
    6. 
  
  
  
  
  6.             var fontSize = 20; 
    7. 
  
  
  
  
  7.             docEl.style.fontSize = fontSize + 'px'; 
    8. 
  
  
  
  
  8.             var docStyles = getComputedStyle(docEl); 
    9. 
  
  
  
  
  9.             var realFontSize = parseFloat(docStyles.fontSize); 
    10. 
  
  
  
  
  10.             var scale = realFontSize / fontSize; 
    11. 
  
  
  
  
  11.             console.log("realFontSize: " + realFontSize + ", scale: " + scale); 
    12. 
  
  
  
  
  12.             fontSize = clientWidth / 667 * 20; 
    13. 
  
  
  
  
  13.             if(isIphoneX()) fontSize = 19; 
    14. 
  
  
  
  
  14.             fontSize = fontSize / scale; 
    15. 
  
  
  
  
  15.             docEl.style.fontSize = fontSize + 'px'; 
    16. 
  
  
  
  
  16.         }; 
    17. 
  
  
  
  
  17.     // Abort if browser does not support addEventListener 
    18. 
  
  
  
  
  18.     if (!doc.addEventListener) return; 
    19. 
  
  
  
  
  19.     win.addEventListener(resizeEvt, recalc, false); 
    20. 
  
  
  
  
  20.     doc.addEventListener('DOMContentLoaded', recalc, false); 
    21. 
  
  
  
  
  21.  
    22. 
  
  
  
  
  22.     // iphoneX判断 
    23. 
  
  
  
  
  23.     function isIphoneX(){ 
    24. 
  
  
  
  
  24.         return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375) 
    25. 
  
  
  
  
  25.     } 
    26. 
  
  
  
  
  26.  
    27. 
  
  
  
  
  27. })(document, window); 
    28.

6.xss预防方式

 
 
 
 
    
  
  
  
  
  1. // 敏感符号转义 
    2. 
  
  
  
  
  2. function entities(s) { 
    3. 
  
  
  
  
  3.     let e = { 
    4. 
  
  
  
  
  4.         '"': '"', 
    5. 
  
  
  
  
  5.         '&': '&', 
    6. 
  
  
  
  
  6.         '<': '<', 
    7. 
  
  
  
  
  7.         '>': '>' 
    8. 
  
  
  
  
  8.     } 
    9. 
  
  
  
  
  9.     return s.replace(/["<>&]/g, m => { 
    10. 
  
  
  
  
  10.         return e[m] 
    11. 
  
  
  
  
  11.     }) 
    12. 
  
  
  
  
  12. } 
    13.

7.常用的js算法

 
 
 
 
    
  
  
  
  
  1. /** 
    2. 
  
  
  
  
  2.  * 节流函数--规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。 
    3. 
  
  
  
  
  3.  */ 
    4. 
  
  
  
  
  4. function throttle(fun, delay) { 
    5. 
  
  
  
  
  5.     let last, deferTimer 
    6. 
  
  
  
  
  6.     return function (args) { 
    7. 
  
  
  
  
  7.         let that = this 
    8. 
  
  
  
  
  8.         let _args = arguments 
    9. 
  
  
  
  
  9.         let now = +new Date() 
    10. 
  
  
  
  
  10.         if (last && now < last + delay) { 
    11. 
  
  
  
  
  11.             clearTimeout(deferTimer) 
    12. 
  
  
  
  
  12.             deferTimer = setTimeout(function () { 
    13. 
  
  
  
  
  13.                 last = now 
    14. 
  
  
  
  
  14.                 fun.apply(that, _args) 
    15. 
  
  
  
  
  15.             }, delay) 
    16. 
  
  
  
  
  16.         }else { 
    17. 
  
  
  
  
  17.             last = now 
    18. 
  
  
  
  
  18.             fun.apply(that,_args) 
    19. 
  
  
  
  
  19.         } 
    20. 
  
  
  
  
  20.     } 
    21. 
  
  
  
  
  21. } 
    22. 
  
  
  
  
  22.  
    23. 
  
  
  
  
  23. /** 
    24. 
  
  
  
  
  24.  * 防抖函数--在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时 
    25. 
  
  
  
  
  25.  */ 
    26. 
  
  
  
  
  26.  function debounce(fun, delay) { 
    27. 
  
  
  
  
  27.     return function (args) { 
    28. 
  
  
  
  
  28.         let that = this 
    29. 
  
  
  
  
  29.         clearTimeout(fun.id) 
    30. 
  
  
  
  
  30.         fun.id = setTimeout(function () { 
    31. 
  
  
  
  
  31.             fun.call(that, args) 
    32. 
  
  
  
  
  32.         }, delay) 
    33. 
  
  
  
  
  33.     } 
    34. 
  
  
  
  
  34. } 
    35. 
  
  
  
  
  35.  
    36. 
  
  
  
  
  36. // 观察者模式 
    37. 
  
  
  
  
  37. let Observer = (function(){ 
    38. 
  
  
  
  
  38.   let t __messages = {}; 
    39. 
  
  
  
  
  39.   return { 
    40. 
  
  
  
  
  40.     regist: function(type, fn) { 
    41. 
  
  
  
  
  41.       if(typeof __messages[type] === 'undefined') { 
    42. 
  
  
  
  
  42.         messages[type] = [fn]; 
    43. 
  
  
  
  
  43.       }else { 
    44. 
  
  
  
  
  44.         __messages[type].push(fn); 
    45. 
  
  
  
  
  45.       } 
    46. 
  
  
  
  
  46.     }, 
    47. 
  
  
  
  
  47.     fire: function(type, args) { 
    48. 
  
  
  
  
  48.       if(!__messages[type]){ 
    49. 
  
  
  
  
  49.         return 
    50. 
  
  
  
  
  50.       } 
    51. 
  
  
  
  
  51.       let events = { 
    52. 
  
  
  
  
  52.         type: type, 
    53. 
  
  
  
  
  53.         args: args || {} 
    54. 
  
  
  
  
  54.       }, 
    55. 
  
  
  
  
  55.       i = 0, 
    56. 
  
  
  
  
  56.       len = __messages[type].length; 
    57. 
  
  
  
  
  57.       for(;i
  
  
  
  
  58.         __messages[type][i].call(this, events); 
    59. 
  
  
  
  
  59.       } 
    60. 
  
  
  
  
  60.     }, 
    61. 
  
  
  
  
  61.     remove: function(type, fn) { 
    62. 
  
  
  
  
  62.       if(__messages[type] instanceof Array){ 
    63. 
  
  
  
  
  63.         let i = __messages[type].length -1; 
    64. 
  
  
  
  
  64.         for(;i>=0;i--){ 
    65. 
  
  
  
  
  65.           __messages[type][i] === fn && __messages[type].splice(i, 1) 
    66. 
  
  
  
  
  66.         } 
    67. 
  
  
  
  
  67.       } 
    68. 
  
  
  
  
  68.     } 
    69. 
  
  
  
  
  69.   } 
    70. 
  
  
  
  
  70. })(); 
    71. 
  
  
  
  
  71.  
    72. 
  
  
  
  
  72.  // 模板渲染方法 
    73. 
  
  
  
  
  73.  function formatString(str, data) { 
    74. 
  
  
  
  
  74.    return str.replace(/\{\{(\w+)\}\}/g, function(match, key) { 
    75. 
  
  
  
  
  75.      return typeof data[key] === undefined ? '' : data[key] 
    76. 
  
  
  
  
  76.    }) 
    77. 
  
  
  
  
  77.  } 
    78. 
  
  
  
  
  78.   
    79. 
  
  
  
  
  79.  // 冒泡排序 
    80. 
  
  
  
  
  80. function bubbleSort(arr) { 
    81. 
  
  
  
  
  81.     for (let i = arr.length - 1; i > 0; i--) { 
    82. 
  
  
  
  
  82.       for (let j = 0; j < i; j++) { 
    83. 
  
  
  
  
  83.         if (arr[j] > arr[j + 1]) { 
    84. 
  
  
  
  
  84.           swap(arr, j, j + 1); 
    85. 
  
  
  
  
  85.         } 
    86. 
  
  
  
  
  86.       } 
    87. 
  
  
  
  
  87.     } 
    88. 
  
  
  
  
  88.     return arr; 
    89. 
  
  
  
  
  89. } 
    90. 
  
  
  
  
  90.  
    91. 
  
  
  
  
  91. // 置换函数 
    92. 
  
  
  
  
  92. function swap(arr, indexA, indexB) { 
    93. 
  
  
  
  
  93.     [arr[indexA], arr[indexB]]= [arr[indexB], arr[indexA]]; 
    94. 
  
  
  
  
  94. } 
    95. 
  
  
  
  
  95.  
    96. 
  
  
  
  
  96. // 数组去重 
    97. 
  
  
  
  
  97. function distinct(arr = testArr) { 
    98. 
  
  
  
  
  98.     return arr.filter((v, i, array) => array.indexOf(v) === i) 
    99. 
  
  
  
  
  99. } 
    100.

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

本文转载自微信公众号「趣谈前端」，可以通过以下二维码关注。转载本文请联系趣谈前端公众号。

新闻名称：让你瞬间提高工作效率的常用JS函数汇总
浏览地址：http://www.shufengxianlan.com/qtweb/news0/359750.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网页设计公司知识

各行业网站

乐至网站建设　　 　手机网站制作　　 　做移动网站　　 　西云服务器托管　　 　注册域名　　 　铁科精智测控　　 　成都移动主机托管　　 　教育建设方案　　 　瑞杰管理　　 　美美搬家　　 　微信服务号订阅号开发　　 　重庆主机托管　　 　成都艾瑞格　　 　格蓝特设备　　 　四川成都网站制作　　 　商城网站　　 　四川正泰动物　　 　青羊区雕琢时光　　 　遂宁海缘科技　　 　成都建站