日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
讓你瞬間提高工作效率的常用JS函數(shù)匯總

前言

本文總結了項目開發(fā)過程中常用的js函數(shù)和正則，意在提高大家平時的開發(fā)效率，具體內(nèi)容如下：

  1. 常用的正則校驗
  2. 常用的設備檢測方式
  3. 常用的日期時間函數(shù)
  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位數(shù)字和字母密碼的正則表達式 
    11. 
  
  
  
  
  11. let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/; 
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13. // 匹配國內(nèi)電話號碼 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.常用的日期時間函數(shù)

 
 
 
 
    
  
  
  
  
  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. // 數(shù)字格式化 
    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.  * 節(jié)流函數(shù)--規(guī)定在一個單位時間內(nèi)，只能觸發(fā)一次函數(shù)。如果這個單位時間內(nèi)觸發(fā)多次函數(shù)，只有一次生效。 
    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.  * 防抖函數(shù)--在事件被觸發(fā)n秒后再執(zhí)行回調，如果在這n秒內(nèi)又被觸發(fā)，則重新計時 
    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. // 置換函數(shù) 
    92. 
  
  
  
  
  92. function swap(arr, indexA, indexB) { 
    93. 
  
  
  
  
  93.     [arr[indexA], arr[indexB]]= [arr[indexB], arr[indexA]]; 
    94. 
  
  
  
  
  94. } 
    95. 
  
  
  
  
  95.  
    96. 
  
  
  
  
  96. // 數(shù)組去重 
    97. 
  
  
  
  
  97. function distinct(arr = testArr) { 
    98. 
  
  
  
  
  98.     return arr.filter((v, i, array) => array.indexOf(v) === i) 
    99. 
  
  
  
  
  99. } 
    100.

后期會繼續(xù)總結更多工作中遇到的經(jīng)典函數(shù)，也作為自己在工作中的一點總結。我們當然也可以直接使用lodash或ramda這些比較流行的函數(shù)式工具庫，在這里僅做學習參考使用。

本文轉載自微信公眾號「趣談前端」，可以通過以下二維碼關注。轉載本文請聯(lián)系趣談前端公眾號。


當前名稱：讓你瞬間提高工作效率的常用JS函數(shù)匯總
文章網(wǎng)址：http://www.dlmjj.cn/article/djsghee.html